HTML-CSS 入門講座

HTML-CSS 入門講座

Lesson-4
CSS でレイアウトを作りましょう

目次

L4.1 はじめに

L4.1.1 概要

  • CSS の中でレイアウトを設定するプロパティは、以下の分類があります。
    • レイアウト系プロパティ
    • ボーダー系プロパティ
    • パディング系プロパティ
    • マージン系プロパティ
    • レイアウト関連その他のプロパティ

L4.2 レイアウト系プロパティ

L4.2.1 width プロパティ(内容の幅)

width: 内容の幅;

要素の内容の幅を指定します。幅は、box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定します。初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用されます。

L4.2.2 max-width プロパティ(幅の最大値)

max-width: 幅の最大値;

幅の最大値を指定します。width プロパティの値に関わらず本値以上の幅にはなりません。初期値は「none」です。

L4.2.3 min-width プロパティ(幅の最小値)

min-width: 幅の最小値;

幅の最小値を指定します。width プロパティの値に関わらず本値以下の幅にはなりません。初期値は「auto」です。

L4.2.4 height プロパティ(内容の高さ)

height: 内容の高さ;

要素の内容の高さを指定します。高さは、box-sizing プロパティの値に content-box が指定されていると「content」の幅を指定し、border-box が指定されていると「content + padding + border」の合計値を指定します。初期値は「auto」でボックスモデルの表示ルールの初期サイズが採用されます。

L4.2.5 max-height プロパティ(高さの最大値)

max-height: 高さの最大値;

高さの最大値を指定します。height プロパティの値に関わらず本値以上の高さにはなりません。初期値は「auto」です。

L4.2.6 min-heightプロパティ(高さの最小値)

min-height: 高さの最小値;

高さの最小値を指定します。width プロパティの値に関わらず本値以下の高さにはなりません。初期値は「auto」です。

L4.2.7 float プロパティ(回り込み)

float: 回り込みの方向;

要素の回り込みを指定します。

(回り込みの方向)は以下の値で指定します。

left
指定した要素を左に寄せます。
right
指定した要素を右に寄せます。
none(初期値)
特に配置を指定しません。

float プロパティを使用した場合は、回り込みの解除を指定する必要があります。回り込みの解除は、以下の方法で指定することができます。

  1. clear: both; プロパティを使用

    float を指定した要素の次の要素に「clear: both;」プロパティを指定します。float が連続している場合は、一番最後の float 要素の次の要素に指定します。本指定方法は、float が指定されている要素に続く要素が存在する場合に指定可能です。

    HTML

    
    <div>
    	<p class="float-left red">項目1</p>
    	<p class="float-left green">項目2</p>
    	<p class="float-left blue">項目3</p>
    	<p class="clear"></p>
    </div>
    

    CSS

    
    .float-left {
    	width: 100px;
    	float: left;
    	color: white;
    	text-align: center;
    }
    .red {
    	background: red;
    }
    .green {
    	background: green;
    }
    .blue {
    	background: blue;
    }
    .clear {
    	clear: both;
    }
    

    【表示形式】

    項目1

    項目2

    項目3

  2. clear: both; プロパティを使用(after 疑似要素を使用)

    float を指定した要素の親要素に after 疑似要素を使用した「clear: both;」プロパティを指定します。本指定方法は、after 疑似要素を使用することで後続する clear プロパティを指定する要素が存在しない場合でも使用可能です。一般的には、「clearfix」という名称のクラス名を使って以下のスタイルを定義します。この clearfix クラスの定義は、リセット CSS に定義しておくと良いでしょう。

    HTML

    
    <div class="clearfix">
    	<p class="float-left red">項目1</p>
    	<p class="float-left green">項目2</p>
    	<p class="float-left blue">項目3</p>
    </div>
    

    CSS

    
    .float-left {
    	width: 100px;
    	float: left;
    	color: white;
    	text-align: center;
    }
    .red {
    	background: red;
    }
    .green {
    	background: green;
    }
    .blue {
    	background: blue;
    }
    .clearfix::after {
    	content: "";
    	display: block;
    	clear: both;
    }
    

    【表示形式】

    項目1

    項目2

    項目3

  3. 親要素に overflow: hidden; プロパティを使用

    float を指定した要素の親要素に「overflow: hidden;」を指定します。

    HTML

    
    <div class="perent">
    	<p class="float-left red">項目1</p>
    	<p class="float-left green">項目2</p>
    	<p class="float-left blue">項目3</p>
    </div>
    

    CSS

    
    .perent {
    	overflow: hidden;
    }
    .float-left {
    	width: 100px;
    	float: left;
    	color: white;
    	text-align: center;
    }
    .red {
    	background: red;
    }
    .green {
    	background: green;
    }
    .blue {
    	background: blue;
    }
    

    【表示形式】

    項目1

    項目2

    項目3

