それではヘッダーから作っていきましょう

デザインをパーツ分けする

まずはコードを書く前に、HTMLとCSSを書きやすくするためにパーツに分けてざっくりとHTMLの構造を書き出しましょう

それではヘッダーのデザインを見てみましょう

パーツ分けするときのポイントは、どこが同じグループになるかを考えることです

今回のヘッダーでは「左側のナビゲーションリスト」と「右側のサイトのタイトル」がそれぞれグループ化できそうです

そして、その2つをまとめたもう１つのグループができます

これをHTMLで表現すると、2つの子を持った親要素という形で書けます

<div>
  <ul></ul>
  <h1></h1>
</div>

これで骨組みができましたが、<div>はリストとサイトタイトルをグループ化しているだけで、このグループが何を意味しているのかが分かりません

リストも同じようにもっと適切な意味を持つタグがあります

Webページを作る際にはヘッダーやナビゲーションを意味するタグを使っていきましょう

<header>
  <nav>
    <ul></ul>
  </nav>
  <h1></h1>
</header>

headerタグは「Webページの導入部」で使われるタグで、navタグは「Webページ内の主要なページへのリンク集」に使われます

このように意味を持つタグを使ってマークアップすることで、googleなどの検索エンジンがWebページを正確に読みとってくれるので、SEOの面で有利になることが期待できます

また、このようにheader,navタグのような「意味を持つタグ」でマークアップすることをセマンティクスといいます
セマンティクスは最初から完全に理解する必要はないですが、HTMLの専門用語として頭の片隅においておきましょう！

HTMLを書き出す

ざっくりとしたHTMLの構造が書けたら、細かいところまでHTMLを書いていきます

まずはul要素内にli要素を書いていきましょう！

各li要素はWebサイト内のページのリンクになるので、a要素を持ちます

<ul>
  <li>
    <a href="">home</a>
  </li>
  <li>
    <a href="">about</a>
  </li>
</ul>

デザインではリストの項目は7個ありますが、最初から7個書くとコードが長くなってしまいます

リストのように同じ構造が繰り返し続く場合は、後から完成したものをコピペして必要なところだけを変更すればいいのでまずは小さく書いていきます

それからサイトタイトルも入れてひと段落です
ここまでのコードは次のようになります

<header>
    <nav>
      <ul>
        <li>
          <a href="">home</a>
        </li>
        <li>
          <a href="">about</a>
        </li>
      </ul>
    </nav>
    <h1>10min</h1>
</header>

classをつける

それではCSSでスタイリングするために各要素にclassを付けていきましょう

class名は自由に決めることができますが、自分で統一したルール（命名規則）を決めておきましょう

今回、命名規則は子要素が親要素のclass名を引き継ぐようにします
そして単語は-（ハイフン）で区切ります

  <header class="header">
    <nav class="header-nav">
      <ul class="list-header-nav">
        <li class="list-header-nav-item">
          <a href="">home</a>
        </li>
        <li class="list-header-nav-item">
          <a href="">about</a>
        </li>
      </ul>
    </nav>
    <h1 class="header-title">10min</h1>
  </header>

これでHTMLの構造と対応したclassをつけることができました

HTMLの構造とclass名を対応させることで、CSSを書くときにHTMLのどの部分をスタイリングしているのかが分かりやすくなります

flexbox

HTMLができたところでCSSを書いていくのですが、今回作るWebページではほぼ全ての配置にflexboxというものを使っていきます

なのでCSSを書く前にflexboxについて簡単に説明しておきます

これからWebページを作っていく上でflexboxの使い方に慣れていくはずなので、手を動かしながら進めていきましょう！

flexboxとは

flexboxとは簡単に要素の配置を変更できるCSSの機能です

例えばCSSでは要素を横に並べるにはいくつか方法がありますが、flexboxはいちばん少ない記述量で横並びにできます

また、中央に寄せたり、縦並びに変更したりと配置を変更するのにかなり便利な機能です

