見出しをCSSで装飾する(背景色)

見出しをCSSで装飾する(背景色)見出しをCSSで装飾する(背景色)の表示例

見出しの文字の背景色をスタイルシートを使って変更しましょう。文字の周りに10ピクセルの余白部分を設けます。

カラーコードで指定する

padding: 10px;
background: #66CC00;

のように書きます。どんなカラーコードでどんな色になるかWebセーフカラーのカラーチャートをごらん下さい。

カラーネームで指定する

padding: 10px;
background: turquoise;

のように書きます。どんなカラーネームでどんな色になるかWebカラーネーム(1)~(6)をごらん下さい。

CSS記述例

見出しを記述する」の<head> ~ </head>内に以下を記述します。

<style type="text/css">  
<!--
h1 , h2 , h3 , h4 , h5 , h6 { padding: 10px; }
h1 { background: #66CC00; }
h2 { background: #87cefa; }
h3 { background: #66cdaa; }
h4 { background: limegreen; }
h5 { background: turquoise; }
h6 { background: navy; }
-->  
</style>

見出しをCSSで装飾する(背景色)の表示例

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