【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

テーブルじゃない要素display: table と指定して、その中の子要素display: table-cell を指定すれば、まるでテーブルの <td>要素のような表示になります。

テーブルの要素として扱えると、こんなメリットがあります。

  • ブロックレベルの要素を簡単に横並びにできるdisplay: inline-blockfloat を使わなくても)
  • 横並びにしたボックスの高さを揃えられる(テーブルのセルは元々高さが揃うので
  • セル内の子要素の位置を上下のセンターにできる(テーブルセルは vertical-alignが効くので)
  • 横並びのボックスを均等な幅にできるtable-layout: fixed が使えるので)
  • CSS2.1からのモノなので IE8でも対応していて安心(参考資料:Can I Use : CSS Table display

実際に <table>要素や <td>要素を使うんじゃなく、その性質だけ利用するわけなので、HTMLの文法上 間違った要素の使い方をせずにテーブルレイアウトができるんです。
テーブルレイアウト とは「レイアウトのためだけにテーブル関連の要素を使う」こと。昔はよくあったけど今は非推奨)
というわけで、今回はこの display: table を使ってみましょう。

本日のINDEX
  1. displayプロパティのテーブル関連の値
    1. display:tableを親要素に指定する
    2. display:table-cellで要素をテーブルセルにする
    3. display:table-rowで要素をテーブルの行(tr)にする
    4. display:table-captionでキャプションをつける
    5. display:inline-tableは親要素をインラインのテーブルにする
    6. displayプロパティのその他のテーブル関連の値でグルーピングする
  2. 正しいコンテンツ・モデルじゃないとエラーになるよ

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう
displayプロパティと値の一覧/display: inline/block/inline-block/none/run-in
【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます
【17-2-2】リスト関連の要素のためのCSSプロパティ
リスト関連の要素だけに使えるCSSプロパティをまとめます
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく ←今ココ
display:table で、テーブル関連じゃない要素にテーブルの性質を与えます
【17-3-2】テーブル関連の要素のためのCSSプロパティ
テーブル関連の要素だけに使えるCSSプロパティをまとめます
【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
display:ruby で、要素にルビ(ruby)を表示する機能を与えます
【17-4-2】ルビ関連の要素のためのCSSプロパティ
ルビ関連の要素だけに使えるCSSプロパティをまとめます
【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)
display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

dosplayプロパティのテーブル関連の値

dosplayプロパティのテーブル関連の値一覧です。
(リンクは「ほんっとにはじめてのHTML5」の記事へのリンクです。別ウィンドウで開きます)

display のテーブル関連の値
table 要素は<table>要素と同じ性質になります。
table-cell 要素はテーブルのセル = <td>要素と同じ性質になります。
table-row 要素は<tr>要素と同じ性質になります。
table-header-group 要素は<thead>要素と同じ性質になります。
table-row-group 要素は<tbody>要素と同じ性質になります。
table-footer-group 要素は<tfoot>要素と同じ性質になります。
table-column-group 要素は<colgroup>要素と同じ性質になります。
table-column 要素は<col>要素と同じ性質になります。
table-caption 要素は<caption>要素と同じ性質になります。
inline-table 要素は<table>要素と同じ性質だけど、インラインの並び方になります。
値の継承 なし 適用できる要素 全部

<thead>とか <colgroup>とか、聞き慣れない要素も出てきますが、詳しくは下記の過去記事をご覧ください。(クリックで別ウィンドウで開きます)

それでは、テーブル関連の displayの値を順に見て行きましょう。

display:tableを親要素に指定する

他のテーブル関係の値を指定する前に、必ず親の要素に display: table を指定します。
中の子要素をテーブルセルにしたかったら、絶対に親をテーブルにしなきゃです。これはお約束。

しかし親要素に display: table と指定しただけじゃなんにもなんない。
子要素に display: table-csll と指定するところまでやらないと無意味。それは次の項で。

ちなみに、(ここから若干余談ですが...w)
<table>要素って、中身が無ければぺったんこなんです。
ボーダーや背景を指定しても、中に1つもテーブルセルが無ければ何も表示されないのがデフォルト。
例えば下のソースだと、ブラウザの画面上には何にも表示されません。

<table style="border:solid 5px #f0f; background-color:#cf9">
 <!--中身が何も無い-->
</table>

ここ↓に一応、この↑ソースの table があるんだけど、見えないよね。

中に1つでも テーブルセル(<td>か <th>)が入れば、ボーダーや背景も表示されます。

<table style="border:solid 5px #9c0; background-color:#cf9">
 <td>これなら見える?
</table>

上のソースのプレビューはこちら↓

これなら見える?

<tr>要素は セルの行(段)を変えるための要素なので、無くてもテーブルは表示されます。
また、終了タグの省略については(ちょっとメモ)HTML5 での 省略可能なタグについて を見てね。

