初心者でもわかるHTML&CSS講座 第4回ボックスで作るWebレイアウト
こんにちは、koheiです。
今回は、Webサイト（ホームページ）のレイアウトを作っていきたいと思います。
HTML＆CSSを学ぶ上でレイアウト作りが一番のキーポイントです。ここを理解できれば色んなサイトのレイアウトが作れるようになりますので、頑張っていきましょう！
目次
ダウンロードファイル
※以下ファイルをダウンロードしてください。
実際に手を動かしながら読み進めることができます。
動画解説
【更新情報】2018年11月11日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください！
- ボックスレイアウトについて・・・・動画：0分21秒ぐらいから
- 汎用的なボックス・・・・動画：4分22秒ぐらいから
- マージン、ボーダー、パディング・・・・動画：10分4秒ぐらいから
- ボックスの幅と高さ・・・動画：17分42秒ぐらいから
- ボックスを中央へ配置・・・動画：19分53秒ぐらいから
- ボックスを横並び・・・動画：21分31秒ぐらいから
- 演習問題・・・動画：29分59秒ぐらいから
- 演習解答例・・・動画：27分34秒ぐらいから
1.ボックスレイアウトについて
まず、具体的な説明に入る前に、Webサイト（ホームページ）は、
以下のようにWebサイト内に複数のボックス（箱）を作り、それをページ上に敷き詰めて、レイアウト構造を組み立てていきます。
基本的なボックスレイアウト（ヘッダー、メイン、フッター）
一般的な、Webレイアウトは、ヘッダー部、メイン部、フッター部の３つのボックス領域で構成されます。
これらの領域は、専用のHTMLタグが用意されています。
ヘッダー部には、サイトのタイトルや概要、ナビゲーションメニューなどを配置します。HTMLタグは、
|
1 2 3 |
<header> <p>ヘッダー部領域</p> </header> |
メイン部には、そのページの中心となるコンテンツ（メインコンテンツ）を配置します。HTMLタグは、
|
1 2 3 |
<main> <p>メイン部領域</p> </main> |
フッター部には、サイトの著者情報や関連記事のリンクなどを配置します。HTMLタグは、
|
1 2 3 |
<footer> <p>フッター部領域</p> </footer> |
ボックスとして最低限、この３つ（ヘッダー、メイン、フッター）の領域を作ることをまずは覚えておきましょう。
練習
それでは、コード上でヘッダー部、メイン部、フッター部を実装してみましょう。
ダウンロードファイルに「01_ボックスレイアウト」というフォルダがあります。その中のindex.htmlとcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。
■index.html(bodyタグ内のみ記載）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <!-- ここにページの内容を書いていく --> <header> <p>ヘッダー部領域</p> </header> <main> <p>メイン部領域</p> </main> <footer> <p>フッター部領域</p> </footer> </body> |
■style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@charset "utf-8"; header { background-color: #e2c100; } main { background-color: #a6ae24; } footer { background-color: #75c1e3; } |
index.html内にheaderタグ、mainタグ、footerタグを使って、それぞれのボックス領域を確保しています。
style.cssでは、header,main,footerをセレクタで指定し、背景色を設定しています。
index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、指定した背景色でヘッダー部、メイン部、フッター部が表示されればOKです。
ブラウザでの確認結果
2.汎用的なボックス
Webサイトをレイアウトする際、自由にボックスを定義して、レイアウトを構成する必要が出てきます。
そんな時は、次に説明する
divタグ
自分でボックスを定義して配置したい場合は、ボックスにしたいコンテンツを
id名、class名について
ここで、divタグでよく使う
HTMLタグには、id名やclass名というタグ自体に好きな名前を付けることができます。
id名は、そのページで１度だけ使える名前です。一方class名は、そのページ内で何度も使える名前となります。
なぜ、id名やclass名を使うのかというと、例えば、CSSでdivタグをセレクタに指定した場合、HTMLファイルに記載したすべてのdivタグに適用されてしまいます。
従って、一部分のdivタグのみにCSSを指定したい場合などは、id名やclass名で固有の名前を付けて、CSSを指定するのです。
レイアウトを作る時、id名やclass名は結構使うので覚えておきましょう。
練習
divタグの使い方を練習してみましょう。
ダウンロードファイルに「02_汎用的ボックス」というフォルダがあります。その中のindex.htmlとcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。
■index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<body> <!-- ここにページの内容を書いていく --> <header> <p>ヘッダー部領域</p> </header> <main> <p>メイン部領域</p> <div id="box1"> <p>汎用ボックス1領域</p> <p>idは、１ページ中に1度しか使えません。</p> </div> <div class="box2"> <p>汎用ボックス2領域</p> <p>classは、１ページ中に何度も使えます。</p> </div> </main> <footer> <p>フッター部領域</p> <div class="box2"> <p>汎用ボックス2領域</p> <p>classは、１ページ中に何度も使えます。</p> </div> </footer> </body> |
index.html・・・divタグに「box1」というid名を付けて、汎用ボックスにしています。(9行目〜12行目）
divタグに「box2」というclass名をつけて、汎用ボックスにしています。（13行目〜16行目、21行目〜24行目）※class名は、ページ内で何度も使えるので、２箇所で「box2」を使っています。
■style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@charset "utf-8"; header { background-color: #e2c100; } main { background-color: #a6ae24; } footer { background-color: #75c1e3; } #box1 { background-color: #ffff00; } .box2 { background-color: #a9f5f2; } |
style.css・・・セレクタにid名「box1」を指定して背景色を設定しています。id名の時は、先頭に#(シャープ）をつけます。（16行目〜18行目）
セレクタにclass名「box2」を指定して背景色を設定しています。class名の時は、先頭に.(ドット）をつけます。（20行目〜22行目）
index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、指定した背景色でdivのボックスが表示されればOKです。
ブラウザでの確認結果
3.マージン領域、ボーダー領域、パディング領域
ボックスには、以下のようなマージン領域、ボーダー領域、パディング領域という３つの領域があります。
これらをCSSで設定する方法を説明します。
margin
マージン領域は、ボックスの一番外側の余白のことです。
マージン領域を調整するには、
marginプロパティは、指定する値の数でマージンする位置（上下左右）が決まります。（以下表）
| 指定数 | 記載例 | 適用されるマージン値 |
| 1 | margin:10px; | [上下左右]10px |
| 2 | margin:10px 20px; | [上下]10px [左右]20px |
| 3 | margin:10px 20px 30px; | [上]10px [左右]20px [下]30px |
| 4 | margin:10px 20px 30px 40px; | [上]10px [右]20px [下]30px [左]40px |
また、
border
ボーダー領域は、ボックスの枠線のスタイルや太さ、色などを指定できる領域です。
ボーダースタイルを設定するには、
また、上下左右異なるボーダースタイルを指定するときは、
線のスタイルには、solid：１本線のほか、以下のようなスタイルを指定できます。
・none:ボーダー非表示
・solid:１本線
・double:2本線
・dotted：点線
他にも色んなスタイルを指定できます。詳細は、以下のサイトを参考にしてください。
border-スタイルシートリファレンス
padding
パディング領域は、ボックスの内側の余白のことです。
パディング領域を調整するには、
paddingプロパティは、指定する値の数でパディングする位置（上下左右）が決まります。（以下表）
| 指定数 | 記載例 | 適用されるパディング値 |
| 1 | padding:10px; | [上下左右]10px |
| 2 | padding:10px 20px; | [上下]10px [左右]20px |
| 3 | padding:10px 20px 30px; | [上]10px [左右]20px [下]30px |
| 4 | padding:10px 20px 30px 40px; | [上]10px [右]20px [下]30px [左]40px |
また、
練習
マージン領域、ボーダー領域、パディング領域の練習をしてみましょう。
ダウンロードファイルに「03_マージン_ボーダー_パディング」というフォルダがあります。その中のcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。
■style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@charset "utf-8"; /* ユニバーサルセレクタでデフォルトの余白をリセット */ * { margin: 0; padding: 0; } header { background-color: #e2c100; margin: 10px; /* 上下左右全てのマージンを10pxに設定 */ border: 1px solid #000000; /* 上下左右全てのボーダーを1pxの実線で引く */ padding: 5px; /* 上下左右全てのパディングを5pxに設定 */ } main { background-color: #a6ae24; margin-left: 50px; /* 左のマージンを50pxに設定 */ margin-right: 50px; /* 右のマージンを50pxに設定 */ border-bottom: 1px solid #000000; /* 下のボーダーを1pxの実線を引く */ padding: 20px 0 20px 0; /* 上下のパディングを20px 左右のパディングを0に設定 */ } footer { background-color: #75c1e3; margin: 30px 5px; /* 上下のマージンを30px,左右のマージンを5pxに設定 */ border: 3px dotted #000000; /* 上下左右全てのボーダーを3pxの点線で引く */ padding: 20px; /* 上下左右全てのパディングを20pxに設定 */ } |
style.css(4行目〜7行目）・・・
通常、デフォルトで余白（マージンとパディング）が設定されていますが、今回、margin,paddingの設定を理解するために、全て0で初期化しています。
※ユニバーサルセレクタとは、HTMLの全ての要素に適用させるセレクタのことです。
index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、設定した余白や枠線で表示されればOKです。
ブラウザでの確認結果
4.ボックスの幅と高さ設定
ボックスには、幅と高さを指定できます。
ボックスの幅は特に何も指定しない場合は、横いっぱいに広がります。また高さは、ボックス内の画像やテキストのサイズによって決まります。
ボックスの幅と高さを自分で設定するには、
練習
早速、CSSでボックスの幅と高さを設定してみましょう。
ダウンロードファイルに「03_ボックス幅と高さ」というフォルダがあります。その中のcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。
■style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@charset "utf-8"; /* ユニバーサルセレクタでデフォルトの余白をリセット */ * { margin: 0; padding: 0; } header { background-color: #e2c100; margin: 10px; /* 上下左右全てのマージンを10pxに設定 */ border: 1px solid #000000; /* 上下左右全てのボーダーを1pxの実線で引く */ padding: 5px; /* 上下左右全てのパディングを5pxに設定 */ width: 700px; /* ボックスの横幅を700pxに設定 */ height: 100px; /* ボックスの高さを100pxに設定 */ } main { background-color: #a6ae24; margin-left: 50px; /* 左のマージンを50pxに設定 */ margin-right: 50px; /* 右のマージンを50pxに設定 */ border-bottom: 1px solid #000000; /* 下のボーダーを1pxの実線を引く */ padding: 20px 0 20px 0; /* 上下のパディングを20px 左右のパディングを0に設定 */ width: 500px; /* ボックスの横幅を500pxに設定 */ height: 150px; /* ボックスの高さを150pxに設定 */ } footer { background-color: #75c1e3; margin: 30px 5px; /* 上下のマージンを30px,左右のマージンを5pxに設定 */ border: 3px dotted #000000; /* 上下左右全てのボーダーを3pxの点線で引く */ padding: 20px; /* 上下左右全てのパディングを20pxに設定 */ width: 650px; /* ボックスの横幅を650pxに設定 */ height: 50px; /* ボックスの高さを50pxに設定 */ } |
index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、指定した幅と高さで表示されればOKです。
ブラウザでの確認結果
5.ボックスをブラウザの中央へ配置する方法
さて、先ほどの演習でボックスのwidth（横幅）を設定しましたが、今まで、ブラウザの中央に表示されていたボックスが、横幅を設定することで、左寄りにズレてしまったと思います。
そこで、次にボックスをブラウザの中央へ配置する方法を紹介します。
ボックスをブラウザの中央へ配置するには、marginプロパティ[左右]の値をautoに設定します。
|
1 |
margin: 0 auto; /* 上下のマージンを0、左右autoに設定（中央配置） */ |
※上下のマージンは好きな数値で構いません。
左右のマージンをautoと設定することで、左右のマージン領域が自動で設定され、中央配置になります。
練習
早速、ボックスを中央配置にしてみましょう。
ダウンロードファイルに「05_ボックス中央配置」というフォルダがあります。その中のcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。
■style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@charset "utf-8"; /* ユニバーサルセレクタでデフォルトの余白をリセット */ * { margin: 0; padding: 0; } header { background-color: #e2c100; margin: 10px auto; /* 上下マージン10px 左右autoに設定（中央配置）*/ border: 1px solid #000000; /* 上下左右全てのボーダーを1pxの実線で引く */ padding: 5px; /* 上下左右全てのパディングを5pxに設定 */ width: 700px; /* ボックスの横幅を700pxに設定 */ height: 100px; /* ボックスの高さを100pxに設定 */ } main { background-color: #a6ae24; margin: 0 auto; /* 上下のマージンを0、左右autoに設定（中央配置） */ border-bottom: 1px solid #000000; /* 下のボーダーを1pxの実線を引く */ padding: 20px 0 20px 0; /* 上下のパディングを20px 左右のパディングを0に設定 */ width: 500px; /* ボックスの横幅を500pxに設定 */ height: 150px; /* ボックスの高さを150pxに設定 */ } footer { background-color: #75c1e3; margin: 30px auto; /* 上下マージン30px 左右autoに設定（中央配置）*/ border: 3px dotted #000000; /* 上下左右全てのボーダーを3pxの点線で引く */ padding: 20px; /* 上下左右全てのパディングを20pxに設定 */ width: 650px; /* ボックスの横幅を650pxに設定 */ height: 50px; /* ボックスの高さを50pxに設定 */ } |
index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、各ボックスが中央配置になることが確認できると思います。
ブラウザでの確認結果
6.ボックスを横並びにする方法
ボックスを横並びにする時は、
floatで横並びに設定した後は、必ず回り込みの解除を行う必要があります。
回り込みの解除は、
解除を忘れると、レイアウトが崩れてしまうので注意しましょう。
このあたりの詳細は、以下の記事で紹介していますので、参考にしてみてください。
CSS floatで要素を綺麗に整列させる2つのポイント
練習
ボックスの横並びの練習をしてみましょう。
ダウンロードファイルに「07_ボックス横並び」というフォルダがあります。その中のindex.htmlとcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。
■index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<body> <!-- ここにページの内容を書いていく --> <header> <p>ヘッダー部領域</p> </header> <main> <p>メイン部領域</p> <div id="box1"> <p>横並びボックス1</p> </div> <div id="box2"> <p>横並びボックス2</p> </div> </main> <footer> <p>フッター部領域</p> </footer> </body> |
■style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
@charset "utf-8"; /* ユニバーサルセレクタでデフォルトの余白をリセット */ * { margin: 0; padding: 0; } header { background-color: #e2c100; margin: 10px auto; /* 上下マージン10px 左右autoに設定（中央配置）*/ border: 1px solid #000000; /* 上下左右全てのボーダーを1pxの実線で引く */ padding: 5px; /* 上下左右全てのパディングを5pxに設定 */ width: 700px; /* ボックスの横幅を700pxに設定 */ height: 100px; /* ボックスの高さを100pxに設定 */ } main { background-color: #a6ae24; margin: 0 auto; /* 上下のマージンを0、左右autoに設定（中央配置） */ border-bottom: 1px solid #000000; /* 下のボーダーを1pxの実線を引く */ padding: 20px 0 20px 0; /* 上下のパディングを20px 左右のパディングを0に設定 */ width: 500px; /* ボックスの横幅を500pxに設定 */ /*height: 150px;*/ /* ボックスの高さを150pxに設定 */ } /* 回り込み解除 */ main::after { content: ""; display: block; clear: both; } footer { background-color: #75c1e3; margin: 30px auto; /* 上下マージン30px 左右autoに設定（中央配置）*/ border: 3px dotted #000000; /* 上下左右全てのボーダーを3pxの点線で引く */ padding: 20px; /* 上下左右全てのパディングを20pxに設定 */ width: 650px; /* ボックスの横幅を650pxに設定 */ height: 50px; /* ボックスの高さを50pxに設定 */ } #box1 { background-color: #ff8000; width: 250px; height: 120px; float: left; /* 左へ回り込み */ } #box2 { background-color: #be81f7; width: 250px; height: 120px; float: left; /* 左へ回り込み */ } |
style.css(28行目〜32行目）・・・cssの疑似要素である
このように、::after疑似要素を使えば、HTMLには書かれていない要素をCSS上で作成することができます。疑似要素を使った回り込み解除は結構使うので覚えておきましょう。
index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、box1,box2が並列に表示されればOKです。
ブラウザでの確認結果
7.演習問題
最後に、今日学んだことを復習しましょう。
ダウンロードしたフォルダの中に「07_演習問題」というフォルダがあります。以下のようなホームページが表示されるように、index.htmlとstyle.cssにコードを追加してみてください。
演習問題ホームページ完成画面
[補足]
・サイト全体の背景色は、#f5f5dcを指定します。
・ヘッダー部とフッター部の背景色は、#eee8aaを指定します。
・サイトのブロックレイアウトは以下のように設定します。
※main領域の中に３つの汎用ボックスを配置しています。コンセプトとメニューのボックスは横並びにしています。
※各ボックスの余白は、完成画面を参考に調整してみてください。
いかがでしょう？
慣れてきたら、自分で色んなレイアウトを作ってみると理解が進むと思います。
解答例は、「08_演習問題解答例」に入れていますので参考にしてみてください。
最後に
以上、ボックスでWebレイアウトの作成方法を説明しました。
少しむずかしいかもしれませんが、色々自分でレイアウトをいじると少しずつ慣れてくるかと思います。
今回の講座でWebレイアウトを深く学ぶきっかけにでもなってくれたらうれしいです。
それでは！
スポンサーリンク
