fc2ブログ

2005-11-17

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

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

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

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

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

初めは大胆に 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 さんに感謝します。

a:first-letter で IE がおかしくなる

(主に IE で)大きな問題もなく CSS の仕上げに取りかかっていたら、かましてくれたよおやっさん。

a:link {
 color: #333;
}
a:visited {
 color: #999;
}
・
・
・
h3:first-letter,
h3 a:first-letter {
 color: #c33;
}

と書いたら、IE で a:linka:visited への指定が無視されるという謎現象が発生。a:first-letter が原因らしい。でもこの記述を削除すると Firefox でリンク文字列への first-letter 指定が効かなくなるし……せっかくハックを使わずにここまでやってきたのでと思ったら使ってた……泣く泣く諦める。ちょっと貧相になったけど仕方ない。

もう誰かが IE を擬人化でもしてくれない限りあれを認められない。萌え IE たん。そして西尾維新の戯言世界へ放り込んでやりたい。