はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
CSS組みの時の作業の流れ
2008/05/05
トモ・リーン
実際に組みだす前に、簡単に作業の流れを説明するわ。
パンチ
トモ・リーン
本当は組もうかと思ったんだけど、大まかな流れを説明しておいた方が分かりやすいかと思ったのよ。
ケンジ
は、はい。どぞ～。
トモ・リーン
CSSでのコーディングの手順はザックリ言うとこうよ。
  1. テキスト、イメージの配置
  2. HTMLタグでテキストの意味にあったマーキングをする
  3. レイアウトをする
ケンジ
ZZZZZZZZZZZZZ・・・
トモ・リーン
（殺）
ケンジ
えっ、これって大きな意味があるの？
悪いけど、俺ヒマじゃないんだよね～～！
トモ・リーン
意味はあるわよ（怒）
トモ・リーン
CSSでのレイアウトは、テーブルでのレイアウトとは全く逆の作業手順なのよ。
ケンジ
う～～ん、そうかも。
トモ・リーン
よくあるテーブル組みでのコーディングの流れはこんな感じね。
トモ・リーン
  1. レイアウトを大きくtableタグで区切る
  2. 1の中にtableタグでパーツを作っていれる
  3. さらに2の中にtableタグで細かなパーツを作っていれる
  4. さらに3の中にtableタグで微妙なパーツを作っていれる
  5. テキストと画像を入れる
ケンジ
うん、こんな感じだね！
トモ・リーン
問題になるのが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組みの時の作業の流れのこの順番って↓
  1. テキスト、イメージの配置
  2. HTMLタグでテキストの意味にあったマーキングをする
  3. レイアウトをする
【2. HTMLタグでテキストの意味にあったマーキングをする】がやりやすい順番なのよ。
次回からは、この順番にそった実際の流れを説明するわね～！
ケンジ
・・・・・・
（へんじがない。ただのしかばねのようだ。）
今回のポイント！
CSSでのコーディングはtableの組み方とは真逆なので、気をつけよう！
トラックバック(0)
このブログ記事を参照しているブログ一覧：CSS組みの時の作業の流れ
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/73
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4