ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

初心者でもわかる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レイアウトは、ヘッダー部、メイン部、フッター部の3つのボックス領域で構成されます。
これらの領域は、専用のHTMLタグが用意されています。

ヘッダー部には、サイトのタイトルや概要、ナビゲーションメニューなどを配置します。HTMLタグは、headerタグを使用します。

メイン部には、そのページの中心となるコンテンツ(メインコンテンツ)を配置します。HTMLタグは、mainタグを使用します。

フッター部には、サイトの著者情報や関連記事のリンクなどを配置します。HTMLタグは、footerタグを使用します。

ボックスとして最低限、この3つ(ヘッダー、メイン、フッター)の領域を作ることをまずは覚えておきましょう。

練習

それでは、コード上でヘッダー部、メイン部、フッター部を実装してみましょう。
ダウンロードファイルに「01_ボックスレイアウト」というフォルダがあります。その中のindex.htmlとcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。

■index.html(bodyタグ内のみ記載)

■style.css

コード解説
index.html内にheaderタグ、mainタグ、footerタグを使って、それぞれのボックス領域を確保しています。
style.cssでは、header,main,footerをセレクタで指定し、背景色を設定しています。

index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、指定した背景色でヘッダー部、メイン部、フッター部が表示されればOKです。

ブラウザでの確認結果

2.汎用的なボックス

Webサイトをレイアウトする際、自由にボックスを定義して、レイアウトを構成する必要が出てきます。
そんな時は、次に説明するdivタグを使います。

divタグ

自分でボックスを定義して配置したい場合は、ボックスにしたいコンテンツをdivタグで囲みます。

divタグ:汎用的なブロックボックスを定義するときに使う。<div> 〜</div>で囲まれた範囲を一つのブロックとしてまとめることができる。

id名、class名について

ここで、divタグでよく使うid名class名の説明をしておきます。
HTMLタグには、id名やclass名というタグ自体に好きな名前を付けることができます。

id名は、そのページで1度だけ使える名前です。一方class名は、そのページ内で何度も使える名前となります。

なぜ、id名やclass名を使うのかというと、例えば、CSSでdivタグをセレクタに指定した場合、HTMLファイルに記載したすべてのdivタグに適用されてしまいます。
従って、一部分のdivタグのみにCSSを指定したい場合などは、id名やclass名で固有の名前を付けて、CSSを指定するのです。
レイアウトを作る時、id名やclass名は結構使うので覚えておきましょう。

練習

divタグの使い方を練習してみましょう。
ダウンロードファイルに「02_汎用的ボックス」というフォルダがあります。その中のindex.htmlとcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。

■index.html

コード解説
index.html・・・divタグに「box1」というid名を付けて、汎用ボックスにしています。(9行目〜12行目)
divタグに「box2」というclass名をつけて、汎用ボックスにしています。(13行目〜16行目、21行目〜24行目)※class名は、ページ内で何度も使えるので、2箇所で「box2」を使っています。

■style.css

コード解説
style.css・・・セレクタにid名「box1」を指定して背景色を設定しています。id名の時は、先頭に#(シャープ)をつけます。(16行目〜18行目)
セレクタにclass名「box2」を指定して背景色を設定しています。class名の時は、先頭に.(ドット)をつけます。(20行目〜22行目)

index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、指定した背景色でdivのボックスが表示されればOKです。

ブラウザでの確認結果

3.マージン領域、ボーダー領域、パディング領域

ボックスには、以下のようなマージン領域、ボーダー領域、パディング領域という3つの領域があります。
これらをCSSで設定する方法を説明します。

margin

マージン領域は、ボックスの一番外側の余白のことです。
マージン領域を調整するには、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

また、margin-top,margin-right,margin-bottom,margin-leftプロパティを使って、個別にマージン値を設定することも可能です。

border

ボーダー領域は、ボックスの枠線のスタイルや太さ、色などを指定できる領域です。
ボーダースタイルを設定するには、borderプロパティを使用します。

また、上下左右異なるボーダースタイルを指定するときは、border-top,border-right,border-bottom,border-leftプロパティを使います。
線のスタイルには、solid:1本線のほか、以下のようなスタイルを指定できます。

・none:ボーダー非表示
・solid:1本線
・double:2本線
・dotted:点線
他にも色んなスタイルを指定できます。詳細は、以下のサイトを参考にしてください。
border-スタイルシートリファレンス

padding

パディング領域は、ボックスの内側の余白のことです。
パディング領域を調整するには、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

また、padding-top,padding-right,padding-bottom,padding-leftプロパティを使って、個別にマージン値を設定することも可能です。

