CSS研究

先日からまたデザインを修正しているわけですが、そうしようというモチベーションになったきっかけを少し。

CSSというのはHTMLのデザインを定義するものであって、たしかにその通りです。でもCSSを使ったからって何が良くなるのか考えないと、使う手間だけ損してます。

では、何が良くなるのか？CSSに合わせて何を変えるべきなのか？というと、それはやはりHTMLです。

HTMLはもうデザインに依存してはいけないのです。HTMLは本来の「文書を構造化する」役目に徹するべきなのです。

見出しは<Hn>タグを使い、<font>タグとかは絶対禁止。テーブルでレイアウトするなんてもってのほか。

簡単に言えば、CSSを切っても(IEではできないが、NetscapeやOperaなら可能) 内容の読めるHTMLページにしないといけないと言うことですね。

CSSは結構難しいですが、正しく使い込めば多分テーブルを使ったのとほとんど同じレイアウトはできると思います。

そういうわけで、私も試してみました。

ぜひぜひNetscapeなどを使って、CSSをオフにしてご覧ください。寂しいながらもきちんと読めるでしょ？

iモードとかの携帯電話用貧弱ブラウザからも読みやすくなると言う副作用もあって (それってブラウザがCSSに対応していないって事なんだけど)、ますます奥の深いCSSでございます。

{http://images.amazon.com/images/P/4798000272.09.TZZZZZZZ.jpg|http://www.amazon.co.jp/exec/obidos/ASIN/4798000272/munepicom-22}

詳解HTML&スタイルシート辞典詳解HTML&スタイルシート辞典岡蔵龍一著

HTMLとスタイルシートがみっちり詰まったリファレンスです。ジャンル毎に分類してあって使いやすく、またCSSの理念に沿った解説がなされていて、今後のHTMLをどう組み立てるべきかの参考にもなります。

革命的CSS (Soddhia's ddersonnel内) - このような使い方に刺激を受けて、私もまねを始めました。 CSSは2種類＋オフの3パターンが用意されていて、ネスケで切り替えてみたりするとCSSのなんたるか、HTMLはどうあるべきかが垣間見えてきます。
CSS でイケてるデザインサイトリンク集 - 上のサイトのようなところを集めたリンク集です。特に「津波荘」というページのデザインが、数種類用意されているCSS全てとってもかっこよいので必見です。
タダなび　WEB制作教室 - 私のページと似たレイアウトですが、従来からのテーブルを使ったものです。ソースを見比べると実現方法の違いがよくわかると思います。ただ、CSSの解説で「HTMLだけでは表現しきれない文字装飾などを実現させる」とあるのが HTML/CSSの理念と異なっていて残念です。