macでxhtml+cssレイアウトのWebサイトを制作する為CSSレイアウトに関する基本について


xhtml,CSSレイアウト
CSSハイブリッドレイアウト

ブログ(Movabletypeなど)で使用されて一気にメジャーな手法になったxhtml,CSSレイアウトを当サイトでも使用しています。

CSSレイアウトを使用する利点、不利な点には以下の点が考えられます。

CSSハイブリッドレイアウトの利点

  • CSSを外部ファイルにすれば装飾関係の設定の値を外部ファイルに集中でき、ページファイルの容量が抑えられる。
  • CSSを外部ファイルにする事で一つの外部ファイルを変更する事でサイト全体に反映できる。サイトの管理、変更、更新が楽になる。
  • ページファイル内のテキスト以外の無駄なデータがなくなるのでSEO対策にもなる。
  • サイトリニューアルの際もうまく作ればCSSファイルと参照画像の変更だけでサイトの印象をガラッと変える事ができる。

CSSハイブリッドレイアウトの不利な点

  • OS(mac,Windows)、ブラウザによって表示に差があるために制作に手間がかかる。新しいバージョンのブラウザがリリースされると表示が崩れる場合もある。
  • ブラウザによっては印刷時にレイアウトの崩れ、背景画像のズレなどが起こる可能性がある。
  • OS(mac,Windows)、ブラウザ毎にCSSを用意してJavascriptで振り分けると回避できるが、更新時のレイアウトの変更が難しくなりCSSの修正が大きな負担になる。レイアウト変更時の手間が楽になるというCSSレイアウトをする意味がなくなる。
  • 表示の崩れないCSSレイアウトのサイトを制作する会社、デザイナーが多くない。
  • 手間がかかり、ある程度の知識のあるデザイナーに頼むために価格が高くなる。

CSSハイブリッドレイアウト
当サイトのCSSレイアウトの考え方

当サイトでは上記のような有利な点、不利な点を考えて、CSSはOSは最新ヴァージョンを対象とし、ブラウザのヴァージョンは1世代前までを考え、それ以前のヴァージョンは無視する。

更新、レイアウト変更時の手間を考えてCSSファイルは一つだけとし、ブラウザ特有の裏技などは使用せずにシンプルに作る。表示速度の事も考えてJavascriptでOSなどの振り分けは行わない。

ブログ(Movabletype)のCSSと同一のものを使用してサイトのデザインとブログのデザインを同一にする。という考えで制作しました。

更新情報はRSSで配信しております。feed RSSはこちら>>
よろしければご使用のRSSリーダーにご登録ください。
My Yahoo!に追加 Add to Google Subscribe with livedoor Reader はてなRSSに追加

自動更新バナー