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

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

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

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

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

最新記事

チャーさん

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

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

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