CSSを編集してデザインを変更する

CSSでレイアウト、デザインされたホームページはデザインの変更が簡単です。もちろん大幅なレイアウトの変更などは初心者にはハードルが高いですが、基本のレイアウトはそのままで背景の色や画像、文字の色などを変更していくことでまったく別の雰囲気のホームページになります。

背景画像や文字の色を変えるだけでこんなに雰囲気が変わる!!

ホームページ制作例1 ホームページ制作例2
ホームページ制作例3 ホームページ制作例4
ホームページ制作例5 ホームページ制作例6
ホームページ制作例7 ホームページ制作例8

上のホームページのHTMLはすべて同じです。CSSでホームページを作成している人にとっては当たり前に思うことですが、これまでホームページビルダーなどでソフトウェア任せで作成してきた人にとってはちょっと驚くかもしれません。

確かによく見ればメニューの位置や書かれている文章は同じです。なぜここまで同じHTMLでデザインを変えられるのかというと先ほどから説明しているようにCSSですべてデザインしているからです。もう一度CSSファイルを見てみましょう。

CSSを見てみるアルファベットで書かれている部分は何のことやらさっぱりわからないと思いますが、所々に日本語のコメントが入れてあります。「文字の色」とか「何々の背景色」など。その部分を変更していくことでホームページの色使いを変更していくことが出来ます。

そしてCSSの便利な点として、このCSSファイルひとつを変更すれば、あなたのホームページすべてのデザインを変更することが可能となります。なぜならCSSファイルはすべてのページで共通で使うことが出来るからです。ホームページのタイトル画像を各ページで同じファイルにリンクさせて使うのと考え方は同じです。

ですからたとえば「春が近づいてきたから背景をちょっと明るく変えてみようか」と思ったら背景画像のファイルを変更したり色を変更したりという作業はCSSファイルひとつで行えばよいのです。これまでそのようなことをする場合、すべてのページで背景画像や背景色についての記述を書き換えたりする必要があったと思います。という以前にそんな面倒なことやりたくもなかったかもしれません。

ホームページの制作作業、更新作業も効率的に

HTMLソースがシンプルであることは制作作業や更新作業を効率よくすることにも役立ちます。HTMLソースが複雑であるとちょっと文章を変更したりするだけでレイアウトが崩れてしまったり、どこをどう直していけばよいのかさっぱりわからなかったりします。

しかしCSSでレイアウトされたホームページではHTML自体がシンプルですのでレイアウトが崩れるようなこともなく簡単に、効率よく制作作業、更新作業が出来ます。その作業にかかる時間も大幅に削減できるはずです。

更新作業がラクになるということはより更新作業をする気になるということでもあるでしょう。定期的によく更新されているサイトは訪れても楽しいですし、信頼感もアップします。そのようなホームページは当然検索エンジンでも次第に上位に表示されるようになります。

これまでホームページビルダーの「かんたん」などで作成していた人にとっては最初はちょっと戸惑うかもしれません。でもきっと数ページを作成する間に如何にラクかということに気がつくでしょう。さぁ、あなたもこのテンプレートを使ってワンランク上のホームページを目指しませんか?

次のページ…テンプレートではじめるCSSレイアウトホームページ