初心者のためのHTML入門講座

デザインを整える

デザインを整えるためにはスタイルシートを使うと便利です。スタイルシートとは、さきほど作ったHTMLファイルのヘッダー部分に書き込まれたデザインを変更する道具です。

スタイルシートを作成してデザインを指定する事はメリットがたくさんあります。例えば、H2タグがたくさんある場合、HTMLファイルだとそれぞれの見出しに<H2></H2>タグにデザインを指定していかなければなりません。しかし、スタイルシートだとH2{…}を一つ書くだけでH2の見出し全部のデザインを変えることができます。

スタイルシートはHTMLファイルの一部ではありますが、文法はHTMLと異なります。下に使用例を示しておきます。

H1{color: greenyellow ; background: green; }

デザインをする対象をセレクタといいます。上の例ではセレクタはH1です。また、{ }で囲まれた部分にはプロパティ(属性)とその値を書き込んでいきます。H1の文字の色はGREENYELLOWで、H1の背景の色がGREENということを意味しています。COLORとBACKGROUNDがプロパティで、GREENYELLOW とGREENが値ということになります。

今回のHTMLファイルではそれほどメリットはありませんが、特にページが多くなってくるとスタイルシートだけを別にするという方法もあります。スタイルシートの書き込み方は次のページにゆずります。


次の項目→CSSファイルの作成