flexboxを使う

それでは実際にflexboxを使ってヘッダーの要素を配置してみましょう！

まずは縦並びになっている.header-navと.header-titleを横並びにしてみましょう

.header{
  display: flex;
}

たったこれだけの記述で.headerはflexboxとなって子要素は横並びになります

横並びの間隔を変える

子要素は親要素の左端から隙間なく横並びになってますが、この間隔を変えてみましょう

横並びの間隔を変更するにはjustify-contentプロパティを使います

このプロパティはdisplay: flexが適用されている要素に対して設定します

.header{
  display: flex;
  justify-content: space-between;
}

justify-content: space-betweenは最初と最後の子要素をぴったり両端に配置して、残りの子要素を均等な間隔で配置します

これで.header-navと.header-titleは.headerの両端に配置されました

それでは同じように.list-header-navもflexboxを使ってリストの項目を横並びにしてみましょう

.list-header-nav{
  display: flex;
  justify-content: space-between;
}

こうすると.list-heder-nav-itemは横並びになりますが、.list-header-navの幅が設定されていないので、.list-header-navの幅は子要素の幅を足し合わせたものになるため、子要素は隙間なく並んでしまいます

なので.list-header-navの幅を設定して子要素を両端に配置できるようにしましょう

.header-nav{
  width: 40%;
}

.list-header-nav{
  width: 100%;
}


/* または.list-header-navだけにwidthを指定する */
.list-header-nav{
  width: 40vw;
}

.headerの子要素は.header-navなので.header-navのwidthを%で指定することで、.header-navの幅を.headerの幅に対する割合で決めるという方法をとっています

または.list-header-navに直接幅を指定しても.header-navの幅は子要素いっぱいになります

これでヘッダーの横並びの配置が完成しました

では次に縦の配置を設定していきましょう

縦の配置の基準を変える

縦の基準がどうなっているのかを分かりやすくするために、サイトタイトルの文字サイズを変更してみます

.header-title{
  color: rgb(229, 205, 172);
  font-size: 5rem;
}

こうすると、.header-navは.headerの上端に配置されてしまいます

デザインでは.header-navと.header-titleは.headerの中央に配置されているので、flexboxのalign-itemsプロパティを使って縦の基準を揃えましょう

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

align-items: centerは子要素の縦の配置を親要素の中央に揃える設定です

これでヘッダーの縦横の配置が完成しました！

flexboxの用語

ここまでやってきたように、flexboxでの横の配置はjustify-contentを使い、縦の配置にはalign-itemsを使います

この2つの値を変えることで配置を変えていくことができるのでflexboxを使うには基本的にこの2つのプロパティを使うということを覚えておきましょう

これと合わせてflexboxの専門的な用語を解説しておきます

flexboxはこれまでやってきたようにdisplay: flexを指定する親要素と、その直下の子要素で成り立ちます

この親要素をflexコンテナ、子要素をflexアイテムと呼びます

これ以降の説明ではこの用語を使って説明していきます

ヘッダーのコード

flexboxの解説のため記述してないコードを含めたコードは次のようになります

 <header class="header">
    <nav class="header-nav">
      <ul class="list-header-nav">
        <li class="list-header-nav-item">
          <a href="">home</a>
        </li>
        <li class="list-header-nav-item">
          <a href="">about</a>
        </li>
      </ul>
    </nav>
    <h1 class="header-title">10min</h1>
  </header>

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.header-nav{
  width: 40%;
}

.list-header-nav{
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1.6rem;
}

.header-title{
  color: rgb(229, 205, 172);
  letter-spacing: .5px;
  font-size: 5rem;
  font-family: 'EB Garamond', serif;
}

.header-titleのfont-familyプロパティは後ほどフォントを導入するので、現時点ではフォントは適用されません

それではヘッダーが完成したので次の要素を作っていきましょう

HTML入門

App

contact