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を動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

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

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

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

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

no image

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

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

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

最新記事

チャーさん

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

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

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