５　表示、配置

表示や配置に関するスタイルシートについて説明します。

５．１　　表示

表示について説明します。

属性	説明
float	左寄せ・右寄せ
clear	回り込み解除
overflow-x	横にはみ出た内容の表示方法
overflow-y	縦にはみ出た内容の表示方法
overflow	はみ出た内容の表示方法
visibility	表示・非表示
text-overflow	オーバーフローの表示形式
display	要素の表示形式

５．１．１左寄せ・右寄せ　(float)

左寄せまたは右寄せを指定します。

float:属性値

左寄せまたは右寄せを指定する。

属性値	説明
none	特に配置を指定しない（規定値）
left	要素を左寄せにする
right	要素を右寄せにする

記述例

<img src="bear.png" style="float:none">クマ科に属する哺乳類の総称。<br>体はよく肥え、がんじょうで、毛はあらく、 ...
<img src="bear.png" style="float:left">クマ科に属する哺乳類の総称。<br>体はよく肥え、がんじょうで、毛はあらく、 ...
<img src="bear.png" style="float:right">クマ科に属する哺乳類の総称。<br>体はよく肥え、がんじょうで、毛はあらく、 ...

理解の助けになるような説明を付け、表示領域をグレイの枠で囲っています。

表示例

５．１．２回り込み解除　(clear)

回り込みを解除します。

clear:属性値

回り込みを解除する。

属性値	説明
none	解除しない（規定値）
left	左側の回り込みを解除にする
right	右側の回り込みを解除にする
both	左右両側の回り込みを解除にする

記述例

<img src="bear.png" width="125" height="70" style="float:left"><img src="bear.png" style="float:right">
    クマ科に属する哺乳類の総称。<div style="clear:none">体はよく肥え、がんじょうで、毛はあらく、 ...</div>
<img src="bear.png" style="float:left"><img src="bear.png" width="125" height="70" style="float:right">
    クマ科に属する哺乳類の総称。<div style="clear:left">体はよく肥え、がんじょうで、毛はあらく、 ...</div>
<img src="bear.png" width="125" height="70" style="float:left"><img src="bear.png" style="float:right">
    クマ科に属する哺乳類の総称。<div style="clear:right">体はよく肥え、がんじょうで、毛はあらく、 ...</div>
<img src="bear.png" style="float:left"><img src="bear.png" width="125" height="70" style="float:right">
    クマ科に属する哺乳類の総称。<div style="clear:both">体はよく肥え、がんじょうで、毛はあらく、 ...</div>

理解の助けになるような説明を付け、表示領域をグレイの枠で囲っています。

表示例

５．１．３横にはみ出た内容の表示方法　(overflow-x)

列方向にはみ出た内容の表示方法を指定します。

通常右端で自動改行されるので、改行させないようにするために white-space:nowrap; を指定します。

overflow-x:属性値

列方向にはみ出た内容の表示方法を指定する。

属性値	説明
visible	ボックスからはみ出して表示（規定値）
scroll	入りきらない内容はスクロールで表示
hidden	はみ出た部分は表示しない
auto	ブラウザに依存する（一般的にはスクロールして見られるようになる）

記述例

スタイルシート
  div {
    width:200px;
    height:100px;
    border:solid 1px lightgrey;
    white-space:nowrap;
  }

ボディ
<div style="overflow-x:visible;">クマ科に属する哺乳類の総称である。</div>
<div style="overflow-x:scroll;">クマ科に属する哺乳類の総称である。</div>
<div style="overflow-x:hidden;">クマ科に属する哺乳類の総称である。</div>
<div style="overflow-x:auto;">クマ科に属する哺乳類の総称である。</div>

理解の助けになるような説明を付け、表示領域をグレイの枠で囲っています。

表示例

５．１．４縦にはみ出た内容の表示方法　(overflow-y)

行方向にはみ出た内容の表示方法を指定します。

通常右端で自動改行されるので、改行させないようにするためには white-space:nowrap; を指定します。

overflow-y:属性値

行方向にはみ出た内容の表示方法を指定する。

属性値	説明
visible	ボックスからはみ出して表示（規定値）
scroll	入りきらない内容はスクロールで表示
hidden	はみ出た部分は表示しない
auto	ブラウザに依存する（一般的にはスクロールして見られるようになる）

記述例

スタイルシート
  div {
    width:100px;
    height:30px;
    border:solid 1px lightgrey;
  }

ボディ
<div style="overflow-y:visible;">クマ科に属する哺乳類の総称である。</div>
<div style="overflow-y:scroll;">クマ科に属する哺乳類の総称である。</div>
<div style="overflow-y:hidden;">クマ科に属する哺乳類の総称である。</div>
<div style="overflow-y:auto;">クマ科に属する哺乳類の総称である。</div>

理解の助けになるような説明を付け、表示領域をグレイの枠で囲っています。

表示例

５．１．５はみ出た内容の表示方法　(overflow)

はみ出た内容の表示方法を指定します。

通常右端で自動改行されるので、改行させないようにするためには white-space:nowrap; を指定します。

overflow:属性値

はみ出た内容の表示方法を指定する。

属性値を一つだけ指定した場合は、列方向、行方向ともに適用され、２個指定された場合は、列方向、行方向の順に適用されます。

ただし、ほとんどのブラウザーはまだ属性値を２個指定した場合は機能しないようです。

属性値	説明
visible	ボックスからはみ出して表示（規定値）
scroll	入りきらない内容はスクロールで表示
hidden	はみ出た部分は表示しない
auto	ブラウザに依存する（一般的にはスクロールして見られるようになる）

記述例

スタイルシート
  div {
    width:200px;
    height:50px;
    border:solid 1px lightgrey;
  }

ボディ
<div style="overflow:visible;">クマ科に属する哺乳類の総称である。体はよく肥え、がんじょうで、毛はあらく、...</div>
<div style="overflow:scroll;">クマ科に属する哺乳類の総称である。体はよく肥え、がんじょうで、毛はあらく、...</div>
<div style="overflow:hidden;">クマ科に属する哺乳類の総称である。体はよく肥え、がんじょうで、毛はあらく、...</div>
<div style="overflow:auto;">クマ科に属する哺乳類の総称である。体はよく肥え、がんじょうで、毛はあらく、...</div>

理解の助けになるような説明を付け、表示領域をグレイの枠で囲っています。

表示例

５．１．６表示・非表示　(visibility)

表示・非表示を指定します。

visibility:属性値

表示・非表示を指定する。

属性値を一つだけ指定した場合は、列方向、行方向ともに適用され、２個指定された場合は、列方向、行方向の順に適用されます。

属性値	説明
visible	表示（規定値）
hidden	表示しない（レイアウト上の領域は確保される）
collapse	表の行と列を非表示にする（レイアウト上の領域も確保されない）（それ以外の要素に指定した場合は「hidden」と同じ）

記述例

<span style="visibility:visible;">visible</span>
<span style="visibility:hidden;">hidden</span>
<span style="visibility:collapse;">collapse</span>

visible は表示されますが、それ以外は表示されません。ただし、レイアウト上の領域は確保されます。なお、理解の助けになるような説明を付けています。

表示例

table 要素に対しては次のようになります。

記述例

スタイルシート
  table {
    border:solid 1px lightgrey;
    background-color: lightyellow;
  }
  table tr td {
    border:solid 1px lightgrey;
    background-color: white;
  }

ボディ
<table>
  <tr style="visibility:visible;"><td>visible</td><td>visible</td><td>visible</td></tr>
  <tr style="visibility:hidden;"><td>hidden</td><td>hidden</td><td>hidden</td></tr>
  <tr style="visibility:collapse;"><td>collapse</td><td>collapse</td><td>collapse</td></tr>
</table>

<table>
  <colgroup>
    <col style="visibility:visible;">
    <col style="visibility:hidden;">
    <col style="visibility:collapse;">
  </colgroup>
  <tr><td>visible</td><td>hidden</td><td>collapse</td></tr>
  <tr><td>visible</td><td style="visibility:hidden;">hidden</td><td>collapse</td></tr>
</table>

行の場合は正しく機能するようです。

しかし、列の場合は、col 要素で指定した hidden は効果がないようで表示されてしまいます（１行目）。ただし、td 要素に個別に hidden を指定した場合は表示されなくなります（２行目）。

理解の助けになるような説明を付けています。

表示例

注意

table 要素の列を表示しないようにするために visibility:hidden; を指定する場合は、col 要素ではなく td 要素に個別に指定します。
（col 要素では効果がなく表示されてしまうようです）

５．１．７オーバーフローの表示形式　(text-overflow)

要素をどのような形式で表示するかを指定します。ただし、要素によっては、他の属性と一緒に指定する必要があります。例えば、

　td 要素のときは、　visible 以外の overflow 属性と max-width 属性

　div 要素のときは、 visible 以外の overflow 属性と width 属性あるいは max-width 属性

　span 要素のときは、block を指定した display 属性と visible 以外の overflow 属性と width 属性あるいは max-width 属性

text-overflow:属性値[ 属性値]

要素をどのような形式で表示するかを指定する。

属性値を二つ指定した場合は、一つ目が行の左端での、二つ目が行の右端でのオーバーフロー処理になりますが、機能していないようです。

属性値	説明
clip	単純に表示領域を超えた部分が切り取られる（規定値）
ellipsis	切り取られたテキストの代わりに、省略記号 … を表示する
文字列	切り取られたテキストの代わりに指定の文字列を表示する

記述例

<div style="overflow:hidden;max-width:10em;text-overflow:clip;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div style="overflow:hidden;max-width:10em;text-overflow:ellipsis;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div style="overflow:hidden;max-width:10em;text-overflow:'~';">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div style="overflow:hidden;max-width:10em;text-overflow:ellipsis '~';">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

属性値を二つ指定した場合は機能していないようです。

理解の助けになるような説明を付けています。

表示例

５．１．８要素の表示形式　(display)

要素をどのような形式で表示するかを指定します。

HTML4 までは、要素の種類としてブロックレベル要素とインライン要素がありました。

ブロックレベル要素（div、p、h1～h6、table、pre、blockquote、dl、ul、ol など）: 見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識される。
ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入る。
インライン要素（span、a、strong、small、b、i、cite、q、img、acronym、abbr など）: 主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。
一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。

HTML5 でもこれらの属性はありますが、それぞれの要素に結び付けられているのではなく、単にスタイルシートの属性にすぎなくなっています。つまり、display 属性の初期値として、div 要素は block を、span 要素は inline を持っているにすぎないということです。したがって、display 属性を変更することによっていろいろな形式で表示することができるようになります。

display:属性値

要素をどのような形式で表示するかを指定する。

属性値は以下の６つのカテゴリに分類されていて、組み合わせて指定することができる。

display-outside

要素のフローレイアウトの役割を表す、要素がどのように表示されるかを指定する。

属性値	説明
block	ブロックボックスとして表示（改行される）
inline	インラインボックスとして表示（改行されない）
run-in	ランインボックスとして表示。状況によりブロックボックスまたはインラインボックスとして表示される

display-inside

内部に含まれる要素がどのように表示されるかを指定する。

属性値	説明
flow
flow-root
table	table 要素として表示
flex	フレックスコンテナとして表示
grid	列と行からなるグリッドとして表示
ruby	ruby 要素として表示

display-listitem

内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成する。

属性値	説明
list-item	リストアイテムとして表示

display-internal

table や ruby のような複雑な内部構造を定義する。

属性値	説明
table-row-group	tbody 要素として表示
table-header-group	thead 要素として表示
table-footer-group	tfoot 要素として表示
table-row	tr 要素として表示
table-cell	th 要素、td 要素として表示
table-column-group	colgroup 要素として表示
table-column	col 要素として表示
table-caption	caption 要素として表示
ruby-base	rb 要素として表示
ruby-text	rt 要素として表示
ruby-base-container	rbc 要素として表示
ruby-text-container	rtc 要素として表示

display-box

表示するかどうかを定義する。

属性値	説明
contents	内部に子要素があれば、自分自身の属性を生成しない。
none	何も表示されない（単に表示されないだけでなく、その要素が存在しない状態になる）

display-legacy

CSS 2 と互換性を持った指定方法で定義する。

属性値	説明
inline-block	高さ、横幅を指定可能なインラインボックスとして表示　（inline flow-root と同じ）
inline-table	インラインテーブルとして表示　（inline table と同じ）
inline-flex	インラインのフレックスコンテナとして表示　（inline flex と同じ）
inline-grid	インラインのフレックスコンテナとして表示　（inline grid と同じ）

○ display-outside

内部に含まれる要素がどのように表示されるかを指定します。

記述例

<span style="display:block;">span1</span><span style="display:block;">span2</span>
<div style="display:inline;">div1</div><div style="display:inline;">div2</div>
<h4 style="display:run-in; font-size:12pt;">h4h4h4h4</h4><div style="width:30ex;">divdiv divdiv divdiv divdiv divdiv divdiv</div>

block はブロックボックスとして表示されます。したがって、要素の終了で改行されます。

inline はインラインボックスとして表示されます。したがって、要素の終了で改行されません。

run-in は後続の要素が回り込みや絶対配置されていないブロックボックスであれば、そのブロックボックス内の最初に表示されます。

表示例

table 要素に inline を指定すると、列方向に並べることができます。

ただし、table 要素のボーダーが正しく表示されないようです。

記述例

スタイルシート
  table { border:solid 1px red; }
  td { border:solid 1px gray; }

ボディ
<table style="display:inline;">
  <caption>Table 1</caption>
  <tr><td>A01</td><td>B01</td><td>C01</td></tr>
  <tr><td>A02</td><td>B02</td><td>C02</td></tr>
</table>
<table style="display:inline;">
  <caption>Table 2</caption>
  <tr><td>A01</td><td>B01</td><td>C01</td></tr>
  <tr><td>A02</td><td>B02</td><td>C02</td></tr>
</table>

表示例

