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: 解除の方向;

回り込みの解除を指定します。clear プロパティは、回り込みを解除させたい同レベルの後続するブロック要素に指定する必要があります。

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

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

同レベルの後続するブロック要素がない場合や記述の簡素化を行うために after 擬似要素を使用した clearfix という名称のクラスを使用する方法があります。clearfix クラスのサンプルは、以下の通りです。


.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

L4.2.9 position/top/left/bottom/right プロパティ（要素の配置方法）


position: 配置方法;
top: 上からの位置;
bottom: 下からの位置;
left: 左からの位置;
right: 右からの位置;

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

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

static（初期値）
通常の配置を行います。この値のときには、top/bottom/left/right プロパティは、適用されません。
relative
相対位置への配置となります。position プロパティで static を指定した場合（または、何も指定していない場合）に表示される位置が基準位置になり top/bottom/left/right プロパティを使用して元の位置からの相対位置に配置されます。他の要素の配置には影響を与えません。
absolute
絶対位置への配置となります。親要素に position プロパティの static 以外（通常は、relative）の値が指定されている場合は、親要素の位置が基準位置になり top/bottom/left/right プロパティを使用して親要素からの相対位置に配置されます。親要素に position プロパティの static が指定されている場合（または、何も指定していない場合）は、ページ先頭からウィンドウサイズが基準位置になります。本指定での親要素は直近の親要素だけでなく祖先要素が対象になります。本指定がされている要素の空間は作成されません。
fixed
絶対位置への配置となるのは、absolute と同じですがスクロールしても位置が固定されたままになります。本値が指定されている要素の空間は作成されません。
sticky
通常の配置を行いますが配置位置を指定する条件を満たすとフロートされ位置が固定されたままになります。本指定は、表示されている場所により他の指定と類似する動作をします。指定条件を満たしていない時は、static や relative と同様に元の領域が確保され要素が配置されますが指定条件を満たすと fixed のように指定条件の位置にとどまります。ヘッダー、フッター、サイドバーなどをフロートさせて固定位置に表示にする場合などで使用します。

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

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

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

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

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

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

  3. ページ先頭からの相対位置に配置

    ページ先頭からウィンドウサイズの領域に対する相対位置に配置する場合は、「position: absolute;」プロパティを指定して top/bottom/left/right プロパティで配置する相対位置を指定します。本指定を行うとページのスクロールに合わせて本要素もスクロールされます。本指定の場合は、親要素の横幅が継承されません。

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

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

positionの例1
positionの例2

L4.2.10 z-index プロパティ（重なりの順序方法）


z-index: 重なりの順序;

要素の重なりの順序方法を指定します。

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

L4.2.11 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 グリッドレイアウトを活用しましょう」を参照してください。
table関連
テーブル関連要素の属性を指定します。テーブル関連要素の指定値は、table（table）、table-caption（caption）、table-row（tr）、table-cell（th, td）、table-header-group（thead）、table-row-group（tbody）、table-footer-group（tfoot）、table-column-group（colgroup）、table-column（col）があります。テーブルレイアウトの使用法については「Lesson-7 テーブルを活用しましょう」を参照してください。

L4.2.12 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;
    あいうえお
    かきくけこ
    さしすせそ
    たちつてと
    なにぬねの
    はひふへほ
    まみむめも

L4.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

L4.6.5 object-fit プロパティ（画像はめ込み）

object-fit: はめ込み方法;

img タグや video タグのコンテンツのはめ込み方法を指定します。

はめ込み方法は、以下の値で指定します。

contain
コンテンツのアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小してはめ込みます。
cover
コンテンツのアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトの方が合うように切り取られます。
fill
要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトが合うように拡大縮小されます。（初期値）
none
コンテンツは、拡大縮小されません。
scale-down
コンテンツは、none または contain が指定されたかのようにサイズが決められ、オブジェクトの実際のサイズが小さい方を採用します。

object-fit プロパティの使用例は、以下の通りです。（使用した画像の元サイズは、256px×128px）

使用例（HTML）


<img class="object-fit" src="object-fit-256x128.jpg">

使用例（CSS）


.object-fit {
	width: 200px;
	height: 200px;
	border: 1px #333 solid;
	object-fit: はめ込み方法;
}
  1. object-fit: contain;
    object-fit
  2. object-fit: cover;
    object-fit
  3. object-fit: fill;
    object-fit
  4. object-fit: none;
    object-fit
  5. object-fit: scale-down;
    object-fit

L4.6.6 object-position プロパティ（画像の配置位置指定）

object-position: 横方向配置位置 縦方向配置位置;

iframe タグ、img タグ、video タグのコンテンツの配置位置を指定します。

配置位置は、以下の値で指定します。初期値は、「50% 50%」で、指定は、片方を省略することも可能です。

横方向配置位置
横方向の配置位置を以下の値で指定します。
  • left、right、center
  • left、right 数値（単位付き）
  • 数値（単位付き）
縦方向配置位置
縦方向の配置位置を以下の値で指定します。
  • top、bottom、center
  • top、bottom 数値（単位付き）
  • 数値（単位付き）

object-position プロパティの使用例は、以下の通りです。（使用した画像の元サイズは、256px×128px）
画像がはみ出した場合は、はみ出した部分は非表示（トリミング）になります。

使用例（HTML）


<img class="object-position" src="object-position-256x128.jpg" alt="object-position">

使用例（CSS）


.object-fit {
	width: 300px;
	height: 300px;
	border: 1px #333 solid;
	object-fit: none;
	object-position: 画像の配置位置;
}
  1. object-position: 50% 50%;
    object-position
  2. object-position: right;
    object-position
  3. object-position: bottom;
    object-position
  4. object-position: 80% 20%;
    object-position
  5. object-position: right 80% bottom 20%;
    object-position
  6. object-position: 100px 200px;
    object-position

L4.6.7 vertical-align プロパティ（垂直方向位置指定）

vertical-align: 垂直方向位置;

インラインブロック、表セルボックスの垂直方向位置を指定します。

  • インライン要素、インラインブロック要素（img 要素など）の垂直配置位置を指定します。例えば、行内にテキストと画像を表示する場合に画像の垂直位置を指定します。
  • 表のセル内の垂直方向の配置位置を指定します。
  • 本プロパティは、ブロック要素には適用されませんので注意してください。

垂直方向位置は、以下の値で指定します。初期値は、baseline です。

baseline
要素の下端をフォントのベースラインに揃えます。
top
要素の上端を行の上端に揃えます。
middle
要素を行の中央に揃えます。
bottom
要素の下端を行の下端に揃えます。

vertical-align プロパティの使用例は、以下の通りです。（使用した画像の元サイズは、256px×128px）

使用例（HTML）


<div class="vertical-align">
	sample<img src="vertical-align-256x128.jpg">サンプル
</div>

使用例（CSS）


.vertical-align {
	width: 600px;
	font-size: 40px;
	line-height: 1.0;
	text-align: center;
	border: 1px #333 solid;
}
.vertical-align img {
	vertical-align: 垂直方向位置;
}
  1. vertical-align: baseline;
    samplevertical-alignサンプル
  2. vertical-align: top;
    samplevertical-alignサンプル
  3. vertical-align: middle;
    samplevertical-alignサンプル
  4. vertical-align: bottom;
    samplevertical-alignサンプル

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