今回はナビゲーションメニューで使える、cssテクニックを紹介するぞ。ちなみに下が完成形だ。CodePen.HTML構造とCSS構造についてまずはHTML構造とCSS構造について書いていく。いえ、HTMLに関してはかなり簡単だ。HTMLの構造HTMLは今回普通のリストを用意した。現在表示されている場合はクラスに「navi-now」をつけている。今回の中心はCSSなのだが、特にポイントとなる部分はafterで疑似要素を用意することと、その疑似要素に対しての動きを指定する部分であろうな。下のコードだと、13~29行目と30~36行目の部分になるぞ。css」を選択するがよい。scaleX();を指定する疑似要素で今回のアンダーラインの部分を実装していく。scaleX();である。scaleX();関数は、指定した要素をX軸(水平方向)に拡縮するものだ。scaleX(0);でゼロ地点を指定しているのである。することで、display:noneやvisibility:hiddenを使わずに非表示の状態にすることが可能だ。auto;//表示されたときのラインの長さを指定する。50%;//表示されたときのラインの太さを指定する。scaleX(0);を(1)に変更してやればいい。することで、hoverした際に水平方向へゼロ地点から1地点へ拡大するのだ。}まとめ以上がhoverした際に、要素の中心からアンダーラインを表示させるテクニックである。ポイントになる点は・疑似要素でラインを作成する。scaleX()でラインを変形させる。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。excerptHiddenHiddenClose。