この章では、ウェブサイトの装飾を行います。
HTMLさえしっかり組んでしまえば、デザインはスムーズに進みます。
それでは、CSSとはどういうものか、CSSで出来ることからお話ししていきましょう。
１． デザインをする言語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;}と一行変更するだけで良くなります。
今でこそ当たり前ですが、導入された当時は画期的なことでした。
この画期的な言語を、これからあなたには勉強してもらいます。
それでは、はじめましょう。
あなたも、サポートメールに参加しませんか？
|
『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。 |
|
※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。 |