○ display-inside

内部に含まれる要素がどのように表示されるかを指定します。

table や table-* を指定すると、テーブルの構成要素として扱うことができます。

記述例

スタイルシート
  .table { display:table; border-collapse:collapse; }
  .caption { display:table-caption; text-align:center; font-weight:bold; }
  .tr { display:table-row; }
  .th { display:table-cell; border:1px solid gray; width:100px; text-align:center; font-weight:bold; }
  .td { display:table-cell; border:1px solid gray; width:100px; }

ボディ
<div class="table">
  <div class="caption">擬似テーブル</div>
  <div class="tr">
    <div class="th">AAAAA</div>
    <div class="th">BBBBB</div>
    <div class="th">CCCCC</div>
  </div>
  <div class="tr">
    <div class="td">aaaaa</div>
    <div class="td">bbbbb</div>
    <div class="td">ccccc</div>
  </div>
</div>

表示例

flex はコンテンツを横に並べるためのフレックスボックスとして表示されます。フレックスボックスでは、並べる要素をフレックスアイテム、それを包含する要素をフレックスコンテナと呼びます。

５．６　フレックスボックスも参照してください。

記述例

スタイルシート
.flexbox {
  display: flex;
  padding: 10px;
  border: solid 1px gray;
  background-color: lightgrey;
}

ボディ
<div class="flexbox">
 <div style="background-color:ivory;">AAAAAAAAA</div>
 <div style="background-color:honeydew;">BBBBBBBBBBBBBBBBBBBBBBBBB<br>BBBBBBB</div>
 <div style="background-color:azure;">CCCCCCCCCCCCCCCCCCC</div>
</div>

表示例

grid は列と行からなるグリッドボックスとして表示されます。

５．７　グリッドも参照してください。

記述例

スタイルシート
div {
  border: solid 1px gray;
  padding: 3px;
  background-color:lightyellow;
}
div.gridbox {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-gap: 2px;
  background-color:lightgrey;
}
.a1 {
  grid-row: 1;
  grid-column: 1;
}
.b1 {
  grid-row: 1;
  grid-column: 2 / 5;
}
.a2 {
  grid-row: 2 / 4;
  grid-column: 1;
}
.b2 {
  grid-row: 2 / 4;
  grid-column: 2;
}
.c2 {
  grid-row: 2;
  grid-column: 3 / 5;
}
.c3 {
  grid-row: 3;
  grid-column: 3;
}
.c4 {
  grid-row: 3;
  grid-column: 4;
}

ボディ
<div class="gridbox">
 <div>(1, 1)</div>
 <div>(1, 2)</div>
 <div>(1, 3)</div>
 <div>(1, 4)</div>
 <div>(2, 1)</div>
 <div>(2, 2)</div>
</div>
<br>
<div class="gridbox">
 <div class="a1">(1, 1)</div>
 <div class="b1">(1, 2-4)</div>
 <div class="a2">(2-3, 1)</div>
 <div class="b2">(2-3, 2)</div>
 <div class="c2">(2, 3-4)</div>
 <div class="c3">(3, 3)</div>
 <div class="c4">(3, 4)</div>
</div>

表示例

ruby や ruby-* を指定すると、ルビの構成要素として扱うことができます。

属性値	意味	HTML要素
ruby	ルビコンテナボックスを生成する	ruby
ruby-base	ルビ基底ボックスを生成する	rb
ruby-text	ルビ注釈ボックスを生成する	rt
ruby-base-container	ルビ基底コンテナボックスを生成する	rbc
ruby-text-container	ルビ注釈コンテナボックスを生成する	rtc

記述例

スタイルシート
  .ruby { display:ruby; }
  .rb { display:ruby-base; }
  .rt { display:ruby-text; font-size:6pt; }
  .rbc { display:ruby-base-container; }
  .rtc { display:ruby-text-container; }

ボディ
<div class="ruby"><div class="rb">意</div><div class="rt">い</div><div class="rb">気<div class="rt">く</div></div>
<div class="rb">地</div><div class="rt">じ</div></div><br>

<div class="ruby"><div class="rb">半</div><div class="rt">はん</div><div class="rb">可</div><div class="rt">か</div><div class="rb">通</div><div class="rt">つう</div>
<div class="rtc"><div class="rt">知ったかぶり</div></div></div>

表示例

○ display-listitem

li 要素のように表示されます。これは list-style-type や list-style-position と共に使用することができます。

ただし、list-style-position: outside; には対応していないようです。

記述例

<div style="display:list-item;">アイテム 11</div>
<div style="display:list-item;list-style-position:inside;">アイテム 12</div>
<div style="display:list-item;list-style-position:inside;list-style-type:circle;">アイテム 13</div>
<div style="display:list-item;list-style-position:outside;">アイテム 14</div>

表示例

○ display-box

表示するかどうかを定義します。

アイテム 11 は、display 属性が指定されていないので背景色がピンクで表示されます。また、div 要素はブロックボックスなので表示後改行されます。

アイテム 21 も同じように背景色を指定していますが、display:contents; が指定されているため、この div 要素の属性は表示されず、"アイテム 21" だけが表示されます。また、インラインボックスになるので表示後も改行されません。

アイテム 32 は親要素に display:contents; が指定されているため親要素の属性は表示されず、子要素の属性とともに、"アイテム 32" だけが表示されます。"アイテム 31" は改行されていないので "アイテム 21" に続いて表示されます。

アイテム 42 は display:none; なので、表示されないだけでなく、存在もなかったかのように処理されます。

記述例

<div style="background-color:pink;">アイテム 11</div>
<div style="display:contents;background-color:pink;">アイテム 21</div>
<div style="display:contents;solid 1px red;">アイテム 31
  <div style="background-color:lightyellow;">アイテム 32</div>
</div>
アイテム 41<div style="display:none;">アイテム 42</div>アイテム 43

表示例

５．２　　パディング

パディングについて説明します。

スタイルシートでは、いろいろな要素を長方形のボックスとして扱います。パディングとは、そのボックスと内側のコンテンツとの間の隙間に相当します。

５．２．１上下左右のパディング　(padding-top、padding-bottom、padding-left、padding-right)

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

padding-top、padding-bottom、padding-left、padding-right:属性値

上下左右のパディングを個別に指定する。

属性値	説明
数値	長さ（数値＋単位）
パーセント	要素の大きさに対するパーセント（数値%）

スタイルシート
div {
  width:200px;
  height:60px;
  border:solid 1px gray;
  background-color:lightgrey;
}

ボディ
 <div style="padding-top:20px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>
 <div style="padding-right:20px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>
 <div style="padding-bottom:20px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>
 <div style="padding-left:20px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>

理解の助けになるように背景色を別途付けています。

表示例

５．２．２パディング　(padding)

パディングを一度に指定します。

padding:属性値属性値 ...

パディングを一度に指定する。

属性値が一つだけのときは、上下左右同じ値

属性値が二つのときは、上下と左右の値

属性値が三つのときは、上と左右と下の値

属性値が四つのときは、上と右と下と左の値

属性値	説明
数値	長さ（数値＋単位）
パーセント	要素の大きさに対するパーセント（数値%）

スタイルシート
div {
  width:200px;
  height:60px;
  border:solid 1px gray;
  background-color:lightgrey;
}

ボディ
 <div style="padding:10px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>
 <div style="padding:10px 20px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>
 <div style="padding:10px 20px 30px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>
 <div style="padding:10px 20px 30px 40px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、よろづのことに使ひけり。</div>

理解の助けになるように背景色を別途付けています。

表示例

５．３　　マージン

マージンについて説明します。

スタイルシートでは、いろいろな要素を長方形のボックスとして扱います。マージンとは、そのボックスの外側の隙間に相当します。他の要素のボックスとはこのマージン分（他の要素もマージンがあればもちろんその分も）隔たることになります。

５．３．１上下左右のマージン　(margin-top、margin-bottom、margin-left、margin-right)

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

margin-top、margin-bottom、margin-left、margin-right:属性値

上下左右のマージンを個別に指定する。

属性値	説明
数値	長さ（数値＋単位）
パーセント	要素の大きさに対するパーセント（数値%）

スタイルシート
div {
  width:250px;
  height:80px;
  border:solid 1px gray;
  background-color:lightgrey;
}
span {
  font-size:14pt;
  float:left;
  border:solid 1px blue;
  background-color:ivory;
}

ボディ
 <div>今は昔、竹取の翁といふものありけり。<span style="margin-top:20px;">竹取物語</span>野山にまじりて竹を取りつつ、...</div>
 <div>今は昔、竹取の翁といふものありけり。<span style="margin-right:20px;">竹取物語</span>野山にまじりて竹を取りつつ、...</div>
 <div>今は昔、竹取の翁といふものありけり。<span style="margin-bottom:20px;">竹取物語</span>野山にまじりて竹を取りつつ、...</div>
 <div>今は昔、竹取の翁といふものありけり。<span style="margin-left:20px;">竹取物語</span>野山にまじりて竹を取りつつ、...</div>

理解の助けになるように背景色を別途付けています。

表示例

５．３．２マージン　(margin)

マージンを一度に指定します。

マージン:属性値属性値 ...

パディングを一度に指定する。

属性値が一つだけのときは、上下左右同じ値

属性値が二つのときは、上下と左右の値

属性値が三つのときは、上と左右と下の値

属性値が四つのときは、上と右と下と左の値

属性値	説明
数値	長さ（数値＋単位）
パーセント	要素の大きさに対するパーセント（数値%）

スタイルシート
  div {
    width:260px;
    height:100px;
    border:solid 1px gray;
    background-color:lightgrey;
  }
  span {
    font-size:14pt;
    float:left;
    border:solid 1px blue;
    background-color:ivory;
  }

ボディ
 <div style="margin:10px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、...</div>
 <div style="margin:10px 20px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、...</div>
 <div style="margin:10px 20px 30px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、...</div>
 <div style="margin:10px 20px 30px 40px;">今は昔、竹取の翁といふものありけり。野山にまじりて竹を取りつつ、...</div>

理解の助けになるように背景色を別途付けています。

表示例

５．４　　配置

表示について説明します。

５．４．１要素の配置方法　(position)

要素の配置方法が、相対位置か絶対位置かを指定します。

position:属性値

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

属性値	説明
static	通常の位置に配置される。top、left、right、bottom 属性は意味を持たない（規定値）
relative	要素の通常の位置から、top、right、bottom、left で指定した分だけ相対的に移動させる
absolute	要素を、top、right、bottom、left で指定した座標に絶対的に配置する親ボックスに static 以外の position 属性が書かれていたら親ボックスを基準とし、それ以外の場合はウィンドウ／フレームを基準として要素の位置が固定される
fixed	要素をウィンドウ／フレーム内の top、right、bottom、left で指定した位置に絶対的に配置するスクロールしても要素の位置が固定されたままになる

position:static は、通常の位置に配置されます。top、left、right、bottom 属性は意味を持ちません。

記述例

スタイルシート
div {
  width:300px;
  height:80px;
  background-color:lightyellow;
  overflow-y:scroll;
}
span {
  top:10px;
  left:50px;
  border:solid 1px lightgrey;
  color:cyan;
}

ボディ
 <div>static<br><br><span style="position:static;">■■■</span><br><br></div>

表示例

position:relative は、通常の位置（うすい色の部分）から、top、right、bottom、left で指定した分だけ移動した位置に配置されます。

記述例

スタイルシート
　　上と同じ

ボディ
 <div>relative<br><br><span style="position:relative;">■■■</span><br><br></div>

通常の位置から下に 10px、右に 50px 移動した位置に表示されます。なお、通常の位置をうすい色で別途描いてます。

表示例

position:absolute は、top、right、bottom、left で指定した座標に絶対的に配置されます。

親ボックスに static 以外の position 属性が書かれていたら親ボックスを基準とし、それ以外の場合はウィンドウ／フレームを基準として要素の位置が固定されます。

記述例

スタイルシート
　　上と同じ

ボディ
 <div>absolute<br><br><span style="position:absolute;">■■■</span><br><br></div>

div 要素に position 属性が書かれていないので、フレームの左上位置が基準となり、下に 10px、右に 50px 移動した位置に表示されます。なお、通常の位置をうすい色で別途描いてます。

表示例

position:fixed は、ウィンドウ／フレーム内の top、right、bottom、left で指定した座標に絶対的に配置されます。スクロールさせても位置は移動しません。

記述例

スタイルシート
　　上と同じ

ボディ
 <div>fixed<br><br><span style="position:fixed;">■■■</span><br><br></div>

フレームの左上位置が基準となり、下に 10px、右に 50px 移動した位置に表示されます。なお、通常の位置をうすい色で別途描いてます。

表示例

５．４．２上端、下端、左端、右端からの距離　(top、bottom、left、right)

上端、下端、左端、右端からの距離を指定します。

position 属性に absolute、relative、fixed を指定した要素に対して指定可能です。

また、top と bottom、left と right を同時に指定した場合は、要素のボックスが広がります。

top:属性値、bottom:属性値、left:属性値、right:属性値

上端、下端、左端、右端からの距離を指定する。

属性値	説明
距離	数値＋単位
パーセント	距離をパーセントでする
auto	自動計算（規定値）

親要素となる div 要素に position:relative が指定されているため、子要素の span 要素の位置は div 要素の左上が基準になります。

記述例

スタイルシート
  span {
    border:solid 1px gray;
    color:blue;
    position:absolute;
  }

ボディ
 <div style="position:relative;">
   <span style="top:20px;left:20px;">■１■</span>
   <span style="top:20px;right:10px;">■２■</span>
   <span style="top:10px;bottom:30px;left:80px;">■３■</span>
   <span style="top:80px;left:20px;right:80px;">■４■</span>
 </div>

top と bottom、left と right を同時に指定した場合は、要素のボックスが広がります。

表示例

５．４．３重なりの順序　(z-index)

