フルCSSサイトの超高速構築
Posted at 2005/06/15 (Wed) 18:02 +09:00 in CSS
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。
いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。（*勝手に命名）
- 作り方大公開（らしい）
- 画面デザインを領域に分け、名前を決めておく。
- 見出しレベルを確認。
- Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。
- 見出し付けを行う。
- メニュー項目のリスト化。
- DIVで各領域を確定。
- 上から順にCSSを定義。（ソースの出現順に。）
順を追って簡単に説明。
#Header、#Contentbody、#Layoutbody、#localnavi、#Footerなど、まずは領域に名前をつけ、各々の領域にはIDを振ることを想定しておく。
Web上のリソースは大半がテキスト。このテキストはそもそも第三者が読むことを想定した（された）文章である以上、構造化されていなければならない。
と、まずはリソース文書が構造化されていることを前提とする（外注・内注問わず、発注者側の問題であるが...）が、実際の見出しレベルを把握する。
作業はデザインビューで行う。なぜなら、テキスト貼り付け＆EnterでひたすらBOX要素<P>が作られていくからだ。コードビューへコピペをすると、後で段落のマークアップをする手間が発生してしまう。この段階では見出し要素やメニュー項目などの区別は気にせず、ひたすらリソースをDreamweaver上へ乗っけることに徹する。
既に確認済みの見出し項目をマークアップする。
Globalナビ、Localナビ問わず、メニュー項目を<ul>でリスト化する。
あらかじめ想定しておいた領域の定義付けをはじめる。[DIVタグを挿入]（右図参照）を活用して、まずはとにかくDIV囲みを一斉に行い、その後IDやclassの指定を行っていく。
最後に上から順にCSSを定義していく。
これら1～7の手順で作成していくと、大変スムーズなCSS定義が可能となります。ふむふむ実際に作業を想定していると....なんとスピードだけに留まらず、その他にもありがたい恩恵を享受できるではないか!
- ヌケ・モレなどの戻り作業が発生しにくい。
- キレイに整理されたCSSが完成。
- Web標準に準拠したHTML文書ができちゃう。
- ということは、必然的にアクセシビリティが高くなるし、高い品質を保証するHTML文書となりうる。etc....
なんだか、とっても魔法のような構築法だと思いました。終わり。