それでは「style.css」をメモ帳で開いて以下のように記述して見ましょう。/* ～ */の部分はコメントなので書かなくて良いです。
h1 {
color: #66CC00; /*カラーの指定*/
}
h2 {
font-style: italic; /*斜体の指定*/
color: #FF0000; /*カラーの指定*/
}
そして上書き保存しましょう。「index.html」をブラウザで見るとどんな風になっていますか？こうなりました？これだけでずいぶん印象が変わってくるものですね。
簡単に解説すると今回は、<h1> ～ </h1>と<h2> ～ </h2>の部分の装飾をし ました。<h1>ではカラー(色)の指定のみして、<h2>ではカラーの指定と、イタリック(斜体)の指定をしています。
この「#FF0000」などでカラーを表しています。こちらにカラーチャートがありますのでいろいろなカラーで試して見ましょう。
CSSで見出しの装飾
もう少し書き足してみましょう。以下のように記述してください。
h1 {
color: #FFFFFF; /*カラーの指定*/
background-color: #669900; /*背景色の指定*/
padding: 15px; /*余白の指定*/
text-align: center; /*中央揃えの指定*/
}
h2 {
font-style: italic; /*斜体の指定*/
color: #FF0000; /*カラーの指定*/
text-decoration: underline; /*下線の指定*/
padding-left: 30px; /*左余白の指定*/
}
いかがでしょうか、記述ミスがなければこのように表示されるはずです。
でも、もうちょっとタイトル風にしたいでしょうか？では次のページでさらにいじってみましょう。
