Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

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

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

no image

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

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

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

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

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

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

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

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

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

最新記事

チャーさん

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

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

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