ホームページのデザインにはCSSを使う
HTMLで作ったホームページは、なんだか味気ないですよね。
それもそうです、デザインが入っていないからなんです。
情報を見やすくしたい。イメージを伝わるようにしたい。などなど、デザインを入れる事で様々な効果を得ることができます。
CSSというコンピューター言語を使うことで、思い描いたデザインをホームページに施すことができます。
CSSって何？
CSSはCascading Style Sheet(カスケーディング・スタイル・シート)の略で、スタイルシートと呼ばれるコンピューター言語です。
以前に少し紹介しましたが、主にホームページのデザインを指定するために使われます。
（第5回：ホームページに文章を入力する・改行する）
CSSは、HTMLファイルに直接書き込んだり、HTMLタグに書いたり、専用のCSSファイルを作成してホームページにデザインを入れていきます。
3パターンもありますが、専用のCSSファイルを作成する場合がほとんどです。
というのも、HTMLファイルやタグに直接書き込む場合だと、見出しや表などのデザインを都度書き込まなければならないからです。
Webサイト全体で1回しか登場しないタグであればそれでもいいかもしれませんが、見出しや表は複数のページに登場する場合がほとんどでしょう。
その都度CSSを直接書き込んでいたらHTMLファイルが複雑になり、とても読みにくいHTMLファイルが出来上がってしまいます。
読みにくいだけでなく、作業量はページの分だけ膨れ上がります。想像しただけで恐ろしくなります。
ですが、専用のCSSファイルを作成し、ページ毎に同じファイルを読み込ませてあげることで、全てのページでデザインの統一が図れるようになりますし、見出しや表のデザインを変える場合にも1つのファイルを編集すればいいだけなのでお手軽です。
HTMLタグでホームページをデザインしないようにする
HTMLで太字やリストの表示ができますが、それでデザインをしないで、CSSを使うようにしましょう。
太字にしたいからstrong要素を使ったり、h要素の見た目にしたいからh要素を使った場合、それが本当に文法的に正しい使い方だった場合は問題ありませんが、もしも見た目（デザイン）を整える為だけに使った場合、たとえ見栄えは素晴らしく出来上がったとしても、検索ロボットに文章構造が正しく伝わらないので、検索結果にも影響が出かねません。
HTMLはページの持つ情報の構造を定義する為の言語です。適切なHTMLタグの使い方を忘れないようにしてください。
CSSを使うと、いろいろなデザインができる
それでは具体的にCSSを使うと何ができるのかを少し紹介しましょう。
・文字のサイズや色、書体を指定する
・文字の行間や文字間隔を広げたり狭める
・文字の背景に画像を入れたり色を付ける
・文字にリンクを付けた際に出る下線を消したり、色を変える
・要素同士の間隔を広げたり狭める
・表に線や背景を付ける
・Webページを2列・3列にして表示させる
・文字を中央寄せ・左寄せ・右寄せにする
などなど、できることはこの他にもたくさんあります。
ホームページをデザインするには、この「CSS」を使ってできる様々なことを組み合わせて作ります。
CSSを上手に使ってホームページを作成できると、思い通りのデザインをホームページに入れることができます。
まとめ
・CSSはホームページのデザインを指定するために使われるコンピューター言語
・「HTMLファイルに直接書き込む」「HTMLタグに直接書き込む」「専用のCSSファイルを作成してそこに書き込む」という方法がある
・ほとんどの場合、「専用のCSSファイルを作成してそこに書き込む」
・HTMLタグをデザインの目的で使う事はしない
・CSSは文字のサイズや色、要素同士の間隔を調整することができる
・CSSを使ってできることを組み合わせてデザインを形に起こす
