最近、はてなダイアリーを通じてCSSに興味が湧いてきました。
なにしろ、このダイアリーの背景が一発で宇宙になったとき、密かに感動しましたもの。
個人サイト程度なら、手描きのレイアウト案からでも起こせてしまいますし。テキストエディタ一本でやってやれないことはない、というのも魅力。html装飾タグを覚えても、結局今後は未来が明るくないことを考えると、htmlは要素を作るところだけ覚えて、あとはcssで覚えた方がずーっと実践的。Webの標準ブラウザがFireFoxになる日はまだ遠そうですが、IEよりも扱いが楽だから、早いところお願いしますね、ほんとに。＞webの雲の上のお人たち。
CSSでのワークフローの実践例を探してみました。
このページを読んで思ったことは、書籍や文書を作る時と同じように作れるのはむしろCSSの方ではないか、ということ。DTPのワークフローに近い作り方はテーブルレイアウトよりもCSSだな、ということですね。
さっきの記事を参考にしつつ、今まで学んできたこととともに、自分なりにフルCSSのワークフローをまとめてみます。
- サイトの企画を立てる。
- 主な内容
- ターゲット読者
- 更新頻度
- 対象Webブラウザ
- 多くなりそうな要素（テキストサイトなのか、映像サイトなのか、写真サイトなのか、ブログ的なものなのか、ショッピングモールなのか、など）
- webサーバを選定する。
- レイアウトをいくつか下書きし、一本選ぶ。
- テーマカラー（色）をある程度決めておくと統一性が出て楽かも？
- 企画内容に応じたレイアウトにする。
- レイアウト下書きから区画を分け、div idでマークアップ。*1
- ヘッダ
- サイド
- フッタ
- その他
- 掲載要素を区分けし、idやclassでマークアップ。
- 目次
- シンボルマーク
- 本文
- 著作権メールアドレス
- その他
- テキスト要素を区分けし、マークアップ。
- 見出し1（h1など）
- 見出し2（h2など）
- 本文
- 写真、イラスト
- 本文などのテキストデータを用意する。
- 写真、その他付随するデータを用意する。
- マークアップ名に従って、divなどでわけたり、クラス名を付けながらhtmlにしていく。
- CSSを書く。
- リンクなどを確かめ、ローカルテスト。
- 誤字脱字その他のミスをチェック。
- サーバにアップ。（公開）
だいたいのところはこんな感じになるんじゃないかな……。
DTPのワークフローを思い出しながら書いてみました。
追加情報
実際、CSSワークフローをサイトエディタを使って行うときのことは、やはりメーカーサイトに情報がありますね。
それから、ブログから。
- Mac IE5対策関係など。
*1:ここでは要素名を付けることを指しています。
