12.メニューを作る

ここでは、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>

home

</a>

</li>

<li>

company

</a>

</li>

<li>

contact

</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 {

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	はみ出た部分を表示しない

の２つがあります。

ここでは定型句として覚えてください。

.gNav li a

のブロックでは、a要素をブロックレベル要素にしています。

a要素は本来、インライン要素です。

インライン要素はブロックレベル要素と違い

①widthやheightの指定できない

②上下のpaddingが効かない

等の欠点があるためブロックレベル要素にしました。

padding: 10px 15px;

では、a要素に対してpaddingを設定しています。

これによりテキストの上下左右の部分もクリックできるようにしてユーザビリティを高めています。

text-align: center;

では、テキストを中央揃えしています。

text-decoration: none;

では、ハイパーリンクの下線を消しています。

ハイパーリンクの存在を知らせるのに下線は必要ですが、ここはメニューなので消すのが一般的です。

color:

の文字色はお好みで結構です。

.gNav li a:hover

の「a:hover」は、擬似クラスです。

疑似クラスとは「マウスカーソルがa要素に乗ったとき」のような特定の性質に適用できるセレクタです。

クリックできるメニューであるということを分かりやすく知らせています。

なお、主要な擬似クラスには次のようなものがあります。

:link	未訪問のリンク a[href] 要素のみ
:visited	訪問済みのリンク a[href] 要素のみ
:active	訪問済みのリンク
:focus	テキスト入力にフォーカスされている要素