CSS組みの時の作業の流れ
- トモ・リーン
- 実際に組みだす前に、簡単に作業の流れを説明するわ。
パンチ
- トモ・リーン
- 本当は組もうかと思ったんだけど、大まかな流れを説明しておいた方が分かりやすいかと思ったのよ。
- ケンジ
- は、はい。どぞ～。
- トモ・リーン
- CSSでのコーディングの手順はザックリ言うとこうよ。
- テキスト、イメージの配置
- HTMLタグでテキストの意味にあったマーキングをする
- レイアウトをする
- ケンジ
- ZZZZZZZZZZZZZ・・・
- トモ・リーン
- （殺）
- ケンジ
- えっ、これって大きな意味があるの？
悪いけど、俺ヒマじゃないんだよね～～！
- トモ・リーン
- 意味はあるわよ（怒）
- トモ・リーン
- CSSでのレイアウトは、テーブルでのレイアウトとは全く逆の作業手順なのよ。
- ケンジ
- う～～ん、そうかも。
- トモ・リーン
- よくあるテーブル組みでのコーディングの流れはこんな感じね。
- トモ・リーン
- レイアウトを大きくtableタグで区切る
- 1の中にtableタグでパーツを作っていれる
- さらに2の中にtableタグで細かなパーツを作っていれる
- さらに3の中にtableタグで微妙なパーツを作っていれる
- テキストと画像を入れる
- ケンジ
- うん、こんな感じだね！
- トモ・リーン
- 問題になるのがtableタグの入れ子ね。
- あんまり入れ子をやりすぎるとブラウザが落ちるし、SEOにも良く無いの。
- 入れ子にしないでcolspanやrowspanを駆使してレイアウトを組むのをやりすぎるとメンテナンス性が悪いものになるわ。
- トモ・リーン
- あと、CSSでのコーディングの流れの【2. HTMLタグでテキストの意味にあったマーキングをする】だけどこれはCSSでレイアウトするときにも便利なんだけど、SEO（検索エンジン最適化）にもいいのよ～。
- ケンジ
- う～～ん、俺CSSはまだ勉強中だけどさ、【2. HTMLタグでテキストの意味にあったマーキングをする】の項目はやらなくても、divやspanタグにclassやidを付けて制御できちゃうよね？
「CSSでレイアウトするときにも便利」ってのが分からないんだけど。
- トモ・リーン
- ん～～、じゃあこの図をみて！
- トモ・リーン
- こうすると、全ての要素を囲んでいるdivのみにclassをつけるだけで中の要素にはclassやidをつけなくてもスタイルを指示できるのよ。
- ケンジ
- ふ～ん。
そっか。【2. HTMLタグでテキストの意味にあったマーキングをする】って言うのは、色んなタグを使うことになるからセレクタの親子関係を利用してスタイルを作ると「CSSでレイアウトするときにも便利」ってことだね。
- トモ・リーン
- まっ、こーすると・・・
- 使うセレクタ名が減る
→CSSの管理がしやすい（セレクタの親子関係が分かりやすいので連動しているものが分かりやすい） - 同じレイアウトを使うときもHTMLへのセレクタ名の記述が少ない
→記述が減ると、それに関連するミスも減る
- 使うセレクタ名が減る
- ケンジ
- ふ～～～ん。
・・・・・・・・・。
・・・。
- ケンジ
- ごめん、もう俺限界が近づいてるみたい・・・。
（これも、キャラに合わない技術トークをしすぎた報いか・・・無念）
グフっ！
- ケンジ
- ・・・・・・
- トモ・リーン
- まぁ、CSS組みの時の作業の流れのこの順番って↓
- テキスト、イメージの配置
- HTMLタグでテキストの意味にあったマーキングをする
- レイアウトをする
【2. HTMLタグでテキストの意味にあったマーキングをする】がやりやすい順番なのよ。
次回からは、この順番にそった実際の流れを説明するわね～！
- ケンジ
- ・・・・・・
（へんじがない。ただのしかばねのようだ。）
- 今回のポイント！
- CSSでのコーディングはtableの組み方とは真逆なので、気をつけよう！