どうもチャーさんです。
あなたはメニューに下線をだすcssを
探していますか？
この記事では、メニューの上に
マウスを持っていくと、メニューに下線が
表示される方法を書いています。
なのであなたがこの記事を読めば、
メニューにホバーした時に、
下線を表示させることができます。
ということで、メニューに下線を出したい、
のであればこのまま下にスクロールして、
読んでみてください。
スポンサードサーチ
メニューに下線をだすcss(ホバー時)はこれ
で結論からいきまして、
メニューにホバーした時に、
下線を引く方法それは、
:セレクタに対して:hover(ホバー)を
指定して、{}のなかにborder-bottomをつけるだけです。
参考例
.menu:hover {
border-bottom:3px solid blue;
}
上記のようなcssを書いておくと、
.menuクラスを降ってあるタグの上に
マウスを当てた時に、下線がひかれます。
とはいえ実際に例でみた方がイメージしやすいので、
画像でみてみましょう。
ということで、下の画像を
みてください。
このように、メニューの下に
下に青い線が表示されてますね。
（ちなみにこれはスクショの都合で、
見えてないですが、マウスを左から、
２番目のメニューに持って行ってます。)
こんな風に:hoverを使って、
border-bottomを指定すれば、
メニューに下線を表示させることができます。
ちなみに、上記の画像のメニューと
下線を表示させたコードは以下です。
css
li {
display:inline-block;
margin-right:10px;
}
li:hover {
border-bottom:3px solid blue;
}
html
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
(aタグつけてないですが、
サンプルということでご愛嬌)
結構コードはシンプルなので、
あなたのブラウザでもすぐに
再現できます。
やってみてください。
スポンサードサーチ
メニューに下線をだすcssを動画で学ぶなら
動画でもやり方説明してとったので、
あなたが動画で学ぶタイプの場合、
以下の動画をみてください。
スポンサードサーチ
まとめ
ということでまとめに入ります。
メニューに下線を表示するcssですが、
:hoverとborder-bottomを使いましょう。
そうすればメニューの上にマウスを
持って行った時に、下線を表示できます。
これはつけておくと、ユーザビリティー
とか視認性とか上がるので、
やっておくと良いですよ。
ということで、早速あなたの方でも
やってみましょう。
やればあなたのスキルがアップしますよ。
では、まずはメニューを作りましょう。
ulとliタグでメニューを作りましょう。
でliタグには、display:inline-block;を
指定しましょう。すると横並びになります。
で、次にli:hover{}と書いて、
{}の中にborder-bottom:1px solid 色;
と書きましょう。
色のところはあなたの好きな色を書きましょう。
英語でblueでもいいですし、16進数で、
#333333(黒)とか、好きなのでいいです。
で書けたらちゃんと動いてるか確認しましょう。
ホバーした時に下線が出てれば成功です。
ということで、メニューに下線をだすcssについてでした。
それでは、読んでもらってありがとうございました。
でわ。
チャーさん
