CSSでテーブルレイアウトを作るメモ #CSS

CSSでテーブルレイアウトを作るメモ #CSS

懐かしのテーブルレイアウトをCSSを使って表現すると、レスポンシブを考えるときにも便利だって気づきました。

htmlのほうでは、普通のブロック構成をとります。

CSSのほうで、割り当てたclassに対してdisplayのプロパティを与えて、value(値)にテーブル表示をするものをいれていきます。

念のための確認、スタイルシート(CSS)の基本の「き」

CSSの構造は

セレクタ { プロパティ: ; }

で作られます。

セレクタのブブンにCSSを適用したい場所の名前を書きます。名前の書き方は、htmlだったり、class名だったり、ID名だったりが基本です。

プロパティのブブンにどんなCSSを適用したいかを書きます。今回のだと表示に関するモノを設定したかったので、displayというプロパティを設定しました。

のブブンにプロパティで設定したモノのの中身を設定します。

だから、イメージ的には

CSSを適用したい場所(何が) { 適用したいCSS(どうする): 適用したいCSSの中身(何を); }

こんな感じ?


Back to Top