この <table>要素の特徴を生かした clearfix(クリアフィックス)があります。
clearfixとは、floatプロパティを使った後に そのフロートを解除するときに使うCSSソースです)
擬似要素 ::after などで挿するコンテンツに display: table を指定して幅も高さも無いのっぺらぼうのテーブルを作り、それに clear:both を指定しておくという方法です。

★clearfix に関しては、↓こちらにざっくりメモっています。
*Web Design 覚え書き* - CSSのfloatを解除するclearfixはコレで決まり!display:tableを使ったmicro clearfix
★floatプロパティ や clearプロパティに関しては、近いうちに詳細を書く予定です。

★擬似要素 ::after などについては、こちらをご覧ください。
【3】id とか classって何?(セレクタの「種類」を知っておこう)

display:table-cellで要素をテーブルセルにする

要素に display: table-cell を指定すればテーブルセルになります。
ここで重要なのは、display: table-cell だけ指定しても何も起こらないこと。親要素に display: table を指定しなければ、子要素はテーブルセルにはなれません。
「親要素 = display: table」「子要素 = display: table-cell」が必ずセットなの。これ重要。しつこいようだけど。テーブルあってのテーブルセルってことですね。

下のサンプルは <span>要素に display: table-cell を指定してみました。
親要素の <div>に display: table を指定しましたよ。
*実際のレイアウトで テーブルセルに <span> はお勧めしないけど、インラインの要素でも可能という例として使っています。

1.middle 2.bottom 3
3
3
3
3
<div id="smp1_2">
<span>1.middle</span>
<span>2.bottom</span>
<span>3<br>3<br>3<br>3<br>3</span>
</div>
div#smp1_2 {
	margin:1em 0;
	padding:1em 0;
	display:table;
	border-collapse:separate; /*セルの間隔を空ける*/
	border-spacing:1em 0; /*セルの間隔が左右1em 上下無し(最初が左右。詳しくは次回)*/
	background:#666;}
div#smp1_2 span {
	display:table-cell;
	padding:1em}
div#smp1_2 span:nth-child(1) {background:#ffc;vertical-align:middle}
div#smp1_2 span:nth-child(2) {background:#fcf;vertical-align:bottom}
div#smp1_2 span:nth-child(3) {background:#cff}

テーブルセルになると、内容量がバラバラでも高さが揃うのが特徴ですね。
そして、vertical-alignプロパティ(11,12行目)が効くようになるので、上下の中央や、下揃えもできるようになります。これは便利です。

サンプル内で使っている border-collapse(5行目)、border-spacing(6行目)は、テーブル専用のCSSプロパティです。
これらは次回の【17-3-2】テーブル関連の要素のためのCSSプロパティ でまとめます。

display: tabledisplay: table-cell、そしてvertical-align を使ったサンプルは、
以前【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について の記事でも紹介しました。
vhという単位を使ってボックスを画面いっぱいにして、その縦中央にコンテンツを表示したい時にはテーブルの性質を使うのが最適というサンプルです。
↓クリックで別ウィンドウで開きます。

display:table-rowで要素をテーブルの行(tr)にする

テーブルセルは、ほっとけばず〜っと横に並びます。
セルを2行(2段)にしたいときは、テーブルでは <tr>を使いますね。
<tr>要素のような性質にしたいときは、要素に display: table-row を指定します。これで先ほどテーブルセルにした要素を囲んでやれば、行を変えることができるんです。
下のサンプルでは、セルを3つずつ <p>要素で囲んで2行にしています。

cell cell cell

cell cell cell

<div id="smp1_3">
<p> <!--p要素でセルを囲みます-->
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p> <!--2行目も-->
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>
div#smp1_3 {
	margin:1em 0;
	padding:0;
	display:table;
	border-collapse:separate;
	border-spacing:1em; /*セルの間隔が上下左右1emにしています*/
	background:#666;}
div#smp1_3 p {
	display:table-row;  /*セルを囲んだp要素にtable-rowを指定*/
	margin:0; padding:0}
div#smp1_3 span {
	display:table-cell;
	padding:1em;
	background:#ffc}

この <tr>化した <p>要素が無ければ、このように横にズラ〜っと並びますよ。

display:table-captionでキャプションをつける

テーブルは <caption>要素を使ってタイトルをつけることができますが、
(<caption>要素については [16-2] table にタイトルをつけよう(caption)に詳細)
これと同じコトを display: table-caption でできます。
下のサンプルは、<div>要素を使って caption を表示しています。

テーブルのタイトル

cell cell cell

cell cell cell

<div id="smp1_4">
<div>テーブルのタイトル</div>  <!--タイトル(キャプション)をdiv要素で-->
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>
div#smp1_4 {
	margin:1em 0;
	padding:0;
	display:table;
	border-collapse:separate;
	border-spacing:1em;
	background:#666;}
