css

メニューに下線をだすcss(マウスでホバーした時に)

投稿日:

Pocket

うもチャーさんです。

あなたはメニューに下線をだすcssを

探していますか?

 

この記事では、メニューの上に

マウスを持っていくと、メニューに下線が

表示される方法を書いています。

 

なのであなたがこの記事を読めば、

メニューにホバーした時に、

下線を表示させることができます。

 

 

ということで、メニューに下線を出したい、

のであればこのまま下にスクロールして、

読んでみてください。

 

スポンサードサーチ

メニューに下線をだすcss(ホバー時)はこれ

 

で結論からいきまして、

メニューにホバーした時に、

下線を引く方法それは、

 

:セレクタに対して:hover(ホバー)を

指定して、{}のなかにborder-bottomをつけるだけです。

 

 

参考例

.menu:hover {

border-bottom:3px solid blue;

}

 

上記のようなcssを書いておくと、

.menuクラスを降ってあるタグの上に

マウスを当てた時に、下線がひかれます。

 

とはいえ実際に例でみた方がイメージしやすいので、

画像でみてみましょう。

 

 

ということで、下の画像を

みてください。

 

メニュー 下線 css

 

このように、メニューの下に

下に青い線が表示されてますね。

 

(ちなみにこれはスクショの都合で、

見えてないですが、マウスを左から、

2番目のメニューに持って行ってます。)

 

 

こんな風に: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についてでした。

それでは、読んでもらってありがとうございました。

 

でわ。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。