ウェブログラム ~学習するな実践せよ~

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

このシリーズの前記事はこちら(全5記事)

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

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

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

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

ヘッダー要素の定義

まず、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で、ボックスのサイズを指定します。

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

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の使い方の練習問題で勉強しましょう!

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