見出しの文字を飾り付けてみよう

それでは「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;  /*左余白の指定*/
}

いかがでしょうか、記述ミスがなければこのように表示されるはずです。

でも、もうちょっとタイトル風にしたいでしょうか?では次のページでさらにいじってみましょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録