初心者向けCSSナビゲーションメニューの作り方

くりす

2017.05.16

Webフロントエンド

初めまして、今年2017年4月より入社しました”くりす”です。よろしくお願いします！

GW中に喫茶店で何についての記事を投稿しようかと３時間ぐらい考えてました。笑
初投稿ということで今回は自分の復習も兼ねて、簡単なグローバルナビゲーションをCSS初心者の方にも分かるように解説していこうかと思います！

▲ナビゲーションとはこんなやつです。

これを実装するために今回は下記の３つのフェーズに分けて説明していきたいと思います。

HTMLでリンク付きのリストを作る
CSSでfloatを使い、リストの一つ一つを横並びにする
CSSで見た目をそれっぽくする

HTMLでリストを作る
- HTML
CSSでfloatを使い、リストの一つ一つを横並びにする
- CSS
CSSで見た目をそれっぽくする
- CSS
さいごに

HTMLでリストを作る

まずはHTMLでul・li・aタグを使ってリンク付きのリストを作ってみましょう♪

HTML

[sourcecode lang="html"]
&lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nav01&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nav02&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nav03&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nav04&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;nav05&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
[/sourcecode]

[sourcecode lang="html"]

<ul>

</ul>

[/sourcecode]

これでリンク付きのリストが出来上がりました！

CSSでfloatを使い、リストの一つ一つを横並びにする

では早速作った縦並びのリストを横並びにするためにCSSでfloatを使用します。横並びにさせたい要素にアプローチをかけます。今回はliタグですね！

CSS

[sourcecode lang="css"]
li {
    float: left;
}
[/sourcecode]

[sourcecode lang="css"]

li {

float: left;

}

[/sourcecode]

これは簡単ですね！
leftという値はfloatの対象を左に寄せる（詰める）的な意味です。rightを指定してあげると右寄せ（右詰め）になります！
結果が気になるって方は試しにfloat: right;も試してみてください。nav01から右詰めになるのが確認できるかと思います！

CSSで見た目をそれっぽくする

これでひとまずリストは横並びにはなりました！がー
「リストの左の●消したいんやけど」とか「リストとリストの間ギチギチやん」とか「色ないとおもんないー」とかとかって多分思うはずです。笑
あとはこれらの問題を解決していくだけです！

CSS

[sourcecode lang="css"]
ul {
    width: 1000px;
    overflow: hidden;
}

li {
    float: left;
    width: 200px;
    list-style-type: none;
}

a {
    display: block;
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    background-color: #f57;
    color: #fff;
}

a:hover {
    background-color: #f7a;
}
[/sourcecode]

[sourcecode lang="css"]

ul {

width: 1000px;

overflow: hidden;

}

li {

float: left;

width: 200px;

list-style-type: none;

}

a {

display: block;

padding: 20px 0;

text-align: center;

font-weight: bold;

text-decoration: none;

background-color: #f57;

color: #fff;

}

a:hover {

background-color: #f7a;

}

[/sourcecode]

いきなりいっぱい出てきて困惑する方もいるかもしれませんがちゃんと解説していきますのでご安心ください♪

ulへのアプローチ

まずulに横幅を指定してあげます。分かりやすく1000pxでやってみましょう！
floatの特徴として、親要素が高さを確保できなくなります。overflow: hidden;を使うことで子要素がfloatしても親要素が高さを確保することができます。

liへのアプローチ

liの数は5つあるのでliの横幅は1000pxを5で割った200pxですね！これを指定してあげるとリスト間のギチギチが解消され、等間隔に並んでくれます！
リストの左のいらん●を消してあげましょう！list-style-type: none;をliに指定してあげると●が消えてくれます♪

aへのアプローチ

aタグはインライン要素なのでdisplay: block;でブロック要素化してあげましょう！width、height、padding、marginなどが指定できるようになります。
横の間隔は取れて居ますが上下に余白が欲しいのでpadding: 20px 0;で上下に余白を持たせます。
文字を中央寄席にしたい時に使うtext-align: center;
文字を太くしたい時に使うfont-weight: bold;
aタグを使用した際についてくる文字の下線を非表示にできるtext-decoration: none;
background-colorは背景色、colorは文字色です。お好みの色でどうぞ！
:hoverとは擬似クラスの一つで、マウスカーソルが乗っている要素にスタイルを適用することができます。今回の場合aタグ上にマウスカーソルがある場合にbackground-color: #f7a;（少し薄いピンク色）にします。