CSSを編集してデザインを変更する
CSSでレイアウト、デザインされたホームページはデザインの変更が簡単です。もちろん大幅なレイアウトの変更などは初心者にはハードルが高いですが、基本のレイアウトはそのままで背景の色や画像、文字の色などを変更していくことでまったく別の雰囲気のホームページになります。
背景画像や文字の色を変えるだけでこんなに雰囲気が変わる!!
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
上のホームページのHTMLはすべて同じです。CSSでホームページを作成している人にとっては当たり前に思うことですが、これまでホームページビルダーなどでソフトウェア任せで作成してきた人にとってはちょっと驚くかもしれません。
確かによく見ればメニューの位置や書かれている文章は同じです。なぜここまで同じHTMLでデザインを変えられるのかというと先ほどから説明しているようにCSSですべてデザインしているからです。もう一度CSSファイルを見てみましょう。
アルファベットで書かれている部分は何のことやらさっぱりわからないと思いますが、所々に日本語のコメントが入れてあります。「文字の色」とか「何々の背景色」など。その部分を変更していくことでホームページの色使いを変更していくことが出来ます。
そしてCSSの便利な点として、このCSSファイルひとつを変更すれば、あなたのホームページすべてのデザインを変更することが可能となります。なぜならCSSファイルはすべてのページで共通で使うことが出来るからです。ホームページのタイトル画像を各ページで同じファイルにリンクさせて使うのと考え方は同じです。
ですからたとえば「春が近づいてきたから背景をちょっと明るく変えてみようか」と思ったら背景画像のファイルを変更したり色を変更したりという作業はCSSファイルひとつで行えばよいのです。これまでそのようなことをする場合、すべてのページで背景画像や背景色についての記述を書き換えたりする必要があったと思います。という以前にそんな面倒なことやりたくもなかったかもしれません。