L4.2.8 clear プロパティ(回り込みを解除)

clear: 解除の方向;

回り込みの解除を指定します。

(解除の方向)は以下の値で指定します。

left
左方向の回り込みを解除します。
right
右方向の回り込みを解除します。
both
左右の回り込みを解除します。(通常は、本値を使用します)
none(初期値)
回り込みの解除を行いません。

L4.2.9 position/top/left/bottom/right/z-index プロパティ(要素の配置方法)


position: 配置方法;
top: 上からの位置;
bottom: 下からの位置;
left: 左からの位置;
right: 右からの位置;
z-index: 重なりの順序;

要素の配置方法を指定します。

(配置方法)は以下の値で指定します。

static(初期値)
通常の配置を行います。この値のときには、top/bottom/left/right プロパティは、適用されません。
relative
相対位置への配置となります。position プロパティで static を指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親要素に position プロパティの static 以外の値が指定されている場合は、親要素の左上が基準位置となります。親要素に position プロパティの static 以外の値が指定されていない場合は、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのは、absolute と同じですがスクロールしても位置が固定されたままとなります。

(上/下/左/右からの位置)は、position プロパティと併用して配置の基準位置を正の値または負の値で指定します。初期値は「auto」です。

(重なりの順序)は、ボックスの重なり順序を数値で指定します。数値が大きいほど前面(上)に表示されます。初期値は「auto」です。position プロパティを指定していないか、position プロパティに static が指定されている時は、重なりの順序は適用されません。

position プロパティの使用例を以下の示します。使用する形態に合わせて使い分けてください。

  1. 元の表示位置からの相対位置に配置

    元の表示位置(「position: static;(初期値)」プロパティで表示される位置)からの相対位置に配置する場合は、「position: relative;」プロパティを指定して top/bottom/left/right プロパティで配置する相対位置を指定します。

  2. 親要素からの相対位置に配置

    親要素からの相対位置に配置する場合は、親要素に「position: relative;」プロパティを指定して自要素に「position: absolute;」プロパティを指定します。相対位置は、top/bottom/left/right プロパティで配置する位置を指定します。本指定の場合は、親要素の横幅が継承されません。

  3. ページ全体からの相対位置に配置

    ページ全体からの相対位置に配置する場合は、親要素に position プロパティを指定しないで自要素に「position: absolute;」プロパティを指定します。相対位置は、top/bottom/left/right プロパティで配置する位置を指定します。本指定の場合は、親要素の横幅が継承されません。

  4. 画面(ウィンドウ)上の固定位置に配置

    画面上の固定位置に配置する場合は、「position: fixed;」プロパティを指定して top/bottom/left/right プロパティで配置する位置を指定します。本指定を行うと画面をスクロールしても表示位置は変化しません。本指定の場合は、親要素の横幅が継承されません。

positionの例1
positionの例2

L4.2.10 display プロパティ(要素の表示方法)

display: 要素の表示方法;

要素の表示方法を指定します。初期値はボックスモデルの表示ルールが採用されます。

要素の表示方法は、以下の値で指定します。

block
ブロック属性(p,div,ul,h1~h6 タグなどの初期値)を指定します。
inline
インライン属性(a,strong,span タグなどの初期値)を指定します。
inline-block
インラインブロック属性(img タグなどの初期値)を指定します。
none
非表示の属性を指定します。
flex
block 属性の Flex コンテナを指定します。フレックスボックスの使用法については「Lesson-8 フレックスレイアウトを活用しましょう」を参照してください。
inline-flex
inline-block 属性の Flex コンテナを指定します。フレックスボックスの使用法については「Lesson-8 フレックスレイアウトを活用しましょう」を参照してください。
grid
block 属性の Grid コンテナを指定します。グリッドレイアウトの使用法については「Lesson-9 グリッドレイアウトを活用しましょう」を参照してください。
inline-grid
inline-block 属性の Grid コンテナを指定します。グリッドレイアウトの使用法については「Lesson-9 グリッドレイアウトを活用しましょう」を参照してください。