練習

マージン領域、ボーダー領域、パディング領域の練習をしてみましょう。
ダウンロードファイルに「03_マージン_ボーダー_パディング」というフォルダがあります。その中のcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。

■style.css

コード解説
style.css(4行目〜7行目)・・・ユニバーサルセレクタを使って、全要素の余白(マージンとパディング)を0で初期化しています。
通常、デフォルトで余白(マージンとパディング)が設定されていますが、今回、margin,paddingの設定を理解するために、全て0で初期化しています。
※ユニバーサルセレクタとは、HTMLの全ての要素に適用させるセレクタのことです。

index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、設定した余白や枠線で表示されればOKです。

ブラウザでの確認結果

4.ボックスの幅と高さ設定

ボックスには、幅と高さを指定できます。

ボックスの幅は特に何も指定しない場合は、横いっぱいに広がります。また高さは、ボックス内の画像やテキストのサイズによって決まります。
ボックスの幅と高さを自分で設定するには、widthプロパティとheightプロパティを使用します。

練習

早速、CSSでボックスの幅と高さを設定してみましょう。
ダウンロードファイルに「03_ボックス幅と高さ」というフォルダがあります。その中のcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。

■style.css

index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、指定した幅と高さで表示されればOKです。

ブラウザでの確認結果

5.ボックスをブラウザの中央へ配置する方法

さて、先ほどの演習でボックスのwidth(横幅)を設定しましたが、今まで、ブラウザの中央に表示されていたボックスが、横幅を設定することで、左寄りにズレてしまったと思います。
そこで、次にボックスをブラウザの中央へ配置する方法を紹介します。
ボックスをブラウザの中央へ配置するには、marginプロパティ[左右]の値をautoに設定します。

※上下のマージンは好きな数値で構いません。

左右のマージンをautoと設定することで、左右のマージン領域が自動で設定され、中央配置になります。

練習

早速、ボックスを中央配置にしてみましょう。

ダウンロードファイルに「05_ボックス中央配置」というフォルダがあります。その中のcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。

■style.css

index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、各ボックスが中央配置になることが確認できると思います。

ブラウザでの確認結果

6.ボックスを横並びにする方法

ボックスを横並びにする時は、floatプロパティを使用します。

floatで横並びに設定した後は、必ず回り込みの解除を行う必要があります。
回り込みの解除は、clearプロパティを使います。

解除を忘れると、レイアウトが崩れてしまうので注意しましょう。
このあたりの詳細は、以下の記事で紹介していますので、参考にしてみてください。
CSS floatで要素を綺麗に整列させる2つのポイント

練習

ボックスの横並びの練習をしてみましょう。

ダウンロードファイルに「07_ボックス横並び」というフォルダがあります。その中のindex.htmlとcssフォルダ内にあるstyle.cssに以下のコードを追加してみてください。

■index.html

■style.css

コード解説
style.css(28行目〜32行目)・・・cssの疑似要素である::afterを使って、mainタグの後に、ブロックボックスの空のコンテンツを作成(29行目、30行目)し、回り込みを解除(clear:both)を指定しています。
このように、::after疑似要素を使えば、HTMLには書かれていない要素をCSS上で作成することができます。疑似要素を使った回り込み解除は結構使うので覚えておきましょう。

index.htmlをダブルクリックしてブラウザで開いてみましょう。
以下のように、box1,box2が並列に表示されればOKです。

ブラウザでの確認結果

7.演習問題

最後に、今日学んだことを復習しましょう。
ダウンロードしたフォルダの中に「07_演習問題」というフォルダがあります。以下のようなホームページが表示されるように、index.htmlとstyle.cssにコードを追加してみてください。

演習問題ホームページ完成画面

[補足]
・サイト全体の背景色は、#f5f5dcを指定します。
・ヘッダー部とフッター部の背景色は、#eee8aaを指定します。
・サイトのブロックレイアウトは以下のように設定します。
※main領域の中に3つの汎用ボックスを配置しています。コンセプトとメニューのボックスは横並びにしています。
※各ボックスの余白は、完成画面を参考に調整してみてください。

いかがでしょう?
慣れてきたら、自分で色んなレイアウトを作ってみると理解が進むと思います。
解答例は、「08_演習問題解答例」に入れていますので参考にしてみてください。

最後に

以上、ボックスでWebレイアウトの作成方法を説明しました。
少しむずかしいかもしれませんが、色々自分でレイアウトをいじると少しずつ慣れてくるかと思います。
今回の講座でWebレイアウトを深く学ぶきっかけにでもなってくれたらうれしいです。

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン