ヘッダーとフッターのコーディング

本格的にWebページのコーディングを行ってきます。

レスポンシブデザインのコーディング順序は、人もしくは組織によって色々です。
スマホ幅向けの表示を完成させて、タブレット幅向けの表示～という方法もありますが、わかりやすさではパーツごとに作っていく方に軍配が上がります。本講座ではページを構成するグループごとに、それぞれの画面幅でのCSSを設定していきましょう。

• フッターを作る
• HTMLとCSSクラス
• ヘッダーを作る
• HTMLの構造を考える
• ロゴ画像のサイズを整える
• header-navのレイアウトを整える（スマホ幅）
• タブレット幅以上向けのCSSを設定
• リンク文字の文字色を設定

フッターを作る

footerはとてもシンプル。仮のデザインかもしれませんね。
すぐできそうなので、先に作ってしまいましょう。

HTMLとCSSクラス

footerタグの中に、横幅をコンテンツ幅に制限するための<div class="container">を追加。
その中に「footer」という文字を入れます。

index.html

<footer>
  <div class="container">
    footer
  </div>
</footer>

デザインで「footer」の文字は中央寄せ。
CSSのtext-align: center;で設定できます。

このtext-align: center;を使う文字や画像の中央寄せは、フッター以外の場所にもあります。
他の場所でも使えるよう、中央寄せ用の「text-center」クラスを作っておきます。

style.css

.text-center{
  text-align: center;
}

先程書いた<div class="container">に、この text-center クラスも追加します。
半角スペースで区切ると、クラスはいくつでも追加することが出来ます。

index.html

<footer>
  <div class="container text-center">
    footer
  </div>
</footer>

余白部分は新しくsection-paddingクラスを作って、CSSを書きます。
section-paddingクラスはfooter要素、その中のdiv、どちらに加えても構いません。

index.html

<footer class="section-padding">
  <div class="container text-center">
    footer
  </div>
</footer>

style.css

