デザインをする言語CSS

ウェブサイトにおいて、デザイン・装飾を担うものが、CSSです。

CSSは、CSS専用のファイルを新たに作ります(「style.css」といった具合に)。
※CSSファイルの拡張子は「.css」です。

そして、HTMLから「このCSSファイルを読み込む」といった指示をします。
そうすることで、データだけであったHTMLにデザインが組み込まれます。

つまり、ここで読み込むファイルを変えるだけで、ホームページをデザインがガラッと変わります。即席で例を作ってみました。

まずは、今回あなたが作ろうとしているウェブデザイン。


まあ、何度も見ていますね。
これを、CSSファイルだけ取り替えます。


ね? 全然変わったでしょう?

CSSでデザインするメリットを挙げると・・・
・CSSファイルを一か所変更するだけで、ウェブサイト内全てのページに反映される
・作業効率が格段に上がる
・HTMLのソースが複雑にならない
・検索エンジンに好まれる(検索結果で上位表示されやすい→アクセスが集まりやすい)ウェブサイトになる
などなど。

CSSが出来る前の話です。 昔は、文字の色を変えるときに、

<font color="red">強調した文字</font>

などと書いていました。

だから、ページ内に100の赤い文字があって、それを全て青くしたいと思ったら、いちいち100個の

<font color="red">

を、

<font color="blue">

へ変えなければなりませんでした。

これを、CSSを使えば、

.accent-color { color: red;}

から

.accent-color { color: blue;}

と一行変更するだけで良くなります。

今でこそ当たり前ですが、導入された当時は画期的なことでした。

この画期的な言語を、これからあなたには勉強してもらいます。
それでは、はじめましょう。


関連記事

  1. 自己表現ツールとしてのウェブサイト

  2. タグへ対する装飾

  3. 表の概念

  4. 写真をあれこれ装飾する

  5. 今までにやったことを用いて、コンテンツを装飾する

  6. ページ全体を装飾する

お手本ナビの無料HPデザイン

ランダムピックアップ