CSS で装飾してください。に参加

R'styleさんの CSS で装飾してください。に参加してみました。

R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。

画像は使わない（使えない）ので画像置換などで悩む必要はなかったんですが、ステキにするのが大変でした。能力のなさを痛感しつつ、なんとかできあがったものが以下。

• snow-covered

クリスマスっぽいのを目指したつもり。

初めは大胆に div 要素を削ったり付け足したりしていたのですが、途中で「構造を変えてしまったら意味がないのでは」と思い、やり直し。XHTML の大まかな構造は元とそんなに変わっていないはずです。が、その代わりに id 属性が多くなってしまいました。

追加した id 属性（9/10）

• div#wrapper
• p#intro
• div#content
• h4#paging_navigation
• ul#page_navi
• h2#navigations
• dl#navi
• dd#rss
• p#copyright

追加した class 属性（2/5）

• div.entry_text
• ul.entry_info

「見出しは基本的に表示し、特定の見出しだけ非表示にする」を実現させたため、ナビゲーションの見出しのあたりに苦肉の策感が漂っています。（IE が兄弟セレクタを解釈してくれれば……）

完成形を頭に置きながら HTML を書く場合、どうしても見た目のための HTML になってしまいがちです。大本の構造を変えずに CSS のみで工夫しようという試みはとても有意義だと思います。

個人的には、普段避けていた2カラムやカレンダーに触るいい機会になりました。食わず嫌いが克服できそうです。企画を考えてくださった R'style さんに感謝します。