【HTML CSS 独学4】 基礎を固めて高く積み上げ！　「navi編 」　投資家のFIREへの旅路 第223回

WEBサイトを構成するパーツの一つとして、「ナビ」があります。
ページのトップの部分に設置されているこいつですね。

ブログ系サイト、コーポレートサイト、ECサイトなど、どのジャンルにも必要になるパーツなので、シンプルな作り方を１つ知っておきましょう！

【navタグ】

ナビを作る時には、「navタグ」を使いましょう。
パーツに応じたタグがあるので、こちらもチェックしてみてください。

navタグを使ってこのように書きます。

HTML

     <nav class="header-navi">
       <ul>
         <li><a href="#top">TOP</a></li>
         <li><a href="#news">NEWS</a></li>
         <li><a href="#about">ABOUT</a></li>
         <li><a href="#concept">CONCEPT</a></li>
         <li><a href="#works">WORKS</a></li>
         <li><a href="#contact">CONTACT</a></li>
       </ul>
     </nav>

<nav>タグで囲んみ、
その中に、<ul>タグで囲まれた、<li>タグがいくつか入っています。
<li>タグの中には、前回解説した<a>タグが入っているので、リンクですね。
<a>タグの中には、リンク先と、リンクにするテキストが入っています。

【ulタグ】

<ul>タグとは、「unordered list」の略で、順番がないリストを意味します。
順番のあるリストは、<ol>タグで、「ordered list」の略です。
<ol>タグは順番があるので、リストに番号が振られます。

【liタグ】

<li>タグは、「list」の略ですので、そのままリストを意味します。

ナビは、このように、リストとして作成します。
これも一つの型なので、使っているうちに覚えてしまうでしょう。

【CSS 要素の横並び】 

<ul> と <li>で、リストを作ることができましたが、
このままでブラウザで表示してみると、縦並びのリストになってしまいます。

これを横並びにする必要がります！
これを簡単にやってくれるのは「flex」です！

このように書きます。
<ul>のスタイルに、display: flex;　と指定します。
これだけで、ひとまずは、縦並びであったリストが横並びになります。

SCSS

    /*ヘッダーナビ---------------------------------------------*/
   nav.header-navi {
     width: 100%;
     margin: 0 auto;
     display: block;
     background-color: orange;
     
     ul {
       display: flex;
       justify-content: center;
       
       li {
         font-size: 13px;
         padding: 1% 3%;

         a {
           text-decoration: none;
           display: inline-block;
           font-weight: bold;
           color: white;
          }
        }
      }
    }
  }

【display:flex;】

使い方を詳しく紹介します。これを知っておけば、さまざまな場面で応答ができますよ！

＜ポイント１＞　親要素の指定する
これは使い始めの時に、どこに「display:flex;」を指定すればいいのか、迷います。その都度調べて思い出すのですが、「親要素につける」　これだけ覚えておきましょう。

＜ポイント２＞　justify-contentとセットで使う
「justify-content」は、横並びにした要素の整列をしてくれるプロパティです。
要するに、勝手に綺麗に整列してくれる、いいやつです。

値が以下の種類があります。

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

これは、はっきりいって、言葉で説明を受けるより、
コードを書いて、どうなるか試した方が早いです！

こんな感じです！
要素の整列の仕方が変わります。

flex-start

flex-end

center

space-between

space-around

値を入力するだけで、バランスよく整列されます。
display:flex;　と　　justify-content 　のセットは最高の使える奴らです！！

【まとめ】

ナビの作り方を解説しました。

必ず使用するパーツなので、このやり方を基本にして
さまざまな応用デザインをしていきましょう！！

ポイントは、

navタグ
ulタグ
liタグ

display:flex
justify-content

こいつらでした！！