.section-padding{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

ヘッダーを作る

HTMLの構造を考える

ヘッダーの方は、フッターよりも複雑なレイアウトになっています。
スマホ幅、タブレット幅以上のデザインを見ながら、HTMLの構造を考えます。

下図のようにそれぞれのパーツを簡略化して捉えると、考えやすいです。

そして、パーツごとに何の要素（divタグ、navタグなど）でマークアップするかを決めていきます。
下図のようなイメージです。

実際は、こうした図を作るのではなく、HTMLに書き起こしていく形です。

index.html

<header>
    <div class="container flex-container">
        <h1 class="header-logo">
            <img src="images/logo@2x-8.png" alt="ズーロッパ東京">
        </h1>
        <nav class="header-nav">
            <ul class="flex-container">
                <li><a href="#">イベント</a></li>
                <li><a href="#">Zooloppaとは</a></li>
                <li><a href="#">お知らせ</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </div>
</header>

ナビゲーションは、クリックで別のページを開く“リンク”になるはず。
ですので、この段階から文字部分をリンクタグで囲っておきます。
<a href="#">とリンク先を「#」にしているのは、まだ指定できるリンク先がないためです。

上書き保存して、一旦ブラウザで表示を確認してみましょう。

ロゴ画像やliタグの配置以外にも、CSSが必要な箇所がありそうですね。
それぞれ整えていきましょう。

● HTMLの構造について

HTMLは後からdivの囲いを増やしたり、クラスを変更したりも出来ます。
が、囲い直したり、クラスを付け替えたりするのは面倒。コードが汚くなったり、閉じタグがズレてしまう可能性もあるので、画面幅に応じた変更で必要になりそうな部分は最初から用意しておけると良いです。

もちろん、上手くいかなかった箇所は修正すれば大丈夫。
思いつかない！という時は、とりあえずスマホ幅のデザインを作ってから考えるのもアリです。
考え込みすぎて、1行も書けないほうが問題です。表示幅による変更箇所も意識しつつ、出来るところからコーディングを進めていきましょう。

ロゴ画像のサイズを整える

imgタグで表示させたロゴ画像、大きすぎますね。
これはIllustratorで画像を書き出す際に、2x（2倍サイズ）にしたことが原因です。

ですが、1xで書き出し直す必要はありません。
iPhoneのRetinaディスプレイなど高解像度・高画素密度の場合、1xで書き出した画像だとぼやけて見えてしまいます。特に今回のように文字を画像化していると、滲んだように読みにくくなってしまう危険があります。そのまま2x画像で進めましょう。

大きいサイズで書き出した画像を、実際に使いたいサイズに設定する方法はいくつかあります。
今回はシンプルに、img要素にwidth属性・height属性を指定してみます。

<img src="images/logo@2x-8.png" width="168" height="32" alt="ズーロッパ東京ロゴ">

実際に使いたいサイズはIllustratorで確認しました。
画面上部のコントロールバー、もしくは ウィンドウ > 情報などからサイズを見ることが出来ます。

小数点以下が細かいので、小数点以下は省いてしまいましょう（四捨五入・切り捨て・切り上げどれでも可）
ちょっと縦横比が変わってしまう可能性があるので、お守りがわりのCSSを書きます。

style.css

img{
  height: auto;
  max-width: 100%;
}

CSSでheight: auto; を指定すると、画像の高さは元画像の縦横比に合わせて調整してくれます。
max-width: 100%; は「最大でも親要素の幅まで」という指定で、親要素や表示領域からの“はみ出し”予防に使います。

画像が中央に配置されるよう「text-center」クラスを追加。

index.html

<h1 class="header-logo text-center">
  <img src="images/logo@2x-8.png" width="168" height="32" alt="ズーロッパ東京ロゴ">
</h1>

サイズが合い、スマホ幅では中央に画像が配置されました。

● width属性・height属性について

今回img要素に設定した、width属性とheight属性。
読んで字のごとく、画像の横幅と高さ（縦幅）を設定することができる属性です。
記述しない場合は画像ファイルそのままのサイズで画像が挿入されます。

width属性とheight属性の記述は必須ではありません。
必要性については諸説あるものの、2020年以降頃からは「画像の読み込みが遅いときにも、画像分のスペースを確保する（レイアウトがずれないようにする）」ために書いた方が良いとの見解が多くなっています。未指定だとブラウザは画像読込み完了後に画像の幅・高さを計測→表示という段階を踏むので、指定しておくことで表示スピードの向上も期待できます。

SublimeTextやVScodeなどのエディターでは、ファイルを指定するとwidthとheightが自動挿入されるプラグインもあります。
毎回画像サイズを確認して入力は面倒…という方は使ってみると良いでしょう。

header-navのレイアウトを整える（スマホ幅）

デフォルトスタイルのリセット

HTMLのリスト要素ulとolは、デフォルトでリストマークと左paddingが設定された状態になります。

箇条書きとして使う時はあると分かりやすいですが、今回のようにメニューや横並び配置だと邪魔ですね。
ブラウザデフォルトのスタイルを打ち消すCSSを書きましょう。

style.css

.header-nav ul{
  list-style-type: none;
  padding-left: 0;
}

セレクタを半角スペースで区切ると、左の要素の子要素を指定できます。（子孫セレクタ指定）
このセレクタの場合は「header-navクラスを持つ要素の、子要素の（中に入っている）ul」にだけスタイルが適用されます。

li要素を2個ずつ配置する

ヘッダーナビゲーションのリンク部分（li要素）は、スマホ幅では2つずつ横並び。
タブレット幅以上だと4つ全て横並びになるデザインです。

ヘッダーナビゲーションで使っているflex-containerクラスは、スマホ幅でも横並びにしたいわけです。
どの幅でもflexアイテムを横並びに配置する「flex-all-row」クラスを作ります。

index.html

<ul class="flex-container flex-all-row">

CSSは、.flex-containerよりも下に書きます。
上に書くとスタイル指定が上書きされるため、横並びになりません。

style.css

.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-all-row{
  flex-direction: row;
}

２個ずつの並べるのは、liタグの幅を50%にして折り返せば良いですね。
練習も兼ねて、以下のように限定した範囲でセレクタを書いてみましょう。

スマホなので、タップしやすいようにmarginで上下間も少しあけておきます。

style.css

.header-nav ul{
  list-style-type: none;
  padding-left: 0;
}

.header-nav ul.flex-all-row li{
  width: 50%;
  margin-top: 0.5rem;
}

余白を入れる

最上部がぴったりくっついているので、少し間隔を作ります。
余白の付けかたは色々ありますが、今回はロゴ画像を囲うdivタグに付けておきます。

style.css

.header-logo{
  margin-top: 1rem;
}

これでスマホ幅の配置はできました。

タブレット幅以上向けのCSSを設定

タブレット幅以上の時の表示を整えていきます。
表示幅を広げて、現状どうなっているか見てみましょう。

まず、スマホ幅の時に指定したliタグの設定を変更します。
これをタブレット幅以上向けに、@media (min-width: 600px) { }の中で書き直します。

style.css

/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {
  .header-logo{
    margin-bottom: 0;
  }

  .header-nav ul.flex-all-row li{
    width: auto;
    margin-top: 0;
    margin-left: 2em;
  }

}

margin-leftで指定したemは、その要素の文字サイズを1とした単位です。
widthをautoにしたことで、そのままだと文字が繋がって表示されます。なので、見やすいように「２文字分、左に余白をあけてください」と指示しているイメージです。

あとは、リンク文字部分を右に寄せればOKです。

style.css - @media (min-width: 600px) { } 内

.header-nav{
    margin-left: auto;
}

リンク文字の文字色を設定

headerでの文字色を指定していますが、リンクタグ（aタグ）で囲んだところは文字色が変わっています。
下線も引かれていますね。

検証ツールで見てみると、aタグに対するブラウザデフォルトのCSSがあることがわかります。
下線は、CSSのtext-decorationプロパティによって設定されたものです。

ですので、やることは2つ。

• ページ全体で、リンク文字に入る下線を無くす
• header内では、aタグで囲っていても文字色を白にする

どちらも表示幅に関係しない、全体設定なのでCSSのメディアクエリ外に書きます。

style.css

a{
  text-decoration: none;
}

header a{
  color: #FFFFFF;
}

ここまでで、headerとfooterのコーディングは一旦完成とします。
お疲れ様でした。