要素同士が重なって表示される場合の、重なりの順序を指定します。

position 属性に absolute、relative、fixed を指定した要素に対して指定可能です。

z-index:属性値

要素同士が重なって表示される場合の、重なりの順序を指定する。

属性値	説明
数値	数が大きなものほど前面に表示される。マイナス値も可能
auto	親要素と同じ階層（規定値）

記述例

スタイルシート
  div {
    border:solid 1px gray;
    position:absolute;
    width:50px;
    height:50px;
  }

ボディ
 <div style="background-color:ivory;top:20px;left:30px;z-index:3;">3</div>
 <div style="background-color:pink;top:30px;left:10px;z-index:2;">2</div>
 <div style="background-color:azure;top:40px;left:40px;z-index:1;">1</div>

数が大きなものほど前面に表示されます。

表示例

５．５　　段組み

2列以上の列に分けて文字や図などを配列する段組みについて説明します。

属性	説明
column-count	段数
column-width	各段の幅
columns	段組み
column-fill	高さの平均化
column-gap	段の間隔
column-rule-style	段の区切り線の種類
column-rule-color	段の区切り線の色
column-rule-width	段の区切り線の太さ
column-rule	段の区切り線
column-span	段の結合数
break-before	要素前改段
break-after	要素後改段
break-inside	改段禁止

注意

width、column-count、column-width などに矛盾があると、段組みでなくなることがあるようです。

５．５．１段数　(column-count)

段組みの段数を指定します。

ただし、指定した値にかかわらず、実際に表示される段の数は、要素の表示幅やコンテンツの分量に応じて自動的に変わります。

column-count:属性値

段組みの段数を指定する。

属性値	説明
数値	段組みの段数
auto	段数を他の属性から自動的に算出する（規定値）

300px の幅を4段に分けています。

記述例

 <div style="width:300px;column-count:4;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

また、縦書きでも段組ができます。

記述例

 <div style="height:200px;writing-mode:tb-rl;column-count:2;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．２各段の幅　(column-width)

段組みの各段の幅を指定します。

ただし、指定した値にかかわらず、実際に表示される段の幅は、要素の表示幅やコンテンツの分量に応じて自動的に変わります。

column-width:属性値

段組みの各段の幅を指定する。

属性値	説明
数値	段組みの各段の幅（数値＋単位）
auto	段の幅を他の属性から自動的に算出する（規定値）

div 要素で段数ではなく、段の幅を指定しています。段数は段の幅から自動的に決められます。

また、div 要素で width を指定しても、column-width が優先されるようで無視されます。

記述例

 <div style="column-width:100px;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．３段組み　(columns)

段組みの各段の幅と段数を指定します。

ただし、指定した値にかかわらず、実際に表示される段の幅や、段数は、要素の表示幅やコンテンツの分量に応じて自動的に変わります。

columns:属性値属性値

段組みの各段の幅と段数を指定する。

属性値	説明
段の幅	column-width の値
段数	column-count の値

div 要素で段数と段の幅を指定しています。

記述例

 <div style="columns:4 100px;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

幅に余裕があるので指定したとおりに表示されています。また、理解の助けになるように背景色を別途付けています。

表示例

次の例では、段の幅を少し大きく指定しています。

記述例

 <div style="columns:4 140px;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

幅が大きくなりすぎたので段数が少なく表示されています。また、理解の助けになるように背景色を別途付けています。

表示例

５．５．４高さの平均化　(column-fill)

各段の文章を均等に分配し、各段の高さを平均化します。

column-fill:属性値

各段の高さを平均化する。

属性値	説明
balance	各段の高さを平均化する（規定値）
auto	先頭の段から連続してテキストを満たす

一つ目は balance、二つ目は auto で表示します。

div 要素に height を指定しなければどちらも平均的に表示されます。

記述例

 <div style="width:240px;height:200px;column-count:2;column-fill:balance;">
  <p>春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</p>
  <p>夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
 </div>

 <div style="width:240px;height:200px;column-count:2;column-fill:auto;">
  <p>春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</p>
  <p>夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
 </div>

理解の助けになるように文字列や背景色を別途付けています。

表示例

５．５．５段の間隔　(column-gap)

段組みの段と段の間隔を指定します。

column-gap:属性値

段組みの段と段の間隔を指定する。

属性値	説明
normal	ブラウザの設定による。通常、1em の間隔が空く（規定値）
数値	段組みの各段の間隔（数値＋単位）

段と段の間隔を 3em に指定しています。

記述例

 <div style="width:400px;column-count:4;column-gap:3em;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．６段の区切り線の種類　(column-rule-style)

段組みの区切り線の種類を指定します。

column-rule-style:属性値

段組みの区切り線の種類を指定する。

属性値	説明
none	境界線を引かない（規定値）
hidden	境界線を表示しない。none とほぼ同等
dotted	点線
dashed	破線
solid	実線
double	二重線
groove	立体的に窪んだ線
ridge	立体的に隆起した線
inset	ボックス全体が窪んだようにみえる線
outset	ボックス全体が隆起したようにみえる線

区切り線の種類を破線に指定しています。

記述例

 <div style="width:400px;column-count:4;column-gap:3em;column-rule-style:dashed;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．７段の区切り線の色　(column-rule-color)

段組みの区切り線の色を指定します。

column-rule-color:属性値

段組みの区切り線の色を指定する。

属性値	説明
色	色を名称や１６進数で指定する（属性値の色を参照）

区切り線に色を付けています。

記述例

 <div style="width:400px;column-count:4;column-gap:3em;column-rule-style:dashed;
                                                  column-rule-color:yellowgreen;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．８段の区切り線の太さ　(column-rule-width)

段組みの区切り線の色を指定します。

column-rule-width:属性値

段組みの区切り線の太さを指定する。

属性値	説明
数値	段組みの区切り線の太さ（数値＋単位）
thin	細い区切り線（1px）
medium	中くらいの区切り線（3px）（規定値）
thick	太い区切り線（5px）

区切り線の太さを 5px にしています。

記述例

 <div style="width:400px;column-count:4;column-gap:3em;column-rule-style:dashed;
                       column-rule-color:yellowgreen;column-rule-width:5px;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．９段の区切り線　(column-rule)

段組みの区切り線の太さ、種類、色をまとめて指定します。

column-rule:属性値属性値 ...

段組みの区切り線の太さ、種類、色をまとめて指定する。

属性値	説明
太さ	column-rule-width の値
種類	column-rule-style の値
色	column-rule-color の値

区切り線の種類を破線、太さを 5px、色を yellowgreen にしています。

記述例

 <div style="width:400px;column-count:4;column-gap:3em;column-rule:dashed 5px yellowgreen;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．１０段の結合数　(column-span)

段組み表示の際、特定の要素を複数の段にまたがって表示します。

column-span:属性値

特定の要素を複数の段にまたがって表示する。

属性値	説明
none	1つのカラム内に表示（規定値）
all	すべてのカラムにまたがって表示

<h4> 要素を段にまたがって表示しています。

記述例

 <div style="width:400px;column-count:4;column-gap:3em;column-rule-:dashed 5px yellowgreen;">
   <p>春はあけぼの。やうやう白くなりゆく</p>
   <p>夏は夜。月のころはさらなり</p>
   <h4 style="column-span:all;background-color:yellowgreen;">枕草子</h4>
   <p>秋は夕暮れ。夕日のさして山の端いと近くなりたるに</p>
   <p>冬はつとめて。雪の降りたるはいふべきにもあらず</p>
 </div>

理解の助けになるように背景色を別途付けています。

表示例

５．５．１１要素前改段　(break-before)

複数の段における改段を制御しますします。

break-before:属性値

複数の段における改段を制御する。

属性値	説明
auto	ブラウザの判断（規定値）
column	特定の要素の手前で、常に改段する
avoid-column	特定の要素の手前で、改段しないようにする

記述例

 <div style="width:500px;column-count:4;column-gap:1em;column-rule:dashed 5px yellowgreen;">
   <p>春はあけぼの。やうやう白くなりゆく ...</p>
   <p style="break-before:column;">夏は夜</p>
   <p style="break-before:column;">秋は夕暮れ。夕日のさして山の端いと近くなりたるに、烏の寝どころへ行くとて</p>
   <p style="break-before:avoid-column;">冬はつとめて</p>
 </div>
 <br>

 <div style="width:500px;column-count:4;column-gap:1em;column-rule:dashed 5px yellowgreen;">
   <p>春はあけぼの。やうやう白くなりゆく ...</p>
   <p style="break-before:avoid-column;">夏は夜</p>
   <p style="break-before:column;">秋は夕暮れ。夕日のさして山の端いと近くなりたるに、烏の寝どころへ行くとて</p>
   <p style="break-before:avoid-column;">冬はつとめて</p>
 </div>

上側は「夏は夜」が break-before:column なので改段されていますが、下側は break-before:avoid-column なので改段されていません。

表示例

５．５．１２要素後改段　(break-after)

複数の段における改段を制御しますします。

break-after:属性値

複数の段における改段を制御する。

属性値	説明
auto	ブラウザの判断（規定値）
column	特定の要素の後で、常に改段する
avoid-column	特定の要素の後で、改段しないようにする

記述例

 <div style="width:500px;column-count:4;column-gap:1em;column-rule:dashed 5px yellowgreen;">
   <p style="break-after:column;">春はあけぼの。やうやう白くなりゆく ...</p>
   <p style="break-after:column;">夏は夜</p>
   <p style="break-after:avoid-column;">秋は夕暮れ。夕日のさして山の端いと近くなりたるに、烏の寝どころへ行くとて</p>
   <p style="break-after:column;">冬はつとめて</p>
 </div>
 <br>

 <div style="width:500px;column-count:4;column-gap:1em;column-rule:dashed 5px yellowgreen;">
   <p style="break-after:avoid-column;">春はあけぼの。やうやう白くなりゆく ...</p>
   <p style="break-after:column;">夏は夜</p>
   <p style="break-after:avoid-column;">秋は夕暮れ。夕日のさして山の端いと近くなりたるに、烏の寝どころへ行くとて</p>
   <p style="break-after:column;">冬はつとめて</p>
 </div>

上側は「春はあけぼの」が break-after:column なので「夏は夜」が改段されていますが、下側は break-after:avoid-column なので改段されていません。

表示例

５．５．１３改段禁止　(break-inside)

複数の段における改段を制御しますします。

break-inside:属性値

複数の段における改段を制御する。

属性値	説明
auto	ブラウザの判断（規定値）
avoid	改段（印刷時の改ページ）を禁止する
avoid-column	改段を禁止する

記述例

 <div style="width:300px;column-count:2;column-fill:balance;column-gap:1em;
                                   column-rule:dashed 5px yellowgreen;">
   <p>春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
   <p>夏は夜</p>
 </div>
 <br>

 <div style="width:300px;column-count:2;column-fill:balance;column-gap:1em;
                                   column-rule:dashed 5px yellowgreen;">
   <p style="break-inside:avoid-column;">春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
   <p>夏は夜</p>
 </div>

下側は「春はあけぼの～細くたなびきたる。」が break-inside:avoid-column なので改段されません。

表示例

５．６　　フレックスボックス

フレックスボックスについて説明します。

フレックスボックスを用いて、コンテンツを列方向や行方向に並べることができます。並べる要素をフレックスアイテム、それを包含する要素をフレックスコンテナと呼びます。display に flex を指定することでフレックスコンテナを作成します。フレックスコンテナの子要素はフレックスアイテムとして扱われます。

フレックスコンテナ: 「フレックスボックス」モデルを使うためには必ずフレックスコンテナが必要です。フレックスコンテナの中にはフレックスアイテムと呼ばれる複数の子要素を含みます。スタイルシートで、display:flex と指定すれば、要素をフレックスコンテナとして定義することができます。
フレックスアイテム: フレックスコンテナの子要素のことです。特にスタイルシートで指定することはありません。

属性	説明
flex-direction	配置方法
flex-wrap	表示方法
flex-flow	表示配置方法
flex-grow	伸長係数
flex-shrink	圧縮係数
flex-basis	幅・高さ
flex	伸長・圧縮係数
order	配置順序
align-content	アイテムの行方向の位置と間隔
justify-content	アイテムの列方向の位置と間隔
align-items	全アイテムの行方向の位置
align-self	アイテムごとの行方向の位置

５．６．１配置方法　(flex-direction)

フレックスアイテムの配置方法を指定します。

flex-direction:属性値

フレックスアイテムの配置方法を指定する。

属性値	説明
row	各ボックスをコンテンツの書字方向に沿って列方向に配置する（規定値）
row-reverse	各ボックスをコンテンツの書字方向と逆向きに列方向に配置する
column	各ボックスをコンテンツの書字方向に沿って行方向に配置する
column-reverse	各ボックスをコンテンツの書字方向と逆向きに行方向に配置する

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
  }
  div.flex {
    width:100px;
    border:solid 1px lightgrey;
    text-align:center;
  }

ボディ
 <div class="flexContainer" style="">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:row-reverse;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column-reverse;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

理解の助けになるように文字列を別途表示しています。

表示例

５．６．２表示方法　(flex-wrap)

フレックスアイテムの表示方法を指定します。

flex-wrap:属性値

フレックスアイテムの表示方法を指定する。

属性値	説明
nowrap	はみ出しても一列に並べて表示する（規定値）
wrap	複数行(列)に改行して表示する
wrap-reverse	逆方向に改行して表示する

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
    height:50px;
  }
  div.flex {
    width:100px;
    height:20px;
    border:solid 1px lightgrey;
    text-align:center;
  }

ボディ
 <div class="flexContainer" style="flex-wrap:nowrap;width:250px;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-wrap:wrap;width:250px;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-wrap:wrap-reverse;width:250px;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>


 <div class="flexContainer" style="flex-direction:column;flex-wrap:nowrap;width:204px;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;flex-wrap:wrap;width:204px;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;flex-wrap:wrap-reverse;width:204px;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

