【HTML・CSS】ナビゲーションとリンクの記述方法の注意点

2019年5月15日

ナビゲーションと各項目に対するリンクについて、HTML及びCSSで記述する際の注意点を簡単にまとめます。

今回注目する点は、「リスト毎の幅」と「リンク」についてです。

横並びのリストについて

まず、以下のような簡単な横並びのリストを作成します。

HTMLとCSSは以下の通りです。

<ul>
	<li>
		<a href="#">TOP</a>
	</li>
	<li>
		<a href="#">CONTACT</a>
	</li>
	<li>
		<a href="#">LINK</a>
	</li>
</ul>
ul{
background-color:#fff;
margin:0;
padding:0;
list-style-type:none;
border-top:solid 1px #00657d;
border-bottom:solid 1px #00657d;
height:2em;
}
ul li{
border-right:solid 1px;
float:left;/*左回り*/
line-height:2em;/*行の高さ指定*/
}

幅が狭い印象を受けます。
また、リンクについても文章上にカーソルを置いた時しかクリックできません。

ここから、ナビゲーションぽくするために以下のように修正します。

  • それぞれの領域の幅を広げる
  • それぞれの領域内にマウスが乗った時、リンク先がクリック可能になるようにする

CSSに追記する

先程のCSSに以下を書き加えます。

li a{
 display:block;
 width:100px;
 }

結果は以下の通りです。

各領域の空白部分にマウスを載せるとリンク先がクリック可能となっています。

解説

そもそもdisplay:blockを設定していない場合、aタグの幅は文字の長さによって変わるようになっています。

これは、aタグがインライン要素という属性を持っているからです。

display:blockを設定することにより、aタグをブロック要素とします。
その結果、aタグのwidthとheightが100%、

つまり親要素であるliの幅と高さと一緒になります。

例えば、li{width:100px;}と記述すると、見た目は先ほどの画像と同様になりますが、

それぞれの領域の空白内にカーソルをおいてもクリックは出来ません。

また、widthが100%にならない要素も存在します。
詳細はこちらの方が色々と検証なさっているようです。

【終わりに】

ナビゲーションとブロック・インライン要素は切っても切り離せない関係だと思います。

この機会に、復習がてら確認できてよかったです。

IT, HTML・CSSHTML, CSS

Posted by 行未