04Webページのレイアウト
レイアウトとは、デザイン・設計などにおいて、何を、どこに、どのように配置するかということです。Webページでは、CSSを用いてHTML要素をどこに配置するかを決めます。
なぜレイアウトが必要となるかというと、HTMLだけでは各要素が上から下に配置されていくだけで、好きな位置に配置することができないためです。そこでCSSを使用し、文字や画像などを横並びや中央揃えにすることで、HTMLの配置を変更し、レイアウトを整えます。
HTML要素を自由にレイアウトするには、HTML要素自体の大きさを変更することと、HTML要素の位置を変更することの2つができるようになる必要があります。
4-1 displayプロパティのデフォルト値の違い
まず覚えてほしいのは、各HTML要素によって displayと呼ばれるプロパティのデフォルト値が異なる ことです。
displayプロパティとは、「要素の表示形式を変更することができる」プロパティのことです。
レイアウトの前提知識となるので押さえておきましょう。
div要素は画面サイズの横いっぱいまで占領するため、複数のdiv要素を並べた場合には自動的に改行され、上から下へと縦方向に並びます。
一方、span要素を複数並べた場合は、改行されず左から右へと横方向に並びます。
では、下記の具体例を見てみましょう。
表示の上3つがdiv要素、下3つがspan要素です。わかりやすいように背景色を指定しています。
書き方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML&CSS</title>
<style>
.red{
background-color: #ff7f7f;
}
.blue{
background-color: #7fbfff;
}
.green{
background-color: #7fff7f;
}
</style>
</head>
<body>
<div class="red">div1</div>
<div class="blue">div2</div>
<div class="green">div3</div>
<span class="red">span1</span>
<span class="blue">span2</span>
<span class="green">span3</span>
</body>
</html>表示
4-1-1 blockとinline
displayプロパティに指定できる値には、いくつか種類があります。一例を以下の表に示します。
| プロパティと値 | 内容 |
| display: block; | ブロックレベル要素になる |
| display: inline; | インラインレベル要素になる |
| display: inline-block; | 要素全体はインラインレベル要素、要素内はブロックレベル要素になる |
| display: none; | 要素が画面に表示されなくなる |
| display: flex; | Flexboxモデルに従った表示になります。特に主要な値はblockとinlineの2つです。 |
| display: grid; |
gridレイアウトモデルに従った表示を行います。 |
blockの要素は、1行分の幅全体に適用されます。つまり、1つの要素が画面サイズの横いっぱいを占領するため、連続して指定した場合には自動的に改行され、上から下へと縦方向に並びます。
一方で、inlineの要素は1行のうちの一部に適用されます。そのため、連続して指定した場合には改行されず、左から右へと横方向に並びます。
display: block;がデフォルトで設定される要素には、以下のようなものがあり、ブロックレベル要素 と呼ばれます。
- h1, h2, …など見出し要素
- div
- section
- article
- p
- ul, ol
- table
display: inline;がデフォルトで設定されている要素には、以下のようなものがあり、インラインレベル要素 と呼ばれます。
- span
- a
- img
div要素をインラインレベル要素の表示に変更したい場合は、下記の具体例のように、セレクタにdisplay: inline;を指定します。
以下の例では、先ほどの例の背景色が赤（.red）と青（.blue）にだけdisplay: inline;を指定し、デフォルト値であるdisplay: block;を上書きしています。
書き方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML&CSS</title>
<style>
.red{
background-color: #ff7f7f;
}
.blue{
background-color: #7fbfff;
}
.green{
background-color: #7fff7f;
}
.display-inline{
display: inline;
}
</style>
</head>
<body>
<div class="red display-inline">div1</div>
<div class="blue display-inline">div2</div>
<div class="green">div3</div>
<span class="red">span1</span>
<span class="blue">span2</span>
<span class="green">span3</span>
</body>
</html>
表示
4-1-2 デフォルトのレイアウト
Webのレイアウトを学ぶうえで大切なのが、ブラウザ（Webページが表示される画面）の特性を理解することです。理由としては、 画面の横幅と縦幅は多様に変化し、1ページは無限に長くなる 可能性があるためです。
ブラウザの大きさを変更すると、1画面に収まる情報量を変えることができます。また、1ページにコンテンツを大量に載せることで、どこまでもページを長くすることもできます。サイズが固定されている書籍や雑誌、新聞などに対し、1画面に収まる情報量を変化させられることがブラウザの特徴です。
そのため、ブラウザは 画面の左上を起点として上から下、左から右へと、HTML要素を詰めるように並べていくようにデフォルトでレイアウトされています。
displayプロパティの説明で例に挙げた、div要素とspan要素の並びを確認してみましょう。 ブロックレベル要素（display: block;）であるdiv要素は上から下へ、 インライン要素（display: inline;）であるspan要素は左から右へ並んでいることが分かります。
4-2 ボックスモデル
displayプロパティを理解したところで、レイアウトについて学んでいきましょう。
ここでは ボックスモデル について解説します。ボックスモデルはWebページのレイアウトを考えるうえでとても重要な概念なので、何度も読み直してしっかり理解しましょう。
ボックスモデルを理解することで
- HTML要素自体の大きさの変更 (
padding , width , heightを使う） - HTML要素の位置の変更（
display: block;
をどちらも、ある程度できるようになります。padding, marginなどは、後ほど解説します。
ボックスモデルとは？
ボックスモデルの「ボックス」とは、HTMLの各要素に割り当てられている 四角い領域 のことです。
HTML要素にはdivやspan , p , h1など様々な要素がありますが、それらのHTML要素すべてがボックスという四角い領域として存在しています。
ボックスには下記の4つの領域があります。この4つの領域それぞれに、指定された値（もしくはデフォルト値）が与えられ四角い領域として表示されます。
- margin（要素の外側の余白）
- border（境界線）
- padding（要素の内側の余白）
- content area（コンテンツエリア） →width（幅）、height（高さ）
4-3 余白と境界線
下記は、div要素である.boxに対して、余白と境界線を指定しています。
書き方
.box {
margin: 50px;
border: 5px solid blue;
padding: 50px;
background-color: silver
}
表示
例として挙げたCSSを解説します。
margin: 50px; によって上下左右の外側の余白を 50px ずつとっています。
border: 5px solid blue; によって境界線の太さを 5px、境界線の種類を solid（実線のほかに破線なども指定可）、境界線の色を blueにしています。
padding: 50px; によって上下左右の内側の余白を 50px ずつとっています。
わかりやすくするため background-color プロパティを指定しました。background 系のプロパティはpadding（内側の余白）にまで影響するため、paddingとcontent areaを含めた領域が silver になっています。
div要素である.boxのcontent areaが横いっぱいに拡がっているのは、前節で説明したとおり、div要素が display: block; としてデフォルト表示されるブロックレベル要素であるためです。
解説
グレーの破線は、外側の境界線を表しています。
また、オレンジの塗りつぶしはcontent areaを表しています。
4-4 コンテンツの幅と高さ
さらにcontent areaのサイズを指定するために、width と height を指定してみましょう。
下記のdiv要素の背景領域のサイズはpadding + content areaであるため、縦の長さの合計は50px(padding-top) + 100px(height) + 50px(padding-bottom) = 200px となります。横の長さの合計も同じく、50px(padding-left) + 100px(width) + 50px(padding-right) = 200px となります。
-topや-botoom、-leftや-rightについては次の章で説明します。
書き方
.box {
margin: 50px;
border: 5px solid blue;
padding: 50px;
width: 100px;
height: 100px;
background-color: silver;
}表示
解説
グレーの破線は、外側の境界線を表しています。
また、オレンジの塗りつぶしはcontent areaを表しています。
4-5 接尾辞をつけて個別に指定する
続いて、margin や border, padding のサイズの指定方法を見てみましょう。
margin や border, padding のサイズは、上下左右を個別に指定することができます。各領域名に対して、上・下・左・右の意味をもつ -top, -bottom, -left, -right を追加することで個別に指定が可能です。
例：margin-top: 50px;（外側の上の余白を50pxにする）
解説
4-6 一度に上下左右を指定する
ほかにも、marginとpaddingは、padding: 10px 20px 30px 40px;のように一気に上下左右を決めることができます。このときの順番は上下左右ではなく、padding: 上 右 下 左; と上から時計回り の順番になります。
接尾辞をつけて個別に指定する方法と一度に上下左右を指定する方法は、どちらの書き方もよく使用されるので覚えておきましょう。
一度に上下左右を指定する場合、必ず値を4つ用意する必要はありません。
以下の表のように、値の数が3つの場合には「上」「下」の指定が優先され、「左」と「右」に同じ値が指定されます。ほかの指定方法も確認しておきましょう。
| 値の数 | 形式 | 使用例と意味 |
| 4つ | margin: 上 右 下 左; | margin: 10px 20px 30px 40px; （上：10px, 右：20px, 下：30px, 左：40px） |
3つ | margin: 上 左 右 下; | margin: 10px 20px 30px; （上：10px, 右：20px, 下：30px, 左：20px） |
| 2つ | margin: 上 下 左 右; | margin: 10px 20px; （上：10px, 右：20px, 下：10px, 左：20px） |
| 1つ | margin: 上 下 左 右; | margin: 10px; （上：10px, 右：10px, 下：10px, 左：10px） |
4-7 divの中のdivのレイアウト
div要素の.boxの中にさらにdiv要素の.box-innerを入れた場合、親にあたる.boxのcontent area（width、height）を基点として、子の.box-innerの位置が決定されます。次の具体例のmarginに着目してください。
書き方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS</title>
<style>
.box {
margin: 50px;
border: 5px solid blue;
width: 300px;
height: 300px;
background-color: skyblue;
}
.box-inner {
margin: 70px;
border: 3px solid green;
padding: 20px;
width: 100px;
height: 100px;
background-color: lime;
}
</style>
</head>
<body>
<div class="box">
<div class="box-inner">
内側のbox
</div>
</div>
</body>
</html>
表示
解説
グレーの破線は、外側の境界線を表しています。
解説の図からわかるように、内側のboxのmarginは外側のboxのborderから70pxの幅が取られています。
4-8 Flexboxモデル（2カラムレイアウト）
Webページ全体のレイアウトとして、縦に並べたり横に並べたりする方法を学びましょう。この章では、HTML要素の横並びを学びます。
セクションのタイトルである「2カラムレイアウト」とは、メインコンテンツとサイドバーなど、横並びの2つの区分けを持つレイアウトのことを言います。カラムとは列のことで、2列に並べられたレイアウトを意味します。
なお、下の例では、親要素として2列に並ぶメインとサイドバーを囲むdiv要素（wrapper）を用意しました。
要素の幅を調整する
ブロックレベル要素をそのまま並べるだけでは、各ブロックの幅がブラウザ幅いっぱいになってしまうため、「横並びレイアウト」が実現しません。ボックスを横へ並べるためには、widthプロパティを使用して、幅を縮めることが必要です。
今回はブラウザ幅全体 (100%)に対し、メインを width: 50%; に、サイドバーを width: 30%; にします。
書き方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS</title>
<style>
header {
height: 50px;
background-color: #b2d8ff;
}
#wrapper {
height: 100px;
}
#main {
width: 50%;
background-color: #bfff7f;
}
aside {
width: 30%;
background-color: #ffbf7f;
}
footer {
height: 50px;
background-color: #b2b2ff;
}
</style>
</head>
<body>
<header>
ヘッダー
</header>
<div id="wrapper">
<div id="main">
メイン
</div>
<aside>
サイドバー
</aside>
</div>
<footer>
フッター
</footer>
</body>
</html>
表示
解説
続いて、メインコンテンツとサイドバーを2カラムにします。今回はメインを左、サイドバーを右に配置することにします。2カラムレイアウトは display: flex; を使用することで実現できます。
下の例では、先ほどの例のメインとサイドバーの親要素である #wrapper に display: flex; のCSSを追記しています。
追記部分のCSS
#wrapper {
height: 100px;
display: flex;
}
表示
解説
メインとサイドバーのどちらも、高さが親要素 #wrapper と一緒になり、さらに #wrapper の要素の中で横並びになりました。また、HTML内で先に記述したメインが左側、後に記述したサイドバーが右側に配置されています。このように、display: flex; を使用して、ボックスを横並びにする手法が Flexboxモデル です。比較的最近のブラウザ（Chrome, Firefox, Edgeなど）で対応しています。
配置場所の調整に使用するのが、justify-content プロパティです。今回はメインを左端、サイドバーを右端に配置したいので、display: flex; の下に justify-content: space-between; と追記します。
追記したCSS
#wrapper {
height: 100px;
display: flex;
justify-content: space-between;
}
表示
幅 50% のメイン、幅 20% の空白、幅 30% のサイドバーの順で並ぶデザインを作ることができました。
justify-content プロパティの代表的な値は以下の5種類です。
デザインに応じて使い分けましょう。
| プロパティと値 | 内容 |
| justify-content: flex-start; | すべての要素が左寄せになる（要素間の余白なし） |
| justify-content: flex-end; | すべての要素が右寄せになる（要素間の余白なし） |
| justify-content: center; | すべての要素が中央寄せになる（要素間の余白なし） |
| justify-content: space-between; | 最初は左端、最後は右端、要素間の余白は均等に配置される |
| justify-content: space-around; | すべての要素の位置と要素間の余白が均等になる |
4-9 メニューボタンなどのHTML要素を横に並べる
Webサイトには、グローバルナビゲーションと呼ばれる全ページに共通で表示されるサイトの主要ページへのリンクが表示されています。これらの多くは横並びに表示されています。このような横並びのボタンを作るための方法として display: inline-block; を紹介します。
先ほどのように display: flex; によって横に並べることも可能ですが、ボタンぐらいの小さなものであれば display: inline-block; を用いた方が簡単で便利です。
HTML5で追加されたinline-blockという表示形式は、ブロックレベル要素とインライン要素の中間のような振る舞いをします。ブロックレベル要素のように高さと幅を持ちつつ、インライン要素のように左から右へ並んでいきます。
まずは下のコードを見てみましょう。この段階ではただのリストです。 li はブロックレベル要素なので、横幅は画面いっぱいまで広がり、1つ1つ縦に並んでいます。
書き方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS</title>
</head>
<body>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">HTML&CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Laravel</a></li>
</ul>
</nav>
</body>
</html>
</body>
</html>
表示
画面いっぱいに横幅が広がっているかは、背景を入れると分かりやすいです。
背景色をつけた場合の表示
横並びにするために、li要素に対して display: inline-block;を指定します。
書き方
nav ul li {
display: inline-block;
}表示
また、flexboxを使うとさらに簡単に横並びにすることができます。
書き方
nav ul li {
display: flex;
justify-content: space-around;
}表示
コメントを残す