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

フレックスボックスで全体のレイアウト編

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

3カラムレイアウトとは?

3カラムレイアウトとは、下図のようにメインコンテンツ部分が3つのカラムで構成されるwebサイトのレイアウトです。有名な3カラムレイアウトのサイトには、Yahoo! JAPANのトップページなどがあります。

オーソドックスな3カラムレイアウトでは、中央のカラムにそのサイトのメインとなる記事を設置し、左右のカラムにナビゲーションや関連記事、SNS、広告(バナー)などを配置します。

今回から5記事を通して、「東京グルメ総まとめ」という架空のグルメサイトを例に、HTML/CSSで 3カラムレイアウトのwebページを作っていきましょう。

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

まずは、ヘッダーとフッターのコーディングをしましょう。以下の図のように表示されるよう、コーディングしてみてください。

※表示例では、便宜的にヘッダーとフッターに色を付けてあります。また、「header」および「footer」の文字を表示させてあります。

index.htmlのbody要素内に、ヘッダーとフッターを指定するタグを書き込みます。続いてstyle.cssで、ヘッダーとフッターが画面いっぱいになるようにレイアウトします。画面いっぱいとは、つまり幅100%です。

index.html
<body>
<header></header>
<footer></footer>
</body>
style.css
header {
width: 100%;
height: 500px;
}

footer {
width: 100%;
height: 370px;
}

メインコンテンツ

ヘッダーとフッターの間に、メインコンテンツを入れる部分をコーディングしましょう。本章では、メインコンテンツ部分にフレックスボックスを使い、全体のレイアウトを組みます。本文や写真は入れません。

※表示例では、中央の各カラムに便宜的にボーダー(枠)を付けてあります。さらに、「nav」「article」「aside」および「main contents」の文字と背景色を加えてあります。

まず、index.htmlのheader要素とfooter要素の間に、メインコンテンツの背景を置くためのdiv(class=main-contents)を作成し、style.cssで幅を100%に指定します。

次に、index.htmlのdiv(class=main-contents)の内側にもう一つdiv(class=contents-inner)を作成し、style.cssでこの横幅を960pxに指定します。

続いて、div (class= contents-inner)の中に3つのカラムを作成します。タグの指定は、カラム①をnav、カラム②をarticle、カラム③をasideとし、横幅をそれぞれ210px、450px、270pxとします。

この章のポイントは、div(class=contents-inner)をフレックスボックスの親要素に指定して、その子要素である①nav、②article、③asideを横並びにすることです。style.cssで、display: flexを指定した後、justify-content: space-between を指定して、カラム間のスペースを均等にすると良いでしょう。

※横幅960pxというのは、一般的なPCで無理なく表示できる横幅を想定しています。

index.html
/*ここから上はヘッダー*/

<div class="main-contents">
main contents
<div class="contents-inner">
<nav>nav</nav>
<article>article</article>
<aside >aside</aside>
</div>
</div>

/*ここから下はフッター*/
style.css
.main-contents {   /*ディスプレイに表示させる場合は、任意のheightとborderを設定しましょう*/
width: 100%;
}

.contents-inner { /*ディスプレイに表示させる場合は、任意のheightとborderを設定しましょう*/
width: 960px;
margin: 0 auto; /*ディスプレイ中央に表示させます*/
display: flex;
justify-content: space-between;
}

nav { /*ディスプレイに表示させる場合は、任意のborderを設定しましょう*/
width: 210px;
height: 100%;
}

article { /*ディスプレイに表示させる場合は、任意のborderを設定しましょう*/
width: 450px;
height: 100%;
}

aside { /*ディスプレイに表示させる場合は、任意のborderを設定しましょう*/
width: 270px;
height: 100%;
}

次回以降、ヘッダー、メインコンテンツおよびフッター内について、それぞれ要素を入れていきます。