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

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

   

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

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

マウスホバーで下線がつくリンクを作成する方法について解説しています。
ここでは、:hover擬似クラスと背景画像を利用して、下線の下に下向きの三角形を表示させます。



この動画で学べること

・マウスホバー時にリンクの下にマークを表示させる方法



マウスホバー時にリンクの下にマークを表示させる方法

今回は、マウスホバーした時にリンクの下にマークを表示させる方法を見ていきたいと思います。
前回は、マークの線の部分を作りましたので、今回は▼を<li>タグの背景画像として指定していきます。
これは少し難しいのですが、<a>を囲む<li>タグを高さ36pxにし、その中で▼の背景画像を表示させ、境界線で作った線のしたに配置させるという方法で記述します。
では<li>の上にマウスが乗った時、という指定をして画像を表示させ、位置を真ん中の下にくるようにしてください。




header nav ul li:hover {
background: url(images/navbar.png) no-repeat center bottom;
height: 36px;
}




保存してブラウザで見てみましょう。
マウスが乗った時にマークが表示されましたが、▼の位置が文字ではなく、ページのど真ん中にきています。
文字の横幅の真ん中に▼がくるように指定したいのですが、この調整ができるのはインライン要素です。
しかし、インライン要素では背景画像が表示できないので、こういうときにはインライン要素もブロック要素も両方指定できるinline-blockを書きましょう。




header nav ul li:hover {
background: url(images/navbar.png) no-repeat center bottom;
height: 36px;
display: inline-block;
}




もう一度保存してブラウザで見てみましょう。
文字のど真ん中に▼のマークをもってくることができました。