L4.2.11 overflow プロパティ(ボックスからあふれた内容の処理方法)

overflow: ボックスからあふれた内容の処理方法;

ボックスからあふれた内容の処理方法を指定します。

ボックスからあふれた内容の処理方法は、以下の値で指定します。

visible(初期値)
内容がボックスに収まらない場合は、ボックスからはみ出して表示されます。
hidden
内容がボックスに収まらない場合は、はみだした部分は非表示になります。
本指定は、float プロパティで指定された回り込み指定を続く要素に影響を与えない効果(clear プロパティと同等)として使用することができます。
scroll
スクロールバーを使って全体を参照できるようにします。
auto
内容がボックスに収まらない時だけスクロールバーを表示して全体を参照できるようにします。

overflow プロパティを使用例を以下示します。

  1. overflow: visible;

    overflow: visible;
    あいうえお
    かきくけこ
    さしすせそ
    たちつてと
    なにぬねの
    はひふへほ
    まみむめも

  2. overflow: hidden;

    overflow: hidden;
    あいうえお
    かきくけこ
    さしすせそ
    たちつてと
    なにぬねの
    はひふへほ
    まみむめも

  3. overflow: scroll;

    overflow: scroll;
    あいうえお
    かきくけこ
    さしすせそ
    たちつてと
    なにぬねの
    はひふへほ
    まみむめも

  4. overflow: auto;

    overflow: auto;
    あいうえお
    かきくけこ
    さしすせそ
    たちつてと
    なにぬねの
    はひふへほ
    まみむめも

4.3 ボーダー系プロパティ

L4.3.1 border-style プロパティ(ボーダースタイル)

border-style: ボーダーのスタイル;

ボーダーのスタイルを指定します。

(ボーダーのスタイル)は、以下の値を指定します。

none(初期値)
ボーダーは、表示されず太さも 0 になります。他のボーダーと重なる場合は、他の値が優先されます。
hidden
ボーダーは、表示されず太さも 0 になります。他のボーダーと重なる場合は、hidden の値が優先されます。
solid
ボーダーを 1 本線で表示します。
double
ボーダーを 2 本線で表示します。
dashed
ボーダーを破線で表示します。
dotted
ボーダーを点線で表示します。

(ボーダーのスタイル)は、複数指定でき指定した個数により対象位置が異なります。

1 つ指定
「上下左右」のすべての指定になります。
2 つ指定
「上下」と「左右」の順で指定します。
3 つ指定
「上」と「左右」と「下」の順で指定します。
4 つ指定
「上」と「右」と「下」と「左」の順で指定します。

L4.3.2 border-color プロパティ(ボーダー色)

border-color: ボーダーの色;

ボーダーの色を指定します。

ボーダーの色に transparent を指定すると透明になります。

ボーダーのスタイルは、複数指定でき指定した個数により対象位置が異なります。

1 つ指定
「上下左右」のすべての指定になります。
2 つ指定
「上下」と「左右」の順で指定します。
3 つ指定
「上」と「左右」と「下」の順で指定します。
4 つ指定
「上」と「右」と「下」と「左」の順で指定します。

L4.3.3 border-width プロパティ(ボーダー幅)

border-width: ボーダーの幅;

ボーダーの幅を指定します。

ボーダーの幅は、複数指定でき指定した個数により対象位置が異なります。

1つ指定
「上下左右」のすべての指定になります。
2つ指定
「上下」と「左右」の順で指定します。
3つ指定
「上」と「左右」と「下」の順で指定します。
4つ指定
「上」と「右」と「下」と「左」の順で指定します。

L4.3.4 border プロパティ(ボーダー一括指定)

border: ボーダー一括指定;

ボーダーのスタイル・色・幅を一括して指定(ショートハンド)します。

スタイル・色・幅の指定は、任意の順序でスペースで区切って指定します。

本指定では上下左右を別々に指定することはできません。

border プロパティを使用例を以下示します。

  1. border: 1px #000 solid;

    border: 1px #000 solid;

  2. border: 2px #000 solid;

    border: 2px #000 solid;

  3. border: 3px #000 solid;

    border: 3px #000 solid;

  4. border: 4px #000 solid;

    border: 4px #000 solid;

  5. border: 4px #000 double;

    border: 4px #000 double;

  6. border: 2px #000 dashed;

    border: 2px #000 dashed;

  7. border: 2px #000 dotted;

    border: 2px #000 dotted;

  8. border: 2px #f00 solid;

    border: 2px #f00 solid;

  9. border: 2px #0f0 solid;

    border: 2px #0f0 solid;

  10. border: 2px #00f solid;

    border: 2px #00f solid;