div#smp1_4 div {
	display:table-caption; /*table-captionを指定します*/
	line-height:1.5em;
	border-bottom: solid 1px #999;
	margin-bottom:0.5em;
	font-size: 85%;
    font-weight: bold;
	text-align:center}
div#smp1_4 p {
	display:table-row;
	margin:0; padding:0}
div#smp1_4 span {
	display:table-cell;
	padding:1em;
	background:#ffc}

display:inline-tableは親要素をインラインのテーブルにする

親要素に display: inline-table を指定すれば、テーブルを横に並べることもできます。

cell cell
cell cell
<div id="smp1_5">
  <span>cell</span>
  <span>cell</span>
</div>
<div id="smp1_5plus">
  <span>cell</span>
  <span>cell</span>
</div>
div#smp1_5, div#smp1_5plus {
	margin:0;
	margin-right:0.5em;
	padding:0;
	display:inline-table;
	border-collapse:separate;
	border-spacing:1em;
	background:#666;}
div#smp1_5 span, div#smp1_5plus span {
	display:table-cell;
	padding:1em;
	background:#ffc}
div#smp1_5plus span {background:#fcf}

displayプロパティのその他のテーブル関連の値でグルーピングする

このほか、テーブルを構成する要素には、横列をグループ化する <thead> <tbody> <tfoot> や、縦列をグループ化する <colgroup> <col> がありますが、displayプロパティでこれらを指定することもできます。
グルーピングすることによって、背景などのスタイルの指定が省力化できます。

<thead> の性質は、display: table-header-group
<tbody> の性質は、display: table-row-group
<tfoot> の性質は、display: table-footer-group
<colgroup> の性質は、display: table-column-group
<col> の性質は、display: table-columnで指定できます。

サンプルは、横列グループにする display:table-header-group を使って背景をピンクに。
また、縦列グループにする display:table-column-group と display:table-column を使って、背景を赤・グレー・イエローにしています。

cell cell cell

cell cell cell

cell cell cell

cell cell cell

<div id="smp1_6">
<div id="colg"><div id="col1"></div><div id="col2"></div><div id="col3"></div></div>
<!--2行目は↑縦列グループ化のための要素群-->
<div id="thd">  <!--横列グループ化のための要素(thead用)-->
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>  <!--ここまで id="thd"-->
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
<p>
  <span>cell</span>
  <span>cell</span>
  <span>cell</span>
</p>
</div>
div#smp1_6 {
	margin:1em 0;
	padding:0;
	display:table;
	border-collapse:separate;
	border-spacing:1em;
	background:#666}
div#smp1_6 p {
	display:table-row;
	margin:0; padding:0}
div#smp1_6 p span {
	display:table-cell;
	padding:1em}
div#smp1_6 div#colg {display:table-column-group} /*colgroupの宣言*/
div#smp1_6 div#col1, 
div#smp1_6 div#col2, 
div#smp1_6 div#col3 {display:table-column} /*3つのdivをcolに*/
div#smp1_6 div#col1 {background:red}
div#smp1_6 div#col2 {background:#ccc}
div#smp1_6 div#col3 {background:#ffc}
div#smp1_6 div#thd {display:table-header-group; background:#fcf} /*theadは背景ピンクに*/

<thead>要素の使い方はなんとなくわかると思うけど、
HTML要素の <colgroup> <col> のグルーピングの仕方はちょっと特殊ですね。
過去記事でそれぞれの使い方をまとめていますので、見てみてください。
[16-5] table横列グループ化(thead, tbody, tfoot)
[16-6] table縦列グループ化(colgroup, col)

正しいコンテンツ・モデルじゃないとエラーになるよ

ここで、display: table 関係を使う時の注意点です。
使用する要素は、当然ながら正しい「コンテンツ・モデル」じゃないとエラーになります。
コンテンツ・モデルとは「要素の中にどんな要素を置くか」のルールです。

例えば、グループ化するための要素に<span>要素も使えますが、その中に入る要素はフレージング・コンテンツじゃないとダメ。<p> や <div> は入れられない。
この法則までは変えられません。
なので、グルーピングするなら無難なところで<div>とかを使っておこう。

コンテンツ・モデルについては、
[37] HTML5要素の「カテゴリー」を見てみよう
[38-1] 「コンテンツ・モデル」で要素のルールを見てみよう
[38-2] 「コンテンツ・モデル」一覧

をご覧ください。

次回予告

さて、display: table などを使うためには、テーブル用のCSSプロパティを知らなきゃ話になんないので、次回はテーブル用のCSSプロパティをまとめます。
またも displaypプロパティの流れの途中で別のプロパティの話になっちゃいますが、やはりひとまとめにしておいたほうがイイと思うので。

そのあと、要素をルビっぽくする display: ruby をやりますが、その直後もこのパターンで「ルビに関するCSSプロパティ」の記事が続く予定です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.