デザインの変更

ここまでの説明でHTMLファイルとスタイルシートのファイルについては理解できましたね。ホームページの内容はHTMLファイルに記述し、デザインはスタイルシートファイルに記述するんでしたね。

ということはスタイルシートのファイルを書き換えるとデザインが変更できるということです。ここで一応確認のため解説しておきますが、スタイルシートの ファイルは基本的に1つのデザインに対してひとつあればよいのです。大抵のサイトの場合、デザインのパターンは1つでしょうから、スタイルシートのファイ ルはひとつあればよいのです。

例えば上のテンプレートでは「main.css」というスタイルシートのファイルを「style」フォルダに入れています。そうすると各HTMLファイルには以下のように書かれていきます。

<link href=”style/main.css” rel=”stylesheet” type=”text/css” />

って書いたり(一番上の階層)

<link href=”../style/main.css” rel=”stylesheet” type=”text/css” />

って書いたり(2番目の階層)

<link href=”../../style/main.css” rel=”stylesheet” type=”text/css” />

って書いたり…(3番目の階層)

フォルダの階層に注意してよくご覧ください。赤い文字の部分です。このように1つのスタイルシートのファイルでサイト全体のデザインを管理していますから、スタイルシートを変更すればサイトのデザインが変えられます。

mono-b-8-1 mono-b-7-1 mono-b-6-1
mono-b-5-1 mono-b-4-1 mono-b-3-1
mono-b-2-1 mono-b-1-1

これらのページのHTMLは全て同じです。

スタイルシートのファイルの文字の色や背景色の部分を変更し、メニューボタンや見出しの背景画像の色調を変更しているだけです。ですからHTMLファイルには一切手を加えないでデザインを一気に変更することも可能です。

<<前のページ | スタイルシート「main.css」を編集する>>

こちらの記事も参考になるかも