L4.3.5 border-top/-bottom/-left/-right プロパティ(ボーダー上下左右一括指定)


border-top: 上のボーダー一括指定;
border-bottom: 下のボーダー一括指定;
border-left: 左のボーダー一括指定;
border-right: 右のボーダー一括指定;

上下左右のボーダーのスタイル・色・幅を一括して指定(ショートハンド)します。

スタイル・色・幅の指定は、任意の順序でスペースで区切って指定します。

本指定のプロパティ名の後ろに「-style」、「-color」、「-width」を付与することでスタイル、色、幅を個別に指定することができます。

L4.4 パディング系プロパティ

L4.4.1 padding-top/-bottom/-left/-right プロパティ(パディング上下左右)


padding-top: 上のパディング幅;
padding-bottom: 下のパディング幅;
padding-left: 左のパディング幅;
padding-right: 右のパディング幅;

上下左右のパディングの幅を指定します。

L4.4.2 padding プロパティ(パディング一括指定)

padding: パディング幅;

パディングの幅を指定します。

パディング幅は、複数指定でき指定した個数により対象位置が異なります。

1つ指定
「上下左右」のすべての指定になります。
2つ指定
「上下」と「左右」の順で指定します。
3つ指定
「上」と「左右」と「下」の順で指定します。
4つ指定
「上」と「右」と「下」と「左」の順で指定します。

L4.5 マージン系プロパティ

L4.5.1 margin-top/-bottom/-left/-right プロパティ(マージン上下左右)


margin-top: 上のマージン幅;
margin-bottom: 下のマージン幅;
margin-left: 左のマージン幅;
margin-right: 右のマージン幅;

上下左右のマージンの幅を指定します。

L4.5.2 margin プロパティ(マージン一括措定)

margin: マージン幅;

マージンの幅を指定します。

マージン幅は、複数指定でき指定した個数により対象位置が異なります。

1つ指定
「上下左右」のすべての指定になります。
2つ指定
「上下」と「左右」の順で指定します。
3つ指定
「上」と「左右」と「下」の順で指定します。
4つ指定
「上」と「右」と「下」と「左」の順で指定します。

L4.5.3 注意事項

(1) マージンの相殺

  • 上部のボックスの下マージンと下部のボックスの上マージンが接する時は大きい方のマージンが採用されます。
  • 例えば、上部のボックスに「margin-bottom: 10px;」が指定されていて、下部のボックスに「margin-top: 30px;」が指定されている場合は大きい方の下部のマージンである「30px」が採用されます。

(2) マイナスマージン

  • マージンにはマイナスの値を指定することができます。
  • マイナスの値を指定すると他のボックスに重なった配置にすることができます。

(3) ボックスの中央配置

  • width プロパティでボックスの幅を指定した状態で左右のマージンを「auto」に設定(例えば「margin: 0 auto;」)するとボックスを親要素の中央に配置することができます。

(4) ボックスの右端配置

  • width プロパティでボックスの幅を指定した状態で左のマージンを「auto」に設定(例えば「margin-left: auto;」)するとボックスを親要素の右端に配置することができます。

L4.6 その他のプロパティ

L4.6.1 border-radius プロパティ(ボーダーの丸み)

border-radius: コーナーの角丸値;

ボックスの 4 つのコーナーの角丸を指定します。

コーナーの角丸値は、楕円の半径値を「左上の水平方向」・「右上の水平方向」・「右下の水平方向」・「左下の水平方向」・「/」・「左上の垂直方向」・「右上の垂直方向」・「右下の垂直方向」・「左下の垂直方向」の順でスペースで区切って指定します。楕円の半径値は、ボーダーの外側の輪郭になります。スラッシュ(/)以降を省略した場合は水平方向と垂直方向が同じ値であると解釈されます。

それぞれのコーナーの値も省略することができ以下のルールに従って解釈されます。

  • 「左下」が省略された場合は「右上」と同じ。
  • 「右下」が省略された場合は「左上」と同じ。
  • 「右上」が省略された場合は「左上」と同じ。

