実践コーディングスキル - 第4章 Lesson3

第12回:マウスホバーで下線がつくリンクを作ろう(1)

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

マウスホバーで下線がつくリンクを作成する方法について解説しています。
ここでは、:hover擬似クラスを利用して文字の色を変えます。



この動画で学べること

・マウスホバーで下線がつくリンクを作る方法



マウスホバーで下線がつくリンクを作ってみよう

今回は、擬似クラス:hoverを使ってマウスが上に乗った時に下線がつくリンクを作っていきましょう。
前回は<li>の中の<a>タグにスタイルをかけていきましたが、今回はさらに<a>タグにマウスが乗ったとき、と指定をします。



header nav ul li a:hover{
color: #345c39;
}



保存してブラウザで見てみましょう。
マウスをナビゲーションの文字に載せると文字の色が緑に変わればOKです。
では次に、マウスが載った時にマークを表示させていきましょう。
マークは、▼の部分だけ画像で、線はCSSで表示させます。
まずは線を境界線を作り、高さを指定していきます。
高さを<a>タグに適応させるためには、インライン要素からブロック要素にかえる必要がありますので、プロパティdisplayを使って要素のタイプを変えましょう。




header nav ul li a{
font-size: 16px;
font-weight: bold;
color:#734339;
text-decoration:none;
height: 26px;
border-bottom: 4px solid #345c39;
display: block;
}



保存してブラウザで見てみましょう。
<a>タグをブロック要素にしたので高さの変更ができ、文字と線の間にほどよい距離ができました。