ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、あなたのためのページです。

13.メニューを作る

ここでは、おまけとしてHTML5とCSS3を使い、メニューを作成します。

HTMLのソースコード

なお、上記「#」はリンク先が決まっていないnullリンクと呼ばれるものです。

CSSのソースコード

.gNav

は、gNavクラスを意味しています。

list-style: none;

は、リストの先頭の・を消すという意味です。

.gNav li

は、gNavクラスの中のli要素という意味です。

li要素はブロックレベル要素なので、積み木のように最初は縦に並んでいます。

float: left;

は、li要素を左側に浮遊させ、後に続く要素が右側に回り込むようにするという意味です。

結果としてメニューが横並びになります。

しかし、ここで、子要素(li要素)を全てfloatにすると、親要素(ul要素)の高さが無くなってしまいます。

そこで

overflow: hidden;

を使い、その問題を解消します。

overflowは、領域内に収まりきらない内容をどうするかというプロパティです。

大きく分けて

visible 領域をはみ出して表示させる
hidden はみ出た部分を表示しない

の2つがあります。

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

.gNav li a { display: block;

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

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

インライン要素はブロックレベル要素と違いwidthやheightの指定できない、上下のpaddingが効かない等の欠点があるためブロックレベル要素にしました。

padding: 10px 15px;

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

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

text-align: center;

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

text-decoration: none;

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

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

color:

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

なお、色の見本はこちらのサイトも参考にしてみてください。

.gNav li a:hover

は擬似クラスと呼ばれるものでマウスカーソルがa要素に載った時にスタイルを適用するという意味です。

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

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

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

 

以上、今回は「メニューを作る方法」について学びました。

 

 

新人エンジニア向けHTML講座の一覧に戻る