ジント兄さんのテストブログ

ジント兄さんがFC2ブログのカスタマイズを練習するために作ったブログです。

カテゴリ別のリンクを探している方、どんな記事があるかをもれなく把握したい方は、記事一覧のページをご覧になってください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

display:inline-blockとdisplay:table-cellの使い分け

CSS3のdisplayプロパティの値のinline-blockとtable-cell、なんだか似ているけど、どっちを指定すればいいのか?このような迷いが生じたことがある人はきっといるのだろう。2つは何が違うのか、最初に結論を書いておく。テーブルのセルのように横並びの関係が崩れないのがtable-cellで、inline-blockはそうではない。

HTMLの<table>などのタグによるテーブル(表)は、セルの位置関係が崩れない。どうしてかというと、崩れたら表の意味が変わってしまい、正しく伝わらないから。崩れると困るから、崩れない。ページの利用者が表示領域を調節できる環境で、表示領域の横幅をどんどん狭くして、もしかしたら1つ1つのセルの幅がものすごく狭くなっていって利用者にとって狭くて見にくいと思うぐらいになっても、ブラウザはセルの横並びを決して崩さない。このような崩れないという特徴を持っているのが、display:table-cellだ。

決して崩れないスタイルは表を表現するには必要なものだ。しかし表でもなく、なんとなく崩れないのはイイことだと思ってtable-cellを指定するのは、軽率だ。もしかしたらいるかもしれない、その横並びを崩したいと思うようなページの利用者の思いに沿っていないスタイル指定だから。table-cellを指定する際には、崩れたら困るという納得がいく理由が必要だと私は思う。

関連するかもしれない記事

コメント

0: ジント兄さん
メッセージをどうぞ。

トラックバック

この記事のトラックバックURL:http://jislotz.blog.fc2.com/tb.php/2-51502e0a

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。