nowrap でははみ出すのではなく、はみ出さないようにフレックスアイテムの幅や高さが調整されるようです。ただし、フレックスアイテムの幅や高さは最小でも文字列が表示される大きさまでにしかならないので、フレックスコンテナからフレックスアイテムがはみ出て表示されこともあります。

なお、理解の助けになるように文字列を別途表示しています。

表示例

５．６．３表示配置方法　(flex-flow)

フレックスアイテムの配置方法と表示方法を指定します。

flex-flow:配置方法表示方法

フレックスアイテムの配置方法と表示方法を指定する。

属性値	説明
配置方法	flex-direction の値
表示方法	flex-wrap の値

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
    width:250px;
    height:50px;
  }
  div.flex {
    width:100px;
    height:20px;
    border:solid 1px lightgrey;
    text-align:center;
  }

ボディ
 <div class="flexContainer" style="flex-flow:row nowrap;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-flow:row wrap;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-flow:row wrap-reverse;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>


 <div class="flexContainer" style="flex-flow:column nowrap;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-flow:column wrap;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-flow:column wrap-reverse;">
   <div class="flex" style="background-color:ivory;">A</div>
   <div class="flex" style="background-color:pink;">B</div>
   <div class="flex" style="background-color:azure;">C</div>
 </div>

なお、理解の助けになるように文字列を別途表示しています。

表示例

５．６．４伸長係数　(flex-grow)

フレックスアイテムの伸長係数を指定します。

フレックスアイテムの幅や高さ（flex-basis）の合計が、フレックスコンテナのコンテンツ領域の幅や高さに達しない場合に、伸長係数に従い、フレックスアイテムが伸長されます。

つまり、フレックスアイテムの flex-basis の合計とフレックスコンテナのコンテンツ領域の幅や高さとの差が flex-grow の割合で分けられ、それぞれのフレックスアイテムの幅や高さに加算されます。

flex-grow:属性値

フレックスボックスの伸長係数を指定する。

属性値	説明
数値	伸長係数に従って横幅を伸長し表示する（規定値：0）

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
  }
  div.flex {
    border:solid 1px lightgrey;
    text-align:center;
  }
  div.item {
    border:solid 1px lightgrey;
    text-align:center;
    flex-basis: 100px;
  }
  div.flexC {
    border:solid 1px lightgrey;
    text-align:center;
    flex-basis: 30px;
  }

ボディ
 <div class="flexContainer" style="width:600px;">
   <div class="item" style="flex-grow:2;background-color:ivory;">A</div>
   <div class="item" style="flex-grow:1;background-color:pink;">B</div>
   <div class="item" style="flex-grow:3;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;height:180px;">
   <div class="flexC" style="flex-grow:2;background-color:ivory;">A</div>
   <div class="flexC" style="flex-grow:1;background-color:pink;">B</div>
   <div class="flexC" style="flex-grow:3;background-color:azure;">C</div>
 </div>

flex-direction:row の例では、フレックスコンテナの幅が 600px、各フレックスアイテムの flex-basis が 100px としているので、その差 600px - (100px × 3) = 300px を（A:2、B:1、C:3）の割合で分けた（A:100px、B:50px、C:150px）が各フレックスアイテムの flex-basis に加算され、（A:200px、B:150px、C:250px）になります。

flex-direction:column の例では、フレックスコンテナの高さが 180px、各フレックスアイテムの flex-basis が 30px しているので、その差 180px - (30px × 3) = 90px を（A:2、B:1、C:3）の割合で分けた（A:30px、B:15px、C:45px）が各フレックスアイテムの flex-basis に加算され、（A:60px、B:45px、C:75px）になります。

なお、理解の助けになるように文字列などを別途表示しています。

表示例

５．６．５圧縮係数　(flex-shrink)

フレックスアイテムの圧縮係数を指定します。

フレックスアイテムの幅や高さの合計が、フレックスコンテナのコンテンツ領域の幅や高さを超える場合に、圧縮係数に従い、フレックスアイテムが圧縮されます。

つまり、フレックスアイテムの flex-basis の合計とフレックスコンテナのコンテンツ領域の幅や高さとの差が flex-grow の割合で分けられ、それぞれのフレックスアイテムの幅や高さから減算されます。

flex-shrink:属性値

フレックスアイテムの圧縮係数を指定する。flex-wrap:nowrap と同時に使用する必要がある。

属性値	説明
数値	圧縮係数に従って横幅を圧縮し表示する（規定値：1）

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
  }
  div.flex {
    border:solid 1px lightgrey;
    text-align:center;
  }
  div.item {
    border:solid 1px lightgrey;
    text-align:center;
    flex-basis: 300px;
  }
  div.flexC {
    border:solid 1px lightgrey;
    text-align:center;
    flex-basis: 90px;
  }

ボディ
 <div class="flexContainer" style="width:600px;">
   <div class="item" style="flex-shrink:2;background-color:ivory;">A</div>
   <div class="item" style="flex-shrink:1;background-color:pink;">B</div>
   <div class="item" style="flex-shrink:3;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;height:180px;">
   <div class="flexC" style="flex-shrink:2;background-color:ivory;">A</div>
   <div class="flexC" style="flex-shrink:1;background-color:pink;">B</div>
   <div class="flexC" style="flex-shrink:3;background-color:azure;">C</div>
 </div>

flex-direction:row の例では、フレックスコンテナの幅が 600px、各フレックスアイテムの flex-basis が 300px としているで、その差 (300px × 3) - 600px = 300px を（A:2、B:1、C:3）の割合で分けた（A:100px、B:50px、C:150px）が各フレックスアイテムの flex-basis から減算され、（A:200px、B:250px、C:150px）になります。

flex-direction:column の例では、フレックスコンテナの高さが 180px、各フレックスアイテムの flex-basis が 90px としているで、その差 (90px × 3) - 180px = 90px を（A:2、B:1、C:3）の割合で分けた（A:30px、B:15px、C:45px）が各フレックスアイテムの flex-basis から減算され、（A:60px、B:75px、C:45px）になります。

なお、理解の助けになるように文字列などを別途表示しています。

表示例

５．６．６幅・高さ　(flex-basis)

フレックスアイテムの幅や高さを指定します。flex-grow、frex-shrink を指定した場合はその初期値となります。

flex-basis:属性値

フレックスアイテムの幅や高さを指定する。

属性値	説明
auto	幅や高さを自動的に計算（規定値）
content	幅や高さをコンテンツの幅や高さから決定
数値	幅や高さ（数値＋単位）

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
  }
  div.flex {
    border:solid 1px lightgrey;
    text-align:center;
  }

ボディ
 <div class="flexContainer" style="height:30px;">
   <div class="flex" style="flex-basis:100px;background-color:ivory;">A</div>
   <div class="flex" style="flex-basis:50px;background-color:pink;">BBBBBBB</div>
   <div class="flex" style="flex-basis:200px;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;width:100px;">
   <div class="flex" style="flex-basis:20px;background-color:ivory;">A</div>
   <div class="flex" style="flex-basis:10px;background-color:pink;">B</div>
   <div class="flex" style="flex-basis:40px;background-color:azure;">C</div>
 </div>

flex-basis で指定されたフレックスアイテムの幅や高さで表示されます。ただし、以外では、フレックスアイテムの幅や高さは最小でも文字列が表示される大きさまでにしかならないので、他のフレックスアイテムの幅や高さが狭められたり、フレックスコンテナからフレックスアイテムがはみ出て表示されたりすることもあります。

表示例

５．６．７伸長・圧縮係数　(flex)

フレックスアイテムの伸長・圧縮係数を指定します。

flex:伸長係数圧縮係数初期値

フレックスアイテムの伸長・圧縮係数を指定する。

属性値	説明
伸長係数	flex-grow の値
圧縮係数	flex-shrink の値
初期値	flex-basis の値

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
  }
  div.flex {
    border:solid 1px lightgrey;
    text-align:center;
  }
  div.item {
    border:solid 1px lightgrey;
    text-align:center;
  }
  div.flexC {
    border:solid 1px lightgrey;
    text-align:center;
  }

ボディ
 <div class="flexContainer" style="width:450px;">
   <div class="item" style="flex:2 3 100px;background-color:ivory;">A</div>
   <div class="item" style="flex:1 2 100px;background-color:pink;">B</div>
   <div class="item" style="flex:3 1 100px;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="width:150px;">
   <div class="item" style="flex:2 3 100px;background-color:ivory;">A</div>
   <div class="item" style="flex:1 2 100px;background-color:pink;">B</div>
   <div class="item" style="flex:3 1 100px;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="width:300px;">
   <div class="item" style="flex:2 3 100px;background-color:ivory;">A</div>
   <div class="item" style="flex:1 2 100px;background-color:pink;">B</div>
   <div class="item" style="flex:3 1 100px;background-color:azure;">C</div>
 </div>


 <div class="flexContainer" style="flex-direction:column;width:100px;height:180px;">
   <div class="flexC" style="flex:2 3 30px;background-color:ivory;">A</div>
   <div class="flexC" style="flex:1 2 30px;background-color:pink;">B</div>
   <div class="flexC" style="flex:3 1 30px;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;width:100px;height:120px;">
   <div class="flexC" style="flex:2 3 60px;background-color:ivory;">A</div>
   <div class="flexC" style="flex:1 2 60px;background-color:pink;">B</div>
   <div class="flexC" style="flex:3 1 60px;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;width:100px;height:90px;">
   <div class="flexC" style="flex:2 3 30px;background-color:ivory;">A</div>
   <div class="flexC" style="flex:1 2 30px;background-color:pink;">B</div>
   <div class="flexC" style="flex:3 1 30px;background-color:azure;">C</div>
 </div>

フレックスアイテムの幅や高さの計算方法は、flex-grow、frex-shrink を参照してください。

また、初期値は伸長・圧縮がない状態です。

なお、理解の助けになるように文字列などを別途表示しています。

表示例

５．６．８配置順序　(order)

フレックスアイテムの表示する順序を指定します。

order:属性値

フレックスアイテムの表示する順序を指定する。

属性値	説明
数値	指定した数字の小さな方から表示される（規定値：0）

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    background-color:lightgrey;
  }
  div.flex {
    width:100px;
    border:solid 1px lightgrey;
    text-align:center;
  }

ボディ
 <div class="flexContainer" style="">
   <div class="flex" style="order:3;background-color:ivory;">A</div>
   <div class="flex" style="order:1;background-color:pink;">B</div>
   <div class="flex" style="order:2;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:row-reverse;">
   <div class="flex" style="order:3;background-color:ivory;">A</div>
   <div class="flex" style="order:1;background-color:pink;">B</div>
   <div class="flex" style="order:2;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column;">
   <div class="flex" style="order:3;background-color:ivory;">A</div>
   <div class="flex" style="order:1;background-color:pink;">B</div>
   <div class="flex" style="order:2;background-color:azure;">C</div>
 </div>

 <div class="flexContainer" style="flex-direction:column-reverse;">
   <div class="flex" style="order:3;background-color:ivory;">A</div>
   <div class="flex" style="order:1;background-color:pink;">B</div>
   <div class="flex" style="order:2;background-color:azure;">C</div>
 </div>

row、column では B、C、A の順、row-reverse、column-reverse ではその逆順に並びます。

理解の助けになるように文字列を別途表示しています。

表示例

５．６．９アイテム位置

（１）アイテムの行方向の位置と間隔　(align-content)

フレックスコンテナに指定して、行方向のフレックスアイテムの表示位置を定義します。

また、行方向には横に並ぶフレックスアイテムの最大の高さに合わせて広がって表示されるようです。

align-content:属性値

フレックスコンテナに指定して、行方向のフレックスアイテムの表示位置を定義する。

属性値	説明
flex-start	フレックスコンテナの先頭（上側や左側）に詰めて配置される（規定値）
flex-end	フレックスコンテナの末尾（下側や右側）に詰めて配置される
center	フレックスコンテナの行方向の中心に配置される
space-between	フレックスコンテナ全体へ均等に配置される。先頭と末尾は詰めて配置される。
space-around	フレックスコンテナ全体へ均等に配置される。先頭と末尾にはアイテム間の大きさの半分のスペースが入る。
space-evenly	フレックスコンテナ全体へ均等に配置される。先頭と末尾にはアイテム間と同じ大きさのスペースが入る。
stretch	フレキシブルアイテムの高さをフレックスコンテナの高さあるいは幅全体に広げる

（注）先頭・末尾とは、flex-direction 属性が column のときは左右方向、row のときはに上下方向になります。

（注）フレキシブルアイテムの先頭が上側や左側、末尾が下側や右側になるかどうかは direction 属性などで決まります。

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    flex-wrap:wrap;
    background-color:lightgrey;
    background-color:lightyellow;
    width:150px;
    height:90px;
  }
  div.item {
    border:solid 1px lightgrey;
    background-color:lightcyan;
    font-size: 12px;
  }

ボディ
 <div class="flexContainer" style="align-content:flex-start;">
  <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
  <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
 </div>

 <div class="flexContainer" style="align-content:center;">
  <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
  <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
 </div>

 <div class="flexContainer" style="align-content:flex-end;">
  <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
  <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
 </div>

 <div class="flexContainer" style="align-content:space-between;">
  <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
  <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
 </div>

 <div class="flexContainer" style="align-content:space-around;">
   <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
   <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
 </div>

 <div class="flexContainer" style="align-content:space-evenly;">
  <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
  <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
 </div>

  <div class="flexContainer" style="align-content:stretch;">
   <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
   <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
  </div>

なお、理解の助けになるように文字列を別途表示しています。

表示例

しかし、フレックスコンテナに flex-direction:column が指定されていると列方向の表示位置の指定になるようです。

そのときのアイテムの幅は、縦に並ぶ最大のアイテムの幅に合わせるようです。

