HTML-CSS入門講座

濱屋太郎

Lesson-4

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

目次

4.1 はじめに

4.1.1 概要

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

4.2 レイアウト系プロパティ

4.2.1 レイアウト関連プロパティ

(1) widthプロパティ(内容の幅)

width: (内容の幅);

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

(2) max-widthプロパティ(幅の最大値)

max-width: (幅の最大値);

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

(3) min-widthプロパティ(幅の最小値)

min-width: (幅の最小値);

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

(4) heightプロパティ(内容の高さ)

height: (内容の高さ);

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

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

max-height: (高さの最大値);

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

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

min-height: (高さの最小値);

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

(7) floatプロパティ(回り込み)

float: (回り込みの方向);

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

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

left
指定した要素を左に寄せ、後ろに続く内容は、その右側に回り込みます。
right
指定した要素を→に寄せ、後ろに続く内容は、その左側に回り込みます。
none(初期値)
特に配置を指定しません。

(8) clearプロパティ(回り込みを解除)

clear: (解除の方向);

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

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

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

(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プロパティにstaticが指定されている時は重なりの順序は適用されません。

(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 グリッドレイアウトを活用しましょう」を参照してください。

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

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

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

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

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

4.3 ボーダー系プロパティ

4.3.1 ボーダー関連プロパティ

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

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

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

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

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

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

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

(2) border-colorプロパティ(ボーダー色)

border-color: (ボーダーの色);

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

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

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

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

(3) border-widthプロパティ(ボーダー幅)

border-width: (ボーダーの幅);

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

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

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

(4) borderプロパティ(ボーダー一括指定)

border: (ボーダー一括指定);

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

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

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

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


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

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

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

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

4.4 パディング系プロパティ

4.4.1 パディング関連プロパティ

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


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

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

(2) paddingプロパティ(パディング一括指定)

padding: (パディング幅);

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

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

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

4.5 マージン系プロパティ

4.5.1 マージン関連プロパティ

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


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

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

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

margin: (マージン幅);

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

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

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

4.5.2 注意事項

(1) マージンの相殺

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

(2) マイナスマージン

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

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

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

4.6 その他のプロパティ

4.6.1 その他のプロパティ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

box-shadowの例1

box-shadowの例2

box-shadowの例3

box-shadowの例4

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

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

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

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

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

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

box-sizingの例1

(4) contentプロパティ(挿入コンテンツ)

content: (挿入コンテンツ);

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

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

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

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