SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

HTMLでリストを作る

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

HTML

<ul>
    <li><a href="#">nav01</a></li>
    <li><a href="#">nav02</a></li>
    <li><a href="#">nav03</a></li>
    <li><a href="#">nav04</a></li>
    <li><a href="#">nav05</a></li>
</ul>

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

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

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

CSS

li {
    float: left;
}

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

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

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

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;
}

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

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;(少し薄いピンク色)にします。

さいごに

以上が簡単なナビゲーションの作り方でした。
場合によっては下線を残したり、文字は太くしなくても良かったりだとかあると思いますのでそこは臨機応変に対応してみてください♪

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

くりす(マークアップエンジニア)

2017新卒マークアップエンジニアのくりすです。ハーフ関西人です。国際線の飛行機に乗ると日本人CAに100%英語で話しかけられますが、日本語しか話せません…。笑

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation