HTML Living Standard　　第２部 CSS　７ リスト、テーブル

 

７　リスト、テーブル

リスト、テーブルに関するスタイルシートについて説明します。

７．１　　リスト

リストに関するスタイルシートについて説明します。

７．１．１ マーカーの種類　(list-style-type)

マーカーの種類を指定します。

list-style-type:属性値

マーカーの種類を指定する。

属性値説明
記述例
<ul style="list-style-type:none;">
  <li>___</li>
  <li>____</li>
  <li>_____</li>
</ul>


（以下省略）

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

表示例

７．１．２ マーカーの位置　(list-style-position)

マーカーの位置を指定します。

list-style-position:属性値

マーカーの位置を指定する。

属性値説明
outsideマーカーはブロックボックスの外側に配置される（規定値）
insideマーカーはブロックボックスの内側に配置される
hangingマーカーはブロックボックスの内側に配置されるが、マーカーの領域の大きさが同一に揃えられる
記述例
<ul style="list-style-position:outside;">
  <li>春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</li>
  <li>夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</li>
</ul>
<ul style="list-style-position:inside;">
  <li>春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</li>
  <li>夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</li>
</ul>
<ul style="list-style-position:hanging;">
  <li>春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。</li>
  <li>夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</li>
</ul>

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

表示例

７．１．３ マーカーの画像　(list-style-image)

マーカーの画像を指定します。

なお、list-style-type と、list-style-image の値を同時に指定した場合には、 list-style-image の値が優先されます。

list-style-image:属性値

マーカーの画像を指定する。

属性値説明
URLURL（アドレス）で画像ファイルを指定する
noneマーカーを表示しない
記述例
<h5>禁　止　事　項</h5>
<ul style="list-style-image:url('stop.png');">
  <li>映像撮影（写真撮影は可能ですが、共用スペースや施設の占有はできません。）</li>
  <li>火気（喫煙を含みます。喫煙は喫煙場所をご利用ください。）</li>
  <li>備品の目的外利用（備品はその用途に従ってご使用下さい。故意、又は不適切な使用による破損等は別途請求させて頂くことがあります。）</li>
</ul>
表示例

７．１．４ マーカー　(list-style)

マーカーをまとめて指定します。

記述例
<h5>禁　止　事　項</h5>
<ul style="list-style:url('stop.png') inside;">
  <li>映像撮影（写真撮影は可能ですが、共用スペースや施設の占有はできません。）</li>
  <li>火気（喫煙を含みます。喫煙は喫煙場所をご利用ください。）</li>
  <li>備品の目的外利用（備品はその用途に従ってご使用下さい。故意、又は不適切な使用による破損等は別途請求させて頂くことがあります。）</li>
</ul>
表示例

７．２　　テーブル

テーブルに関するスタイルシートについて説明します。

７．２．１ 枠線の描画方法　(border-collapse)

枠線の描画方法を指定します。

border-collapse:属性値

枠線の描画方法を指定する。

属性値説明
collapse隣接するセルのボーダーを重ねて表示
separate隣接するセルのボーダーを間隔をあけて表示（規定値）
記述例
スタイルシート
  table, td {
    border:solid 1px gray;
  }

ボディ
<table style="border-collapse: separate;">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>

<table style="border-collapse: collapse;">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>
表示例


７．２．２ セルの間隔　(border-spacing)

セルの間隔を指定します。

border-spacing:水平方向の間隔 垂直方向の間隔

セルの間隔を指定する。

間隔が一つしか指定されていなければ、水平方向も垂直方向も同じ間隔になる。

属性値説明
水平方向の間隔数値＋単位（規定値：2px）
垂直方向の間隔数値＋単位
記述例
スタイルシート
  table, td {
    border:solid 1px gray;
  }

ボディ
<table style="border-spacing: 0px;">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>

<table style="border-spacing: 30px 10px;">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>
表示例

７．２．３ 空セル　(empty-cells)

空セルの表示/非表示を指定します。

empty-cells:属性値

空セルの表示/非表示を指定する。

属性値説明
showボーダーと背景を表示する（規定値）
hideボーダーと背景を表示しない
記述例
スタイルシート
  table, td {
    border:solid 1px gray;
  }

ボディ
<table style="empty-cells:show;">
  <tr><td>AAA</td><td></td></tr>
  <tr><td>CCC</td><td style="visibility:hidden;">DDD</td></tr>
</table>

<table style="empty-cells:hide;">
  <tr><td>AAA</td><td></td></tr>
  <tr><td>CCC</td><td style="visibility:hidden;">DDD</td></tr>
</table>
表示例

７．２．４ キャプションの位置　(caption-side)

キャプションの位置を指定します。

caption-side:属性値

キャプションの位置を指定する。

属性値説明
topテーブルの上に配置する（規定値）
bottomテーブルの下に配置する
記述例
スタイルシート
  table, td {
    border:solid 1px gray;
  }

ボディ
<table>
  <caption style="caption-side:top;">caption</caption>
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>

<table>
  <caption style="caption-side:bottom;">caption</caption>
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>
表示例

７．２．５ テーブルの描画　(table-layout)

テーブルの描画方法を指定します。

table-layout:属性値

テーブルの描画方法を指定する。

属性値説明
autoブラウザはテーブル全体の構造を読み込み、セルの内容を考慮し、各列の幅を決定してレンダリングを開始する（規定値）
fixedブラウザは最初の一行目を読み込んだ時点で、各列の幅を決定してレンダリングを開始する
記述例
スタイルシート
  table, td {
    border:solid 1px gray;
  }

ボディ
<table style="table-layout:auto;">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>

<table style="table-layout:fixed;">
  <tr><td>AAA</td><td>BBB</td></tr>
  <tr><td>CCC</td><td>DDD</td></tr>
</table>