ただし、stretch はアイテムに width 属性が指定されていると広がって表示されません（下の例ではアイテムに width 属性が指定されていません）。

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    border:solid 1px lightgrey;
    background-color:lightgrey;
    width:160px;
    height:70px;
  }
  div.item {
    border:solid 1px lightgrey;
    background-color:ivory;
    font-size: 12px;
  }

表示例

（２）アイテムの列方向の位置と間隔　(justify-content)

フレックスコンテナに指定して、列方向のフレックスアイテムの表示位置を定義します。

また、行方向にはフレックスコンテナの高さに合わせて広がって表示されるようです。

justify-content:属性値

フレックスコンテナに指定して、列方向のフレックスアイテムの表示位置を定義する。

属性値	説明
flex-start	フレックスコンテナの先頭（上側や左側）に詰めて配置される（規定値）
flex-end	フレックスコンテナの末尾（下側や右側）に詰めて配置される
center	フレックスコンテナの中央に詰めて配置される
space-between	フレックスコンテナ全体へ均等に配置される。先頭と末尾は詰めて配置される。
space-around	フレックスコンテナ全体へ均等に配置される。先頭と末尾にはフレックスアイテムの間隔の半分の間隔が空く。
space-evenly	フレックスコンテナ全体へ均等に配置される。先頭と末尾にはフレックスアイテムの間隔と同じ間隔が空く。

（注）先頭・末尾とは、flex-direction 属性が column のときは左右方向、row のときはに上下方向になります。

（注）フレキシブルアイテムの先頭が上側や左側、末尾が下側や右側になるかどうかは direction 属性などで決まります。

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    flex-wrap:wrap;
    border:solid 1px lightgrey;
    background-color:lightyellow;
    width:150px;
    height:60px;
  }
  div.flex {
    border:solid 1px lightgrey;
    background-color:lightcyan;
    font-size: 12px;
  }

ボディ
<div class="flexContainer" style="justify-content:flex-start;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="justify-content:center;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="justify-content:flex-end;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="justify-content:space-between;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="justify-content:space-around;">
  <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
  <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="justify-content:space-evenly;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

理解の助けになるように文字列を別途表示しています。

表示例

しかし、フレックスコンテナに flex-direction:row が指定されていると行方向の表示位置の指定になるようです。

ただし、フレックスアイテムの高さは、内容を表示するのに必要な最小限の高さで表示されるようです。

記述例

スタイルシート
  div.flexContainer {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    border:solid 1px lightgrey;
    background-color:lightyellow;
    width:150px;
    height:60px;
  }
  div.item {
    border:solid 1px lightgrey;
    background-color:ivory;
    font-size: 12px;
  }

表示例

（３）全アイテムの行方向の位置　(align-items)

フレックスコンテナに指定して、フレックスアイテムの行方向の表示位置を定義します。

また、フレックスアイテムの高さは、内容を表示するのに必要な最小限の高さで表示されるようです。

align-items:属性値

フレックスコンテナに指定して、フレックスアイテムの行方向の表示位置を定義する。

属性値	説明
flex-start	フレキシブルアイテムの先頭（上側や左側）を揃えて配置される（規定値）
flex-end	フレキシブルアイテムの末尾（下側や右側）を揃えて配置される
center	フレキシブルアイテムの高さの中心を揃えて配置される

（注）先頭・末尾とは、flex-direction 属性が column のときは左右方向、row のときはに上下方向になります。

（注）フレキシブルアイテムの先頭が上側や左側、末尾が下側や右側になるかどうかは direction 属性などで決まります。

記述例

スタイルシート
div.flexContainer {
  display:flex;
  flex-wrap:wrap;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
  height:80px;
}
div.item {
  border:solid 1px lightgrey;
  background-color:lightcyan;
  font-size: 12px;
}

ボディ
<div class="flexContainer" style="align-items:flex-start;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="align-items:center;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer" style="align-items:flex-end;">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

なお、理解の助けになるように文字列を別途表示しています。

表示例

しかし、フレックスコンテナに flex-direction:row が指定されていると列方向の表示位置の指定になるようです。

記述例

スタイルシート
div.flexContainer {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  border:solid 1px lightgrey;
  background-color:lightgrey;
  width:150px;
  height:60px;
}
div.item {
  border:solid 1px lightgrey;
  background-color:ivory;
  font-size: 12px;
}

表示例

（４）アイテムごとの行方向の位置　(align-self)

フレックスアイテムに指定して、行方向の表示位置を定義します。

また、フレックスアイテムの高さは、内容を表示するのに必要な最小限の高さで表示されるようです。

align-self:属性値

フレックスアイテムに指定して、フレックスアイテムの行方向の表示位置を定義する。

属性値	説明
flex-start	フレキシブルアイテムの先頭（上側や左側）を揃えて配置される（規定値）
flex-end	フレキシブルアイテムの末尾（下側や右側）を揃えて配置される
center	フレキシブルアイテムの高さの中心を揃えて配置される
stretch	フレキシブルアイテムの高さをフレックスコンテナの高さあるいは幅全体に広げる

（注）先頭・末尾とは、flex-direction 属性が column のときは左右方向、row のときはに上下方向になります。

（注）フレキシブルアイテムの先頭が上側や左側、末尾が下側や右側になるかどうかは direction 属性などで決まります。

記述例

スタイルシート
div.flexContainer {
  display:flex;
  flex-wrap:wrap;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
  height:80px;
}
div.item {
  border:solid 1px lightgrey;
  background-color:white;
  font-size: 12px;
}
div.item[style*="align-self"] {
  background-color:lightcyan;
}

ボディ
<div class="flexContainer">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item" style="align-self:flex-start;">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item" style="align-self:center;">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item" style="align-self:flex-end;">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

<div class="flexContainer">
 <div class="item">AAA</div><div class="item">BBBBBBB<br>BBB</div>
 <div class="item" style="align-self:stretch;">CC<br>CCCCCCCC<br>CCC</div><div class="item">DDDDDD</div>
</div>

なお、理解の助けになるように文字列を別途表示しています。

表示例

しかし、フレックスコンテナに flex-direction:row が指定されていると列方向の表示位置の指定になるようです。

記述例

スタイルシート
div.flexContainer {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  border:solid 1px lightgrey;
  background-color:lightgrey;
  width:150px;
  height:60px;
}
div.item {
  border:solid 1px lightgrey;
  background-color:white;
  font-size: 12px;
}
div.item[style*="align-self"] {
  background-color:ivory;
}

表示例

５．７　　グリッド

列と行からなる２次元のグリッドを定義します。

グリッドは、グリッド全体を囲むコンテナとコンテナの子要素となるアイテムから構成されます。

グリッドコンテナ: グリッドコンテナを作成するには、要素に対して display 属性の値として grid を指定します。グリッドコンテナを作成すると、すべての直接の子要素がグリッドアイテムへと変わります。
グリッドアイテム: グリッドコンテナの子要素のことです。特にスタイルシートで指定することはありません。

また、グリッドを分ける垂直および水平の線をラインといいます。ラインはグリッドの上下左右それぞれの両端にも存在します。グリッドの上あるいは左から順に１から番号が振られています。同時に、下あるいは右からは－１から順に負の番号も振られています。

そして、垂直および水平のラインで区切られた最小単位をセルといい、垂直や水平一列の（端から端までの）セルの集合をトラックといいます。

セルの集まりはエリアといい、ID を付けたりグリッドアイテムを配置したりすることができます。ただし、エリアは矩形でなければならず、たとえば L字型のような形を定義することはできません。

属性	説明
grid-template-rows	グリッドトラックの行方向サイズ
grid-template-columns	グリッドトラックの列方向サイズ
grid-template-areas	グリッドエリアと名称
grid-template	グリッドエリア
grid-row-start、grid-row-end、grid-row	グリッドエリアの行方向開始・終了位置
grid-column-start、grid-column-end、grid-column	グリッドエリアの列方向開始・終了位置
grid-area	グリッドエリアの開始・終了位置
grid-auto-flow	グリッドエリアの自動配置
order	配置順序
grid-auto-rows	行方向の拡張トラック
grid-auto-columns	列方向の拡張トラック
grid-row-gap	グリッドの行方向の隙間
grid-column-gap	グリッドの列方向の隙間
grid-gap	グリッドの隙間
align-content	コンテナ内での全エリアの行方向の位置
justify-content	コンテナ内での全エリアの列方向の位置
align-items	トラック内での全エリアの行方向の位置
justify-items	トラック内での全エリアの列方向の位置
align-self	エリアごとの行方向の位置
justify-self	エリアごとの列方向の位置

５．７．１トラックとエリア

グリッドトラックのサイズやエリアの名称を指定します。

（１）グリッドトラックの行方向サイズ　(grid-template-rows)

グリッドトラックの行方向のサイズリストを指定する際に使用します。

grid-template-rows:トラックリスト

トラックの行方向のサイズを指定する。

トラックリスト	説明
none	グリッドトラックは作成されない（規定値）
ライン名サイズの繰り返し（空白区切り）	ライン名はラインの名称を [　] で囲む。ライン名は同じ名前があってもよいし、[ ] を含めて省略することもできる。

サイズ
サイズ	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%
フレックス係数	フレックス係数の総計に対する割合を fr を付けて指定（注１）	1fr 3fr 2fr ならば 1:3:2
max-content	内容に合わせた、できるだけ大きいサイズ（内容は折れ曲がらない）（注２）	max-content
min-content	内容に合わせた、できるだけ小さいサイズ（内容が折れ曲がることがある）（注２）	min-content
minmax(min, max)	取りうる最小値（min）と最大値（max）を指定（注２）	minmax(100px, 1fr)　100px と 1fr との間で可変
fit-content()	内容に合わせたサイズとなるよう指定（注２）
repeat(繰り返し回数 \| auto-fill \| auto-fit ,トラックリスト)	繰り返しパターンを指定	repeat(3, 40px 1fr)　40px と 1fr を３回繰り返す

（注１）grid-template-rows では fr 指定の中の最小値あるいは最大値を持つトラックの高さにあわせて決まる
（注２）grid-template-rows では機能しない（？）

トラックを３つ指定し、上からその幅を 30px、50px、20px にしています。

また、ラインに名前をつけています。一番上には first と header と２つの名前をつけていて、以下 body、footer、last と付けています。

なお、オレンジの文字と線は説明のために別途表示しています。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template-rows:[first header] 30px [body] 50px [footer] 20px [last];width:200px;">
   <div class="area" style="background-color:lightyellow;">ヘッダー</div>
   <div class="area" style="background-color:white;">ボディ</div>
   <div class="area" style="background-color:lightyellow;">フッター</div>
 </div>

表示例

1fr が指定されているトラックと 3fr が指定されているトラックとは、高さが 1 対 3 になります。

左の例は、テキストをすべて表示しようとすると 1fr のトラックは最低で２行分、3fr のトラックは最低で３行分必要となるので、1 対 3 の割合に合わせると２行分と６行分の高さになります。

右の例は、テキストをすべて表示しようとすると 1fr のトラックは最低で１行分、3fr のトラックは最低で９行分必要となるので、1 対 3 の割合に合わせると３行分と９行分の高さになります。

また、minmax は最大値である 50px がとられているようです。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  border-radius:5px;
}

ボディ
 <div class="container" style="grid-template-rows:30px 1fr 3fr minmax(20px, 50px);">
   <div class="area" style="background-color:lightyellow;">A</div>
   <div class="area" style="background-color:white;">B<br>B</div>
   <div class="area" style="background-color:white;">C<br>C<br>C</div>
   <div class="area" style="background-color:lightyellow;">D</div>
 </div>

 <div class="container" style="grid-template-rows:30px 1fr 3fr minmax(20px, 50px);">
   <div class="area" style="background-color:lightyellow;">A</div>
   <div class="area" style="background-color:white;">B</div>
   <div class="area" style="background-color:white;">C<br>C<br>C<br>C<br>C<br>C<br>C<br>C<br>C</div>
   <div class="area" style="background-color:lightyellow;">D</div>
 </div>

表示例

grid-template-rows と grid-template-columns を指定すると、２次元のグリッドを作成することができます。

表示例は、grid-template-columns を参照してください。

（２）グリッドトラックの列方向サイズ　(grid-template-columns)

グリッドトラックの列方向のサイズリストを指定する際に使用します。

grid-template-columns:トラックリスト

トラックの列方向のサイズを指定する。

トラックリスト	説明
none	グリッドトラックは作成されない（規定値）
ライン名サイズの繰り返し（空白区切り）	ライン名はラインの名称を [　] で囲む。ライン名は同じ名前があってもよいし、[ ] を含めて省略することもできる。

サイズ
サイズ	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%
フレックス係数	フレックス係数の総計に対する割合を fr を付けて指定（注）	1fr 3fr 2fr ならば 1:3:2
max-content	内容に合わせた、できるだけ大きいサイズ（内容は折れ曲がらない）	max-content
min-content	内容に合わせた、できるだけ小さいサイズ（内容が折れ曲がることがある）	min-content
minmax(min, max)	取りうる最小値（min）と最大値（max）を指定	minmax(100px, 1fr)　100px と 1fr との間で可変
fit-content()	内容に合わせたサイズとなるよう指定
repeat(繰り返し回数 \| auto-fill \| auto-fit ,トラックリスト)	繰り返しパターンを指定	repeat(3, 40px 1fr)　40px と 1fr を３回繰り返す

（注）grid-template-columns では fr 指定の割合によって幅が決まる。
　　　ただし、テキストが表示される最小の幅までしか狭まらないので、それ以降は割合は正しくなくなる

トラックを３つ指定し、左からその幅を 50px、200px、100px にしています。

また、ラインに名前をつけています。一番左には first と header と２つの名前を付けていて、続いて body、footer、last と付けています。

なお、オレンジの文字と線は説明のために別途表示しています。

記述例

スタイルシート
div.contair {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template-columns:[first header] 50px [body] 200px [footer] 100px [last];">
   <div class="area" style="background-color:lightyellow;">ヘッダー</div>
   <div class="area" style="background-color:white;">ボディ</div>
   <div class="area" style="background-color:lightyellow;">フッター</div>
 </div>

表示例

1fr が指定されているトラックと 3fr が指定されているトラックとは、幅が 1 対 3 になります。

ただし、最小でもテキストがすべて表示される幅が取られるので、その時点では割合は 1 対 3 ではなくなります。

また、minmax は幅が最小でも 100px、最大でも 300px にしかなりません。その範囲の中で可変となります。

記述例

スタイルシート
div.contair {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template-columns:100px 1fr 3fr minmax(100px, 300px);">
   <div class="area" style="background-color:lightyellow;">A</div>
   <div class="area" style="background-color:white;">BBB</div>
   <div class="area" style="background-color:lightyellow;">CC</div>
   <div class="area" style="background-color:lightyellow;">D</div>
 </div>

 <div class="container" style="grid-template-columns:100px 1fr 3fr minmax(100px, 300px);">
   <div class="area" style="background-color:lightyellow;">A</div>
   <div class="area" style="background-color:white;">BB</div>
   <div class="area" style="background-color:lightyellow;">CCCCCCCCCCCCCCCC</div>
   <div class="area" style="background-color:lightyellow;">D</div>
 </div>

表示例

grid-template-columns と grid-template-rows を指定すると、２次元のグリッドを作成することができます。

記述例

スタイルシート
div.contair {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}
div.h {
  background-color: lightyellow;
}
div.s {
  background-color: lightcyan;
}

ボディ
 <div class="container" style="grid-template-columns:100px 1fr 2fr 2fr 50px
                               grid-template-rows:20px repeat(4, 30px) 50px;">
   <div class="area h">&nbsp;</div><div class="area h">A</div><div class="area h">B</div><div class="area h">C</div><div class="area h">D</div>
   <div class="area">1</div><div class="area">A1</div><div class="area">B1</div><div class="area">C1</div><div class="area">D1</div>
   <div class="area">2</div><div class="area">A2</div><div class="area">B2</div><div class="area">C2</div><div class="area">D2</div>
   <div class="area">3</div><div class="area">A3</div><div class="area">B3</div><div class="area">C3</div><div class="area">D3</div>
   <div class="area">4</div><div class="area">A4</div><div class="area">B4</div><div class="area">C4</div><div class="area">D4</div>
   <div class="area s">5</div><div class="area s">A4</div><div class="area s">B5</div><div class="area s">C5</div><div class="area s">D5</div>
 </div>

表示例

（３）グリッドエリアと名称　(grid-template-areas)

グリッドエリアを作って、それぞれに名称を指定します。

grid-template-areas:トラックリスト

トラックの列方向のサイズを指定する。

トラックリスト	説明
none	エリア名を指定しない（規定値）
行ごとのエリア名の繰り返し（空白区切り）	セル数分の空白区切りのエリア名を、" か ' で囲って行ごとに指定する。同じ名前を指定したセルは一続きのひとつのエリアとなる。

エリアを作成すると、エリアを区切るラインに自動的に名前が付けられます。エリアの開始線がエリア名-start、終了線がエリア名-end になります。したがって、ひとつのラインに複数の名前が付けられることになります。

下の例では、grid-template-columns で列を２としていますので '' の中に２つの名称が必要です。また、grid-template-rows で行を３としていますので、それが３行分必要となります。

そして、２列に同じ名前の付けられている header や footer は２列分が１つのエリアとされ、それぞれ名前が付けられます。別々の名前が付けられている main と side はひとつのセルがひとつのエリアとされます。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template-columns:200px 100px;
                               grid-template-rows:20px 100px 30px;
                               grid-template-areas:'header header' 'main side' 'footer footer';">
   <div class="area" style="grid-column:1/3;background-color:lightyellow;">ヘッダー</div>
   <div class="area" style="grid-column:1/2;background-color:white;">メイン</div>
   <div class="area" style="grid-column:2/3;background-color:lightcyan;">サイド</div>
   <div class="area" style="grid-column:1/3;background-color:lightyellow;">フッター</div>
 </div>

表示例

（４）グリッドエリア　(grid-template)

グリッドエリアを作って、それぞれのサイズや名称を指定します。

grid-template:トラックリスト

トラックの列方向のサイズを指定する。

トラックリスト	説明
none	エリアを指定しない（規定値）
行ごとのエリア名（空白区切り）行サイズの繰り返し [/ 列サイズ（空白区切り）]	" か ' で囲んだ、セル数分のエリア名と、行サイズを、行ごとに指定する。また、/ に続いて列サイズを列ごとに指定することもできる。

以下は、grid-template-areas の例とまったく同じ結果になるように指定した例です。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:'header header' 20px
                                             'main side' 100px
                                             'footer footer' 30px
                                             / 200px 100px;">
   <div class="area" style="grid-column:1/3;background-color:lightyellow;">ヘッダー</div>
   <div class="area" style="grid-column:1/2;background-color:white;">メイン</div>
   <div class="area" style="grid-column:2/3;background-color:lightcyan;">サイド</div>
   <div class="area" style="grid-column:1/3;background-color:lightyellow;">フッター</div>
 </div>

表示例

エリア名を指定しないこともできます。

その場合、エリア名の指定が必要なときはその後に grid-template-areas で指定します。

（エリア名の指定がない grid-template を指定した時点で、それ以前に grid-template-areas が記述されていたとしても、その指定がリセットされてしまうようなので、grid-template-areas は後に記述します。）

以下は、grid-template-areas の例とまったく同じ結果になるように指定した例です。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:20px 100px 30px / 200px 100px;
                               grid-template-areas:'header header' 'main side' 'footer footer';">
   <div class="area" style="grid-column:1/3;background-color:lightyellow;">ヘッダー</div>
   <div class="area" style="grid-column:1/2;background-color:white;">メイン</div>
   <div class="area" style="grid-column:2/3;background-color:lightcyan;">サイド</div>
   <div class="area" style="grid-column:1/3;background-color:lightyellow;">フッター</div>
 </div>

表示例

５．７．２アイテムの配置位置

グリッドアイテムの開始・終了位置やスパン（連続するセルの数）をエリアとなる要素に指定します。

（１）グリッドエリアの行方向開始・終了位置　(grid-row-start、grid-row-end、grid-row)

グリッドエリアの行方向の開始位置、終了位置やスパン（連続するセルの数）を指定します。

grid-row-start:属性値、grid-row-end:属性値

グリッドエリアの行方向の開始・終了位置やスパン（連続するセルの数）を指定する。

開始・終了位置をラインの番号で指定する。したがって、後ろから振られているマイナス値も指定できる。

属性値	説明
auto	自動（規定値）
ライン番号	開始ライン番号あるいは終了ライン番号
span セル数	連続するセルの数

２のエリアはラインの２から４までを連続した領域として、４のエリアはラインの４で終わる３つのセルが連続した領域として、また６のエリアはラインの３から始まる２つのセルが連続した領域として取られています。ただし、連続した領域がどこに配置されるかは自動的に決まります。

なお、エリアは、デフォルトでは列方向に順に配置されます。そして、必要に応じて新しい行が追加されます。行方向に変えるには、grid-auto-flow で設定しまます。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:30px 30px 30px 30px / 100px 100px 100px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-row-start:2; grid-row-end:4;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-row-start:span 3; grid-row-end:4;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-row-start:3; grid-row-end:span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>

表示例

グリッドエリアの行方向の開始位置、終了位置をまとめて指定することもできます。

grid-row:属性値

グリッドエリアの行方向の開始・終了位置を指定する。

開始・終了位置を / で区切ってラインの番号で指定する。したがって、後ろから振られているマイナス値も指定できる。

また、開始位置を span と数値にすることによって終了位置から上に向かって連続したセルをひとつのエリアとして定義できる。

同様に、終了位置を span と数値にすることによって開始位置から下に向かって連続したセルをひとつのエリアとして定義できる。

属性値	説明
auto	自動（規定値）
開始 / 終了	開始：開始ライン番号または、span 連続セル数終了：終了ライン番号または、span 連続セル数

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:30px 30px 30px 30px / 100px 100px 100px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-row:2/4;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 3/4;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-row:3/span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>

表示例

（２）グリッドエリアの列方向開始・終了位置　(grid-column-start、grid-column-end、grid-column)

グリッドエリアの列方向の開始位置、終了位置やスパン（連続するセルの数）を指定します。

grid-column-start:属性値、grid-column-end:属性値

グリッドエリアの列方向の開始・終了位置やスパン（連続するセルの数）を指定する。

開始・終了位置をラインの番号で指定する。したがって、後ろから振られているマイナス値も指定できる。

属性値	説明
auto	自動（規定値）
ライン番号	開始ライン番号あるいは終了ライン番号
span セル数	連続するセルの数

記述例

スタイルシート
div.contair {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:400px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:30px 30px 30px 30px / 100px 100px 100px 100px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-column-start:2; grid-column-end:4;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-column-start:span 3; grid-column-end:4;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-column-start:3; grid-column-end:span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>

表示例

グリッドエリアの列方向の開始位置、終了位置をまとめて指定することもできます。

grid-column:属性値

グリッドエリアの列方向の開始・終了位置を指定する。

開始・終了位置を / で区切ってラインの番号で指定する。したがって、後ろから振られているマイナス値も指定できる。

また、開始位置を span と数値にすることによって終了位置から左に向かって連続したセルをひとつのエリアとして定義できる。

同様に、終了位置を span と数値にすることによって開始位置から右に向かって連続したセルをひとつのエリアとして定義できる。

属性値	説明
auto	自動（規定値）
開始 / 終了	開始：開始ライン番号または、span 連続セル数終了：終了ライン番号または、span 連続セル数

２のエリアはラインの２から４までを連続した領域として、４のエリアはラインの１から始まる３つのセルが連続した領域として、また６のエリアはラインの５で終わる２つのセルが連続した領域として取られています。ただし、連続した領域がどこに配置されるかは自動的に決まります。

記述例

スタイルシート
div.contair {
  display:grid;
  background-color:lightyellow;
  width:400px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:30px 30px 30px 30px / 100px 100px 100px 100px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-column:2/4;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-column:span 3/4;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-column:3/span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>

表示例

（３）グリッドエリアの開始・終了位置　(grid-area)

グリッドエリアの行・列方向の開始位置、終了位置やスパン（連続するセルの数）をまとめて指定します。

grid-area:属性値

グリッドエリアの行・列方向の開始・終了位置やスパン（連続するセルの数）をまとめて指定する。

行方向の開始ライン番号、列方向の開始ライン番号、行方向の終了ライン番号、列方向の終了ライン番号を / で区切って指定する。したがって、後ろから振られているマイナス値も指定できる。

また、行方向の開始位置を span と数値にすることによって行方向の終了位置から上に向かって連続したセルをひとつのエリアとして定義できる。

そして、行方向の終了位置を span と数値にすることによって行方向の開始位置から下に向かって連続したセルをひとつのエリアとして定義できる。

同様に、列方向の開始位置を span と数値にすることによって列方向の終了位置から左に向かって連続したセルをひとつのエリアとして定義できる。

そして、列方向の終了位置を span と数値にすることによって列方向の開始位置から右に向かって連続したセルをひとつのエリアとして定義できる。

属性値	説明
auto	自動（規定値）
行方向の開始 / 列方向の開始 / 行方向の終了 / 列方向の終了	開始：開始ライン番号または、span 連続セル数終了：終了ライン番号または、span 連続セル数

１のエリアは行方向のラインの１から３まで、列方向のラインの１から４までを連続した領域として、５のエリアは行方向のラインの５で終わる２つのセル、列方向のラインの３から始まる２つのセルが連続した領域として取られています。ただし、連続した領域がどこに配置されるかは自動的に決まります。

記述例

スタイルシート
div.contair {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-template:30px 30px 30px 30px/ 100px 100px 100px 100px;">
   <div class="area" style="background-color:lightcyan;grid-area:1/1/3/4;">1</div>
   <div class="area" style="background-color:white;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:white;">4</div>
   <div class="area" style="background-color:lightcyan;grid-area:span 2/3/5/span 2;">5</div>
   <div class="area" style="background-color:white;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>

表示例

５．７．３アイテムの自動配置

グリッドアイテムの自動配置のされ方を指定します。

（１）グリッドエリアの自動配置　(grid-auto-flow)

グリッドエリアの自動配置のされ方を指定します。

grid-auto-flow:属性値

グリッドエリアの自動配置のされ方を指定する。

属性値	説明
row	上の行から順番に配置する。必要に応じて新しい行が追加される。（規定値）
column	左の列から順番に配置する。必要に応じて新しい列が追加される。
dense	空いているグリッドを埋めるように、できるだけ詰めて配置する。row や column とともに指定する。

下の例では、５×５のグリッドにエリアを配置しています。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
 <div class="container" style="grid-auto-flow:row;
                        grid-template:30px 30px 30px 30px 30px / 50px 50px 50px 50px 50px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>
 <div class="container" style="grid-auto-flow:column;
                        grid-template:30px 30px 30px 30px 30px / 50px 50px 50px 50px 50px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>
 <div class="container" style="grid-auto-flow:row dense;
                        grid-template:30px 30px 30px 30px 30px / 50px 50px 50px 50px 50px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>
 <div class="container" style="grid-auto-flow:column dense;
                        grid-template:30px 30px 30px 30px 30px / 50px 50px 50px 50px 50px;">
   <div class="area" style="background-color:white;">1</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">2</div>
   <div class="area" style="background-color:white;">3</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">4</div>
   <div class="area" style="background-color:white;">5</div>
   <div class="area" style="background-color:lightcyan;grid-row:span 2;grid-column:span 2;">6</div>
   <div class="area" style="background-color:white;">7</div>
   <div class="area" style="background-color:white;">8</div>
 </div>

表示例

（２）配置順序　(order)

グリッドエリアの配置順序を指定します。

order:属性値

グリッドエリアを配置する順番を指定する。

属性値	説明
順番	エリアを並べる順番（負数や 0 も指定できる）（規定値：0）

order を記述しなければ、規定値の 0 となります。order が記述されていないエリアも含め、order が小さい値から大きい値の順に並びます。

記述例

スタイルシート
div.container {
  display:grid;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:30px 30px / 50px 50px 50px;">
 <div class="area" style="background-color:white;">1</div>
 <div class="area" style="background-color:white;">2</div>
 <div class="area" style="background-color:white;">3</div>
 <div class="area" style="background-color:white;">4</div>
 <div class="area" style="background-color:white;">5</div>
 <div class="area" style="background-color:white;">6</div>
</div>
<div class="container" style="grid-template:30px 30px / 50px 50px 50px;">
 <div class="area" style="background-color:white;">1</div>
 <div class="area" style="background-color:white;">2</div>
 <div class="area" style="background-color:lightcyan;order:-2;">3</div>
 <div class="area" style="background-color:lightcyan;order:1;">4</div>
 <div class="area" style="background-color:lightcyan;order:-1;">5</div>
 <div class="area" style="background-color:white;">6</div>
</div>

表示例

５．７．４拡張トラック

グリッドコンテナで指定されたグリッドトラックの大きさに入りきらなかったエリアをどのような大きさにするかを指定します。グリッドトラックに入りきらないとは次のような場合です。

grid-row / grid-column で、わざと外側に指定した場合
アイテム多すぎてが定義したグリッドよりもはみ出る場合
コンテナに grid-template-rows / grid-template-columns を指定していない場合

（１）行方向の拡張トラック　(grid-auto-rows)

指定されたグリッドトラックの大きさに入りきらなかったエリアの行方向のサイズを指定します。

grid-auto-rows:属性値

グリッドトラックの大きさに入りきらなかったエリアの行方向のサイズを空白区切りで1つ以上指定する。

指定されたサイズの数より追加される行の方が多い場合は、また最初のサイズから順に割り当てられる。

属性値	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%
フレックス係数	フレックス係数の総計に対する割合を fr を付けて指定（注１）	1fr 3fr 2fr ならば 1:3:2
max-content	内容に合わせた、できるだけ大きいサイズ（内容は折れ曲がらない）（注２）	max-content
min-content	内容に合わせた、できるだけ小さいサイズ（内容が折れ曲がることがある）（注２）	min-content
minmax(min, max)	取りうる最小値（min）と最大値（max）を指定（注２）	minmax(100px, 1fr)　100px と 1fr との間で可変
fit-content()	内容に合わせたサイズとなるよう指定（注２）

（注１）grid-auto-rows では fr 指定の中の最小値あるいは最大値を持つトラックの高さにあわせて決まる
（注２）grid-auto-rows では機能しない（？）

grid-auto-rows で指定するサイズは行のサイズです。同じ行に配置されたエリアは同じ高さになります。

下の例は、コンテナが１行３列しか定義していないので、4 と 5 は普通にはみ出てしまったエリアです。したがって、２行目に配置されるので行の高さは 10px になります。

そして、6 は３行目なので 30px、7 と 8 は４行目なのでサイズの最初に戻って 10px になります。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:300px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:50px / 100px 100px 100px;grid-auto-rows:10px 30px;">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:white;">3</div>
  <div class="area" style="background-color:lightcyan;">4</div>
  <div class="area" style="background-color:lightcyan;">5</div>
  <div class="area" style="background-color:lightcyan;grid-row:3;grid-column:2;">6</div>
  <div class="area" style="background-color:lightcyan;grid-row:4;grid-column:1;">7</div>
  <div class="area" style="background-color:lightcyan;grid-row:4;grid-column:3;">8</div>
</div>

表示例

1fr が指定されているトラックと 2fr が指定されているトラックとは、高さが 1 対 2 になります。

また、minmax は最大値である 80px がとられているようです。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:200px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:50px / 100px 100px;grid-auto-rows:50% 100%;">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:lightcyan;">3</div>
  <div class="area" style="background-color:lightcyan;grid-row:3;grid-column:2;">4</div>
</div>
<div class="container" style="grid-template:50px / 100px 100px;grid-auto-rows:1fr 2fr;">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:lightcyan;">3<br>&nbsp;</div>             <!-- 2行 -->
  <div class="area" style="background-color:lightcyan;grid-row:3;grid-column:2;">4</div>
</div>
<div class="container" style="grid-template:50px / 100px 100px;grid-auto-rows:minmax(30px,80px);">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:lightcyan;">3</div>
  <div class="area" style="background-color:lightcyan;grid-row:3;grid-column:2;">4</div>
</div>

表示例

（２）列方向の拡張トラック　(grid-auto-columns)

指定されたグリッドトラックの大きさに入りきらなかったエリアの列方向のサイズを指定します。

grid-auto-columns:属性値

グリッドトラックの大きさに入りきらなかったエリアの列方向のサイズを指定する。

指定されたサイズの数より追加される列の方が多い場合は、また最初のサイズから順に割り当てられる。

属性値	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%
フレックス係数	フレックス係数の総計に対する割合を fr を付けて指定（注）	1fr 3fr 2fr ならば 1:3:2
max-content	内容に合わせた、できるだけ大きいサイズ（内容は折れ曲がらない）	max-content
min-content	内容に合わせた、できるだけ小さいサイズ（内容が折れ曲がることがある）	min-content
minmax(min, max)	取りうる最小値（min）と最大値（max）を指定	minmax(100px, 1fr)　100px と 1fr との間で可変
fit-content()	内容に合わせたサイズとなるよう指定

（注）grid-auto-columns では fr 指定の割合によって幅が決まる。
　　　ただし、テキストが表示される最小の幅までしか狭まらないので、それ以降は割合は正しくなくなる

grid-auto-columns で指定するサイズは列のサイズです。同じ列に配置されたエリアは同じ幅になります。

下の例は、コンテナが３行１列しか定義していないので、4 と 5 は普通にはみ出てしまったエリアです。したがって、２列目に配置されるので列の幅は 60px になります。

そして、6 は３列目なので 120px、7 と 8 は４列目なのでサイズの最初に戻って 60px になります。

なお、エリアが行方向に配置されるように、コンテナに grid-auto-flow:column を指定しています。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:100px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:30px 30px 30px / 100px;grid-auto-flow:column;grid-auto-columns:60px 120px;">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:white;">3</div>
  <div class="area" style="background-color:lightcyan;">4</div>
  <div class="area" style="background-color:lightcyan;">5</div>
  <div class="area" style="background-color:lightcyan;grid-row:2;grid-column:3;">6</div>
  <div class="area" style="background-color:lightcyan;grid-row:1;grid-column:4;">7</div>
  <div class="area" style="background-color:lightcyan;grid-row:3;grid-column:4;">8</div>
</div>

表示例

1fr が指定されているトラックと 2fr が指定されているトラックとは、幅が 1 対 2 になります。

また、minmax は幅が最小でも 100px、最大でも 300px にしかなりません。その範囲の中で可変となります。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:20px 20px / 50px;grid-auto-flow:column;grid-auto-columns:10% 50%;">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:lightcyan;">3</div>
  <div class="area" style="background-color:lightcyan;grid-row:2;grid-column:3;">4</div>
</div>

<div class="container" style="grid-template:20px 20px / 50px;grid-auto-flow:column;grid-auto-columns:1fr 2fr;">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:lightcyan;">3</div>
  <div class="area" style="background-color:lightcyan;grid-row:2;grid-column:3;">4</div>
</div>

<div class="container" style="grid-template:20px 20px / 50px;grid-auto-flow:column;grid-auto-columns:minmax(100px,300px);">
  <div class="area" style="background-color:white;">1</div>
  <div class="area" style="background-color:white;">2</div>
  <div class="area" style="background-color:lightcyan;">3</div>
  <div class="area" style="background-color:lightcyan;grid-row:2;grid-column:3;">4</div>
</div>

表示例

５．７．５セル隙間

デフォルトだとセル同士は隙間なく隣接しますが、セル同士の間に隙間を開ける場合に指定します。

（１）グリッドの行方向の隙間　(grid-row-gap)

グリッドの行方向の隙間を指定します。

grid-row-gap:隙間

行方向の隙間を指定する。

隙間	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%

行方向の間隔を指定します。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:400px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>
<div class="container" style="display:grid;grid-template:20px 20px 20px / 50px 50px 50px;grid-row-gap:10px;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>
<div class="container" style="display:grid;grid-template:20px 20px 20px / 50px 50px 50px;grid-row-gap:20%;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>

表示例

（２）グリッドの列方向の隙間　(grid-column-gap)

グリッドの列方向の隙間を指定します。

grid-column-gap:隙間

列方向の隙間を指定する。

隙間	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%

列方向の間隔を指定します。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;grid-column-gap:10px;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;grid-column-gap:20%;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>

表示例

（３）グリッドの隙間　(grid-gap)

グリッドの行方向と列方向の隙間を指定します。

grid-gap:隙間 [隙間]

行方向と列方向の隙間を指定する。

間隔をひとつしか指定しないと行方向も列方向も同じ間隔になる。２つ指定すると行方向、列方向の指定になる。

隙間	説明	例
長さを示す数値	px や em などの単位を付けて指定	40px 20em 5cm
割合	グリッドコンテナに対する割合を % を付けて指定	20%

行方向と列方向の間隔を指定します。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
}

ボディ
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;grid-gap:10px 20px;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;grid-gap:20%;">
  <div class="area" style="background-color:white;">1</div>
  <-- 途中略 -->
  <div class="area" style="background-color:white;">9</div>
</div>

表示例

５．７．６エリア位置

デフォルトだとエリア同士は隙間なく隣接しますが、エリアをどこかに寄せたい場合に指定します。

その場合は、エリアは内容が表示できる最小限の幅あるいは高さになります。

（１）コンテナ内での全エリアの行方向の位置　(align-content)

グリッドコンテナ内の全エリアの行方向の位置を指定します。この場合、エリアの高さはコンテナで指定したトラックの高さになります。

align-items はグリッドコンテナに指定し、グリッドコンテナに含まれるすべてのエリアの位置を設定します。

align-content:属性値

グリッドコンテナに指定し、エリアを寄せる行方向の位置を指定する。

属性値	説明
start	上側
center	中央
end	下側
space-between	グリッドコンテナ全体へ均等に配置される。先頭と末尾は詰めて配置される。
space-around	グリッドコンテナ全体へ均等に配置される。先頭と末尾にはエリア間の半分の間隔が入る。
space-evenly	グリッドコンテナ全体へ均等に配置される。先頭と末尾にはエリア間と同じ間隔が入る。

（注）指定できる属性値は他にもあるが機能しているかどうか不明

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:180px;
  height:100px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
  background-color:lightcyan;
}

ボディ
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;align-content:start;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;align-content:center;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;align-content:end;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;align-content:space-between;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;align-content:space-around;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;align-content:space-evenly;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>

表示例

（２）コンテナ内での全エリアの列方向の位置　(justify-content)

グリッドコンテナ内の全エリアの列方向の位置を指定します。この場合、エリアの幅はコンテナで指定したトラックの幅になります。

justify-items はグリッドコンテナに指定し、グリッドコンテナに含まれるすべてのエリアの位置を設定します。

justify-content:属性値

グリッドコンテナに指定し、列方向のトラック内でのエリアを寄せる位置を指定する。

属性値	説明
start	左側
center	中央
end	右側
space-between	グリッドコンテナ全体へ均等に配置される。先頭と末尾は詰めて配置される。
space-around	グリッドコンテナ全体へ均等に配置される。先頭と末尾にはエリア間の半分の間隔が入る。
space-evenly	グリッドコンテナ全体へ均等に配置される。先頭と末尾にはエリア間と同じ間隔が入る。

（注）指定できる属性値は他にもあるが機能しているかどうか不明

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
  height:80px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
  background-color:lightcyan;
}

ボディ
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;justify-content:start;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;justify-content:center;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;justify-content:end;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;justify-content:space-between;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;justify-content:space-around;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>
<div class="container" style="grid-template:20px 20px 20px / 50px 50px 50px;justify-content:space-evenly;">
  <div class="area">1</div>
  <-- 途中略 -->
  <div class="area">9</div>
</div>

表示例

（３）トラック内での全エリアの行方向の位置　(align-items)

グリッドコンテナ内の列方向のトラック内での全エリアの行方向の位置を指定します。この場合、エリアは内容が表示できる最小限の高さになります。

align-items はグリッドコンテナに指定し、グリッドコンテナに含まれるすべてのエリアの位置を設定します。

align-items:属性値

グリッドコンテナに指定し、トラック内でのエリアを寄せる行方向の位置を指定する。

属性値	説明
start	上側
center	中央
end	下側
stretch	エリアの高さをトラックの高さ全体に広げる

（注）指定できる属性値は他にもあるが機能しているかどうか不明

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
  background-color:lightcyan;
}

ボディ
<div class="container" style="grid-template:30px 30px / 50px 50px 50px;align-items:start;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:30px 30px / 50px 50px 50px;align-items:center;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:30px 30px / 50px 50px 50px;align-items:end;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:30px 30px / 50px 50px 50px;align-items:stretch">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>

表示例

（４）トラック内での全エリアの列方向の位　(justify-items)

グリッドコンテナ内の行方向のトラック内での全エリアの列方向の位置を指定します。

justify-items はグリッドコンテナに指定し、グリッドコンテナに含まれるすべてのエリアの位置を設定します。

justify-items:属性値

グリッドコンテナに指定し、列方向のトラック内でのエリアを寄せる位置を指定する。

主な属性値	説明
left	左側
center	中央
right	右側
start	左側
end	右側
stretch	エリアの幅の合計をトラックの幅全体に広げる

（注）指定できる属性値は他にもあるが機能しているかどうか不明

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
  background-color:lightcyan;
}

ボディ
<div class="container" style="grid-template:20px / 50px 50px 50px;justify-items:left;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;justify-items:center;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;justify-items:right;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;justify-items:start;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;justify-items:stretch;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;justify-items:end;">
  <div class="area">1<br>1</div>
  <div class="area">2</div>
  <div class="area">33</div>
  <div class="area">44</div>
  <div class="area">5</div>
  <div class="area">6<br>6</div>
</div>

表示例

（５）エリアごとの行方向の位置　(align-self)

align-self はグリッドエリアに指定し、エリアを寄せる行方向の位置をエリアごとに個別に指定します。

align-self:属性値

エリアを寄せる列方向の位置をエリアごとに個別に指定する。

主な属性値	説明
start	左側
center	中央
end	右側
stretch	エリアの幅の合計をトラックの幅全体に広げる

（注）指定できる属性値は他にもあるが機能しているかどうか不明

２のエリアにだけ align-self を指定しています。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
  background-color:white;
}

