このサイトにおける複数のCSSコントロール活用方法

サイト設計の手法について

  • このサイトはWeb標準に準拠した、今流行のXHTML1.0+複数のCSSコントロールで制作してます。
*CSS(Cascading Style Sheet)カスケーディングスタイルシート:HTMLの<head>部分に、使用したいCSSのファイル名を記述してWebブラウザに読み込ませ、表示する位置や色などの指定を記述できるファイル。
・CSSを読み込んだWebブラウザは、HTML文書のボディ部分の記述と組み合わせて(レンダリングエンジンによって)画面構成し、ブラウザ内に表示する。
・ただし、ブラウザのメーカやヴァージョンによって、表示のしかた(解釈のしかた)が違うので、画面表示が微妙に異なることあり。
・主なレンダリングエンジンは、IE系の「MSHTMLエンジン」、Firefox、Mozila、Netscapeの「Geckoエンジン」、Safariの「KHTMLエンジン」、Operaの「Prestoエンジン」など。
  • このサイトでは、HTML文書の構造に合わせて、コンテンツを記述し、必要最小限のタグだけを使ってマークアップしてます。
  • 言い換えれば、このWebサイトのHTMLソースの記述はすべて、コンテンツの文字列ごとに、どの構造(階層)に所属するかを示すようなタグで挟んでいるだけです。
  • HTML文書の構造化といっても難しく考えることはなく、大見出し、中見出し、小見出し、段落、箇条書き、注意書き、脚注といった文書のパーツに分ければいいわけです。
  • なので、文字の大きさ、色、表示位置などデザイン的な要素(タグで言えば、サイズ、カラー、ポジションなどのプロパティ)などのタグは、HTML内に一切記述しません。
  • それらの指定・制御はすべて複数のCSSでコントロールするという手法になります。
  • ということで、これまでわりと良く行われてきた、ページレイアウトのためにテーブルを使用するとか、ちょっとした位置合わせのためのテーブル使用といったことはしてません。(テーブルはあくまで"表"で、レイアウト・デザイン等には使用するべきではないというW3Cからの勧告あり。)
  • とはいえ、これまでのブラウザはできが悪く、テーブルでも使わないと、ずれまくっていたのも事実です。(そんな勧告守ってたら、まともな表示にならないよと。)
  • ブラウザが誕生して15年、W3CのCSS(version)1が勧告されて10年、2006年になってようやく、まともなブラウザが出揃ってきたわけです。(いやあ、長かった。)
  • 最近のモダンブラウザ(コラム:モダンブラウザのシェア参照)であれば、この本来あるべき記述方法・手法で、おおむね正しく表示されるようになって。
  • ようやく本来の「階層構造化した、あくまで簡素なHTMLソースに対して、デザイン的な"文字サイズ、カラー、ポジション、プロパティなど視覚的な要素"のすべてを記述した複数のCSSでコントロールする」という手法が使える時代になったということですね。