ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、あなたのためのページです。
前回は、「さらに便利になったフォーム部品」をご紹介しました。
今回は、最終回としてWebアプリケーションの一般的なメニューを作成する方法を学びましょう。
メニューを作る
HTML５とCSS３を使い、メニューを作成します。
＜アウトプット＞
https://saycon.co.jp/html/menu.html
HTMLのソースコード
<ul class="gNav">
<li class="active">
<a href="#">
<strong>home</strong>
</a>
</li>
<li>
<a href="#">
<strong>company</strong>
</a>
</li>
<li>
<a href="#">
<strong>contact</strong>
</a>
</li>
</ul>なお、上記「＃」はリンク先が決まっていないnullリンクと呼ばれるものです。
CSSのソースコード
.gNav {
list-style: none;
overflow: hidden;
}
.gNav li {
float: left;
border-right: 1px solid #DDD;
}
.gNav li a {
display: block;
padding: 10px 15px;
text-align: center;
text-decoration: none;
color: #333;
}
.gNav li a:hover {
background: #EEE;
}
.gNav li.active a {
background: #333;
color: #F4FA58;
}.gNav
という書き方は、gNavクラスを意味しています。ブロックの中の
list-style: none;
は、リストの先頭の「・」を消すという意味です。
.gNav li
という書き方は、gNavクラスの中のli要素という意味です。
li要素はブロックレベル要素なので、積み木のように最初は縦に並んでいます。
float: left;
と書くことでli要素を左側に浮遊させ、後に続く要素が右側に回り込むようにすることができます。
結果としてメニューが横並びになります。
しかし、ここで、子要素（li要素）を全てfloatにすると、親要素(ul要素)の高さが無くなってしまいます。
そこで
overflow: hidden;
を使い、その問題を解消します。
overflowは、領域内に収まりきらない内容をどうするかという属性です。
大きく分けて
| visible | 領域をはみ出して表示させる |
|---|---|
| hidden | はみ出た部分を表示しない |
の２つがあります。
ここでは定型句として覚えてください。
最後までお読みいただきありがとうございました。