CSSレイアウトの魅力 - 容易なデザイン変更

CSSの外部ファイル化で、共通部分の指定変更の手間を一気に省く。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウトの魅力 - 容易なデザイン変更

CSSの利点は訪問者のためだけではありません。CSSには3種類の記述方法がありますが(CSS基礎講座参照)、この内の「外部ファイルによる記述」を行うことで、デザインの変更を簡単に行うことができるのも大きな利点のひとつです。

外部ファイルによるCSSの記述では、サイト内の全てのページから外部CSSファイルに対しリンクをはる形になりますが、この外部ファイルでの記述を修正することで、各ページで使われている同じid・クラス名の部分を一括して変更することができます。

例えば、全てのページで「背景色を赤、文字色を白」という部分があったとします。この部分に「class="bgRedFontWhite "」というクラス名を当て、外部CSSファイルに以下のように記述します。

[CSSの記述例]

.bgRedFontWhite { background:#ff0000; color:#ffffff; }

このような状態から背景色を黒に変更したいときは、外部ファイルの背景色の指定部分「bakcground:#ff0000」を「bakcground:#000000」に変更することで、「class="bgRedFontWhite "」が記述された部分全ての背景色を一気に変更することができます。

背景色以外にもサイトの幅やフォントサイズ、罫線の有無・色など、共通のid・クラスを付けた部分であれば同じように変更できるわけですが、ホームページビルダーを利用している場合などでは、全ページに共通の部分に変更を加えようとすると全てのページに修正をかけなければならず、とても手間がかかります。その手間を、CSSを利用(外部ファイル化が前提)することで、大きく軽減させることができます。