ボディ
<div class="container" style="grid-template:40px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;align-self:left;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:40px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;align-self:center;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:40px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;align-self:right;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:40px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;align-self:start;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:40px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;align-self:stretch;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:40px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;align-self:end;">2</div>
  <div class="area">3</div>
</div>

表示例

（６）エリアごとの列方向の位置　(justify-self)

justify-self はグリッドエリアに指定し、エリアを寄せる列方向の位置をエリアごとに個別に指定します。

justify-self:属性値

エリアを寄せる列方向の位置をエリアごとに個別に指定する。

主な属性値	説明
left	左側
center	中央
right	右側
start	左側
end	右側
stretch	エリアの幅の合計をトラックの幅全体に広げる

（注）指定できる属性値は他にもあるが機能しているかどうか不明

２のエリアにだけ justify-self を指定しています。

記述例

スタイルシート
div.container {
  display:grid;
  border:solid 1px lightgrey;
  background-color:lightyellow;
  width:150px;
}
div.area {
  border:solid 1px lightgrey;
  font-size: 9px;
  background-color:white;
}

ボディ
<div class="container" style="grid-template:20px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;justify-self:left;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;justify-self:center;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;justify-self:right;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;justify-self:start;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;justify-self:stretch;">2</div>
  <div class="area">3</div>
