フレックスボックスでのヘッダーのコーディング

TOP
フレックスボックスで作る3カラムレイアウト
フレックスボックスでのヘッダーのコーディング

2020/04/12

本章では、ヘッダー部分のコーディングをします。

タイトル文字の装飾は最後の章で行いますので、文字色はデフォルトのままでかまいません。

また、今回は、実際に文字サイズを変える機能や使用言語を変更する機能、検索機能は付けません。あくまで、構図通りにコーディングすることが目的です。

ヘッダーにはナビゲーションやプルダウンメニューなど、要素が盛りだくさんです。この記事を難しく感じたら、ナビゲーションやメニューバーのみを扱った練習問題や、ヘッダーの作り方の記事を読んで徐々に慣れていきましょう！

ヘッダー要素の定義

まず、index.htmlにおいて、ヘッダー全体をheaderタグで囲います。

次に、index.htmlのheader要素内に、テキストエリアとなるdiv（class=header-textarea）および写真エリアとなるdiv（class=header-picturearea）を作成します。写真エリアの背景には、「imgフォルダ」に用意された画像を指定しましょう。

index.html
<header>
  <div class="header-textarea"></div>
  <div class="header-picturearea"></div>
</header>

style.css
header {
  width: 100%;
  height: 500px;
}

/*#######テキストエリア#######*/
.header-textarea {
  width: 100%;
  height: 150px;
  background-color: #fff;
}

/*#######写真エリア#######*/
.header-picturearea {
  width: 100%;
  height: 350px;
  background-image: url(img/header-background.png);
}

テキストエリアの編集準備

テキストエリアとなるdiv（class=header-textarea）内に、ウェブサイトのタイトルとナビゲーションを入れるためのスペースを作成していきます。

まず、タイトルを入れるためのdiv（class=titlebox）とナビゲーションを入れるためのdiv（class=navibox）を用意します。そして、これら2つのボックスをdiv（class=header-textarea-inner）で囲い、この新たなdivをフレックスボックスの親要素に指定します。そうすることで、子要素であるdiv（class=titlebox）とdiv（class=navibox）は横並びに表示されます。

※各ボックスを表示させるためには、style.cssで、任意の横幅とボーダー（border: solid 1px blackなど）を指定してください。

index.html
/*headerタグ内*/
<div class="header-textarea"> 
  <div class="header-textarea-inner">  
    <div class="titlebox"></div>
    <div class="navibox"></div>
  </div>
</div>

syle.css
.header-textarea-inner {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.titlebox {
  width: 450px;    /*任意*/
  height: 110px;
  margin-top: 40px;
}

.navibox {
  width: 400px;   /*任意*/
  height: 110px;
  margin-top: 40px;
  text-align: right;
}

テキストエリアの編集

では、ウェブサイトのタイトルやナビゲーションなどの文字を入力していきます。

タイトルボックスのdiv（class=titlebox）内に、h1要素およびp要素を追加して、ウェブサイトのタイトルおよびサブタイトルを書き込みます。なお、文字のスタイルに関するstyle.cssは省略しますので、コードをダウンロードしてご確認ください。

index.html
<div class="titlebox">
  <h1>東京グルメ総まとめ</h1>
  <p>お探しのお店がきっと見つかる飲食まとめサイト</p>
</div>

次に、ナビボックスの上段に文字サイズおよび使用言語の選択肢を、下段にナビゲーションを設置します。

ここでは、プルダウンメニューや、リスト要素を使ったナビゲーションメニューを作っています。書き方がイメージできない場合は、それぞれの解説記事や練習問題を解いて慣れていきましょう！

本記事では、詳しいコードは割愛します。コードをダウンロードしてご確認ください。

写真エリアの編集

ここでは、写真エリアdiv（class= header-picturearea）に3枚の写真を横並びにするためのコーディングを行います。

まず、index.htmlで写真を入れるためのボックスを3つ用意しますdiv（class=picturebox　クラス名は3つとも同じ）。そしてstyle.cssで、ボックスのサイズを指定します。

次に、上記３つのボックスを囲うdiv（class=header-picturearea-inner）を用意し、これをフレックスボックスの親要素に指定します。このとき、justify-contentを使って、３つのボックスが等間隔に配置されるように指定しましょう。

index.html
/*写真エリア内*/
<div class="header-picturearea-inner">
  <div class="picturebox"></div>
  <div class="picturebox"></div>
  <div class="picturebox"></div>
</div>

style.css
.header-picturearea-inner {
  width: 960px;
  height: 270px;
  display: flex;
  justify-content: space-between;
  border: solid 1px black;
}

.picturebox {
  width: 315px;
  height: 270px;
  border: solid 1px black;
}

さらに、div（class=header-picturearea-inner）の親要素であるdiv（class=header-picturearea）に対して、フレックスボックスを指定した後、justify-contentとalign-itemsを使って、div（class=picturearea-inner）を中央に配置します。

最後に、div（class=picturebox）のタグ内にimgタグを入れ、表示したい写真を指定します。

index.html
<div class="header-picturearea">
  <div class="header-picturearea-inner">
    <div class="picturebox"><img src="img/top-1.jpg" alt=""></div>
    <div class="picturebox"><img src="img/top-2.jpg" alt=""></div>
    <div class="picturebox"><img src="img/top-3.jpg" alt=""></div>
   </div>
</div>

style.css
.header-picturearea {
  width: 100%;
  height: 350px
  display: flex;               /*この部分を新たに記載 */
  justify-content: center;     /*この部分を新たに記載 */
  align-items: center;         /*この部分を新たに記載 */
  background-image: url(img/header-background.png);
}

img {
  width: 100%;
  height: 100%;
}

※写真の説明文の入れ方と文字装飾は、この記事では割愛します。完成図通りにコーディングするのが難しい場合は、positionの使い方の練習問題で勉強しましょう！

仕上げに、便宜的に表示してあった各ボックスのボーダーを、消去または非表示にして完成です。

2020/04/12