半径は、長さかパーセンテージで指定することができ、パーセンテージで指定する場合はボーダーボックスの幅と高さに対する楕円半径をパーセンテージで指定します。

指定方法は、以下の例を参考にしてください。

border-radiusの例2
border-radius: 150px;

border-radiusの例1
border-radius: 40px 80px 80px 160px / 40px 80px 40px 80px;

L4.6.2 box-shadow プロパティ(ボックスの影)

box-shadow: ボックスの影値;

ボックスに対して1つまたは複数の影を指定します。

ボックスの影値は、「水平方向の影のオフセット距離」・「垂直方向の影のオフセット距離」・「ぼかしの距離」・「広がりの距離」・「色」・「inset」の順でスペースで区切って指定します。ボックスの影値は、複数指定することができ複数指定する時はカンマ(,)で区切って指定します。ボックスの影値の初期値は「none」で影なしとなります。

ボックスの影値の各値は以下のルールに従って解釈されます。

  • 「水平方向の影のオフセット距離」は、正の値を指定すると右へ、負の値を指定すると左に影が移動します。
  • 「垂直方向の影のオフセット距離」は、正の値を指定すると下へ、負の値を指定すると上に影が移動します。
  • 「ぼかしの距離」は、ぼかしの距離の半径を指定します。値が大きいほど影の端のぼかしが強くなり、値が0の場合は端がくっきりした影になります。
  • 「広がりの距離」は、正の値を指定すると全方位に拡大、負の値を指定すると縮小します。
  • 「色」は、影の色を指定します。省略時はブラウザの規定値が使用されます。
  • 「inset」を指定するとボックスの内側の影になります。省略時は外側の影になります。

指定方法と表示効果は、以下の例を参考にしてください。

  1. box-shadow: 10px 10px;

    box-shadow: 10px 10px;

  2. box-shadow: 10px 10px 10px 0px #f00;

    box-shadow: 10px 10px 10px 0px #f00;

  3. box-shadow: 0px 0px 10px 10px #0f0;

    box-shadow: 0px 0px 10px 10px #0f0;

  4. box-shadow: 0px 0px 10px 10px #00f inset;

    box-shadow: 0px 0px 10px 10px #00f inset;

L4.6.3 box-sizing プロパティ(ボックスサイズ計算)

box-sizing: ボックスサイズの算出方法;

ボックスサイズを指定する width プロパティ、height プロパティの算出方法を指定します。

ボックスサイズの算出方法は、以下の値を指定します。

content-box(初期値)
width プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含めない。(コンテンツ領域の幅と高さを指定)
border-box
width プロパティ、height プロパティの指定値にパディングとボーダーの幅と高さを含める。(コンテンツ領域の幅と高さを小さくする)

ボックスサイズの算出方法の指定値で対象となる、width(幅)、height(高さ)の範囲は下記の通りです。

box-sizingの例1

L4.6.4 content プロパティ(挿入コンテンツ)

content: 挿入コンテンツ;

要素の直前または直後に文字列や画像などのコンテンツの挿入を指定します。

content プロパティを適用できるのは ::before 疑似要素や ::after 疑似要素だけです。content プロパティと一緒に font-size プロパティや color プロパティなどを指定した時は、挿入するコンテンツに適用されます。

挿入コンテンツは、以下の型式で指定します。

文字列
挿入する文字列をダブルクォーテーション(")またはシングルクォーテーション(')で囲って指定します。
画像などのファイル
「url("ファイルパス")」型式で挿入する画像などのファイルを指定します。

content プロパティの使用例は、以下の通りです。

使用例(HTML)


<div class="pelement3">
	<p>サンプル1</p>
	<p>サンプル2</p>
	<p>サンプル3</p>
	<p>サンプル4</p>
	<p>サンプル5</p>
</div>

使用例(CSS)


.pelement3 p::before {
	content: "◆";
	padding-right: 5px;
	color: skyblue;
}

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

使用例(HTML)


<div class="pelement4">
	<p>サンプル1</p>
	<p>サンプル2</p>
	<p>サンプル3</p>
	<p class="new">サンプル4</p>
	<p class="new">サンプル5</p>
</div>

使用例(CSS)


.pelement4 p.new::after {
	content: "New";
	padding: 0 5px;
	margin-left: 10px;
	font-size: 0.9em;
	color: white;
	vertical-align: top;
	background: red;
	border-radius: 5px;
}

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

ロケット本体
PAGE
TOP
ロケット炎