</div>
<div class="container" style="grid-template:20px / 50px 50px 50px;">
  <div class="area">1</div>
  <div class="area" style="background-color:lightcyan;justify-self:end;">2</div>
  <div class="area">3</div>
</div>

表示例

５．８　　サイズ

サイズについて説明します。

属性	説明
width	幅
min-width	最小幅
max-width	最大幅
height	高さ
min-height	最小高
max-height	最大高
box-sizing	対象領域
resize	リサイズ

５．８．１幅　(width)

要素の横幅を指定します。

width:属性値

要素の横幅を指定する。

属性値	説明
auto	自動計算（規定値）
数値	長さ（数値＋単位）
パーセント	親要素の横幅に対するパーセント（数値%）

記述例

 <div style="background:green;width:100px;"><br></div>
 <img src="bear.png" style="width:100px;">

 <div style="width:300px;background-color:lightgrey;"><div style="background:green;width:50%;"><br></div></div>
 <div style="width:300px;background-color:lightgrey;"><img src="bear.png" style="width:50%;"></div>

理解の助けになるように文字列を別途表示しています。

表示例

５．８．２最小幅　(min-width)

要素の横幅の最小値を指定します。

min-width:属性値

要素の横幅の最小値を指定する。

属性値	説明
auto	自動計算（規定値）
数値	長さ（数値＋単位）　　　（単位 ex は機能しない）
パーセント	親要素の横幅に対するパーセント（数値%）

記述例

スタイルシート
  td {
    border:solid 1px lightgrey;
    background-color:lightyellow;
  }

ボディ
<table>
 <tr><td style="min-width:200px;">min-width:200px</td><td>min-widthなし</td></tr>
</table>

<table>
 <tr><td style="min-width:200px;">min-width:200px だけど、とても長い文字列</td></tr>
</table>

一行目の左は min-width:200px が指定してありますので、文字列が短くても幅は 200px が確保されます。右側は指定してありませんので、文字列が表示できる幅しか確保されません。

表示例

５．８．３最大幅　(max-width)

要素の横幅の最大値を指定します。

max-width:属性値

要素の横幅の最大値を指定する。

属性値	説明
auto	自動計算（規定値）
数値	長さ（数値＋単位）　　　（単位 ex は機能しない）
パーセント	親要素の横幅に対するパーセント（数値%）

記述例

スタイルシート
  td {
    border:solid 1px lightgrey;
    background-color:lightyellow;
  }

ボディ
<table>
 <tr><td style="max-width:200px;">max-width:200px が指定されている、とても長い文字列</td>
 <td>max-width が指定されていない、とても長い文字列</td></tr>
</table>

<table>
 <tr><td style="max-width:200px;">短い文字列</td></tr>
</table>

一行目の左は max-width:200px が指定してありますので、文字列が長いと折り返します。右側は指定してありませんので、折り返さずに表示されます。

表示例

５．８．４高さ　(height)

要素の高さを指定します。

height:属性値

要素の高さを指定する。

属性値	説明
auto	自動計算（規定値）
数値	長さ（数値＋単位）
パーセント	親要素の高さに対するパーセント（数値%）

記述例

 <div style="background:green;height:100px;"><br></div>
 <img src="bear.png" style="height:100px;">

 <div style="height:100px;background-color:lightgrey;"><div style="background:green;height:50%;"><br></div></div>
 <div style="height:100px;background-color:lightgrey;"><img src="bear.png" style="height:50%;"></div>

理解の助けになるように文字列を別途表示しています。

表示例

５．８．５最小高　(min-height)

要素の高さの最小値を指定します。

min-height:属性値

要素の高さの最小値を指定する。

属性値	説明
auto	自動計算（規定値）
数値	長さ（数値＋単位）　　　（単位 ex は機能しない）
パーセント	親要素の高さに対するパーセント（数値%）

記述例

スタイルシート
  div {
    width:100px;
    border:solid 1px lightgrey;
    background-color:lightyellow;
  }

ボディ
<div style="min-height:100px;">min-height:100px</div>
<div>min-heightなし</div>
<div style="min-height:100px;">min-height:100px だけど、とてもとてもとてもとてもとても長～～～～～い文字列</div>

一番左は min-height:100px が指定してありますので、文字列が短くても高さは 100px が確保されます。二番目は指定してありませんので、文字列が表示できる高さしか確保されません。

表示例

５．８．６最大高　(max-height)

要素の高さの最大値を指定します。

max-height:属性値

要素の高さの最大値を指定する。

属性値	説明
auto	自動計算（規定値）
数値	長さ（数値＋単位）　　　（単位 ex は機能しない）
パーセント	親要素の高さに対するパーセント（数値%）

記述例

スタイルシート
  div {
    width:100px;
    border:solid 1px lightgrey;
    background-color:lightyellow;
  }

ボディ
<div style="max-height:100px;">max-height: 100px が指定されている、とてもとてもとてもとてもとても長～～～～～い文字列</div>
<div>max-height が指定されていない、とてもとてもとてもとてもとても長～～～～～い文字列</div>
<div style="max-height:100px;">短い文字列</div>

一番左は max-height:100px が指定してありますので、文字列が長くても高さは 100px より大きくなりません。二番目は指定してありませんので、文字列が表示できる高さ分確保されます。

表示例

５．８．７対象領域　(box-sizing)

height や width が対象とする領域を指定します。

box-sizing:属性値

height や width が対象とする領域を指定する。

属性値	説明
border-box	ボーダーの外側	width border-box
content-box	コンテンツの外側(パディングの内側)（規定値）	width content-box

記述例

スタイルシート
  div {
    padding:0px 20px;
    margin:0px 50px;
    border:solid 1px lightgrey;
    background-color:lightyellow;
  }

ボディ
<div style="box-sizing:border-box;width:150px;">border-box</div>
<div style="box-sizing:content-box;width:150px;">content-box</div>

理解の助けになるように文字列や線を別途表示しています。

表示例

５．８．８リサイズ　(resize)

要素のサイズを変更できるかどうかを指定する際に使用します。resize に対応したブラウザでは、textarea 要素はデフォルトでリサイズ可能になっています。

ただし、overflow 属性に visible が指定された要素に対しては適用されません。

resize:属性値

要素のサイズを変更できるかどうかを指定する。

属性値	説明
none	要素のサイズは変更できない（規定値）
both	要素の幅と高さの変更ができる
horizontal	要素の幅の変更ができる
vertical	要素の高さの変更ができる

記述例

スタイルシート
  div {
    width:100px;
    border:solid 1px lightgrey;
    background-color:lightyellow;
    overflow: auto;
  }

ボディ
<div style="resize:none;">none</div>
<div style="resize:horizontal;">horizontal</div>
<div style="resize:vertical;">vertical</div>
<div style="resize:both;">both</div>

表示例


△	△	△	△	△	△


△	△	△	△	△	△


△	△	△	△	△	△


△	△	○	△	△	△


△	△	○	△	△	△

５ 表示、配置

５．１ 表示

５．１．１ 左寄せ・右寄せ (float)

float:属性値

記述例

５．１．２ 回り込み解除 (clear)

clear:属性値

記述例

５．１．３ 横にはみ出た内容の表示方法 (overflow-x)

overflow-x:属性値

記述例

５．１．４ 縦にはみ出た内容の表示方法 (overflow-y)

overflow-y:属性値

記述例

５．１．５ はみ出た内容の表示方法 (overflow)

overflow:属性値

記述例

５．１．６ 表示・非表示 (visibility)

visibility:属性値

記述例

記述例

５．１．７ オーバーフローの表示形式 (text-overflow)

text-overflow:属性値[ 属性値]

記述例

５．１．８ 要素の表示形式 (display)

display:属性値

display-outside

display-inside

display-listitem

display-internal

display-box

display-legacy

○ display-outside

記述例

記述例

○ display-inside

記述例

記述例

記述例

記述例

○ display-listitem

記述例

○ display-box

記述例

５．２ パディング

５．２．１ 上下左右のパディング (padding-top、padding-bottom、padding-left、padding-right)

padding-top、padding-bottom、padding-left、padding-right:属性値

５．２．２ パディング (padding)

padding:属性値 属性値 ...

５．３ マージン

５．３．１ 上下左右のマージン (margin-top、margin-bottom、margin-left、margin-right)

margin-top、margin-bottom、margin-left、margin-right:属性値

５．３．２ マージン (margin)

マージン:属性値 属性値 ...

５．４ 配置

５．４．１ 要素の配置方法 (position)

position:属性値

記述例

記述例

記述例

記述例

５．４．２ 上端、下端、左端、右端からの距離 (top、bottom、left、right)

top:属性値、bottom:属性値、left:属性値、right:属性値

記述例

５．４．３ 重なりの順序 (z-index)

z-index:属性値

記述例

５．５ 段組み

５．５．１ 段数 (column-count)

column-count:属性値

記述例

記述例

５．５．２ 各段の幅 (column-width)

column-width:属性値

記述例

５．５．３ 段組み (columns)

columns:属性値 属性値

記述例

記述例

５．５．４ 高さの平均化 (column-fill)

５　表示、配置

５．１　　表示

５．１．１左寄せ・右寄せ　(float)

５．１．２回り込み解除　(clear)

５．１．３横にはみ出た内容の表示方法　(overflow-x)

５．１．４縦にはみ出た内容の表示方法　(overflow-y)

５．１．５はみ出た内容の表示方法　(overflow)

５．１．６表示・非表示　(visibility)

５．１．７オーバーフローの表示形式　(text-overflow)

５．１．８要素の表示形式　(display)

５．２　　パディング

５．２．１上下左右のパディング　(padding-top、padding-bottom、padding-left、padding-right)

５．２．２パディング　(padding)

padding:属性値属性値 ...

５．３　　マージン

５．３．１上下左右のマージン　(margin-top、margin-bottom、margin-left、margin-right)

５．３．２マージン　(margin)

マージン:属性値属性値 ...

５．４　　配置

５．４．１要素の配置方法　(position)

５．４．２上端、下端、左端、右端からの距離　(top、bottom、left、right)

５．４．３重なりの順序　(z-index)

５．５　　段組み

５．５．１段数　(column-count)

５．５．２各段の幅　(column-width)

５．５．３段組み　(columns)

columns:属性値属性値

５．５．４高さの平均化　(column-fill)

５．５．５段の間隔　(column-gap)

５．５．６段の区切り線の種類　(column-rule-style)

５．５．７段の区切り線の色　(column-rule-color)

５．５．８段の区切り線の太さ　(column-rule-width)

５．５．９段の区切り線　(column-rule)

column-rule:属性値属性値 ...

５．５．１０段の結合数　(column-span)

５．５．１１要素前改段　(break-before)

５．５．１２要素後改段　(break-after)

５．５．１３改段禁止　(break-inside)

５．６　　フレックスボックス

５．６．１配置方法　(flex-direction)

５．６．２表示方法　(flex-wrap)

５．６．３表示配置方法　(flex-flow)

flex-flow:配置方法表示方法

５．６．４伸長係数　(flex-grow)

５．６．５圧縮係数　(flex-shrink)

５．６．６幅・高さ　(flex-basis)

５．６．７伸長・圧縮係数　(flex)

flex:伸長係数圧縮係数初期値

５．６．８配置順序　(order)

５．６．９アイテム位置

（１）アイテムの行方向の位置と間隔　(align-content)

（２）アイテムの列方向の位置と間隔　(justify-content)

（３）全アイテムの行方向の位置　(align-items)

（４）アイテムごとの行方向の位置　(align-self)