初心者向け
ホームページの
作り方講座

メニューの装飾をしましょう

containerの装飾が終わりましたので、続いてメニュー(nav)の装飾をします。

メニューの装飾をしましょう

メニューのhtmlタグを思い出してみて下さい。

主要なメニューでしたので、まず<nav>~</nav>で外枠を囲みましたね。その中に<ul>~</ul>、更に1個あたりのメニューは<li>~</li>でした。
今回のサンプルホームページはシンプルなものなので、他にnavがつくものは存在しないのですが、ホームページによってはnavを他にも使う場合があるので、今回はnavに名前を付けてあげる事にします。
<nav id="mainmenu">
にしてみます。

<div id="container">と同じです。<div>だけだと指定ができないので、id="container"という専用の名前を付けていました。

メニュー1個ごとのスタイルを設定します

メニュー1個は<nav>の中にある<ul>の中にある<li>~</li>の部分でしたよね。これをcssで表記すると、
nav ul li {
}

になります。
今回、navにmainmenuという名前を付けたので、それを追加すると、以下になります。
nav#mainmenu ul li {
}

id#と表記するのでしたよね。覚えていましたか?
ここにスタイルを設定していきましょう。まずは、現在、縦並びになっている配置を横並びに変更します。使うタグは、
float: left; です。メニューを1個ずつ、左側(left)につめて表示させるという意味になります。leftの代わりにright(右)と記載すれば、右側につめて表示できます。

プレビューで見てみます

以下のように左側につまって表示されていればOKです。

このfloat処理はクリア指定(clear:both;)というのを行わない限り解除されない為、後に続くcopyrightも左側に流し込まれていきます。

floatを解除します

上でcopyrightの表記まで左につまって表示されてしまっているのでこれを解除してあげます。
使うタグは、 clear: left; です。
文字通り、左(left)に流れ込んでいったfloat処理をクリア(clear)するという意味です。leftの代わりにrightとすると、右に流れ込んだfloat(float:right;)の解除ができます。更に、左右にfloatされたものを解除する場合は、clear: both;というタグを使います。面倒な場合は全てclear: both;を使っていてもいいと思います。
さて、この解除タグをどこに使うかというと、メニューのhtmlタグのすぐ後ろです。
メニュータグのすぐ後ろにくるのは、contentsなのでここにクリア指定をします。

<div id="contents">はcssで書くと#contentsですよね。
#contentsを作ってそこにclearの指定をしましょう。

↓自信のない人は以下タグをコピペして下さい。

改めてプレビューで見てみます

まだcontentsには何も入っていないのですが、contentsでクリア指定をしたのでその下に続いていたfooterもメニューの下に配置されました。

メニューのスタイルに戻ります

次はメニューの幅を指定します。幅は231pxにします。このままだとプレビューで見てもどれがメニュー1個あたりの幅か分からないので、背景色を余白を取ってみます。

↓手打ちに自信がない人は以下のタグをコピペして下さい。
containerで使ったタグと同じですね。
背景色はbackgroundで指定しましたが、今回のmarginという説明をしておきます。

margin: (値);

marginというのは外側に作るスペースという感じで覚えておいて下さい。外側なので色を付ける事はできません。
ちなみにpaddingは内側に作るスペースです。
borderはpaddingとmarginの間の存在となります。

今回はmargin-rightとあるので、内容の外側の右側に空けるスペースという事になります。

index.htmlをプレビューで見て、以下のようになっていればOKです。

メニュー1個あたりの背景が薄いグレー(#ccc)で、メニューの外側(右側)に1pxずつのスペースができています。
さて、ここで気づいた人もいると思いますが、メニューの冒頭と最後とでスペースに差があって見た目がちょっとNGですね。これをできるだけ均一になるよう調整します。

メニュー1個あたりの幅をもう少し増やしてみます。
適当でいいのですが、今回は246pxでいい感じでした。

左右のバランスを100%揃えておきたい人は、#containerのwidthの値から1pxずつ減らしていってメニューの左右のスペースが同じバランスになるようにしてみて下さい。ある時突然メニューが2段になりますので、その1個前の数値が100%のバランスになっているという事になります。
今回の例題だとcontainerのwidthの数値から3pxほど差し引けばちょうどのバランスになると思います。

メニューのデザインを完成させます

今回はリンクタグ<a>に対するスタイルを設定していきます。上のステップで、
nav#mainmenu ul li {
}

までは指定していたので、更にその(<li>)中の<a>タグという場合は、
nav#mainmenu ul li a {
}

になることが分かると思います。

それでは1つずつ設定を追加していきましょう。

リンクの下線を消します

リンクを設定した文字には標準で下線が入りますが、デザインの面で邪魔なので外す設定をします。テキストの装飾(text-decoration)をなくす(none)設定です。 text-decoration: none;

文字色を白にします。

メニューの土台色を濃くする予定なので、文字色を白にしておきます。白は#fffです。 color: #fff;

背景色をグラデーションで装飾します。

設定するグラデーションのスタイルは以下です。 background: linear-gradient(#726043, #564832); カッコ( )の中にカンマで区切って2つの色(#726043と#564832)を指定しています。
左がグラデーションの上の色、右がグラデーションの下の色になります。

以下のように追加できましたか?

この辺で一旦index.htmlをプレビューしてみましょう

メニューの下線が消え、文字色が白色に、背景色に茶系のグラデーションが入りましたか?

茶系のグラデーションが文字の下にしか出ていないので、その範囲をメニューボタン全体に広げる指定をします。

ブロック要素にする指定

display: block;
ちょっと説明が難しいのですが、元々<a>のタグはインライン要素といって、その部分(今回の場合は<a>タグの中にあるテキスト)にしか範囲が及ばないので、外側のブロック全体に範囲を拡大(ブロック要素にする)したい時にこれを使います。

プレビューで見て、以下のようになっていればOKです。

最初に入れていたメニューの背景色(薄いグレーの#ccc)を削除します

メニューの境界を見定める為にサンプルで入れていたものでしたので、削除しておきます。

文字をセンタリング(中央寄せ)します

現在、文字が左に寄っているので、左右中央に配置するようにします。以前、containerでmargin: 0px auto;と指定して中央に配置しましたが、今回の場合は、 text-align: center; というタグを使います。

marginとtext-alignとどちらを使えばいいか分からない場合は、とりあえず1個ずつ使ってみましょう。うまく左右中央に配置されればそのタグを使えばOK!

メニューの中の上下にもう少しスペースを作る

メニューの高さが少し狭く感じるので、文字の上下にスペースを作ります。 padding: 5px 0px; 今回、数値が2つあるので、左から「上下に5px」「左右に0px」あける設定値となります。
以下のように追加できましたか?

再びプレビュー

以下のようになっていればOKです。

カーソルがのった時に色が変わるようにしましょう

今の状態だと、メニュー上にカーソルがきても何の変化もありませんので、カーソルがのった時に色が変わるように設定してみましょう。
使うタグは、 :hover です。
今回は「リンク設定してあるメニューにカーソルがのった時」 に指定したいので、
nav#mainmenu ul li a:hover {
}

とcssに記入します。今回はグラデーションの明るい色だけ出して明るくなったようにしたいので、
background: #726043;
と記入して下さい。以下のように記載できましたか?

最後に再びプレビュー

メニューにカーソルをのせた時に色が変化すればOKです。

メニューはこれで完成です

お疲れ様でした!

次のステップは…

「メイン画像の配置」です。頑張りましょう!