見出し・見出しの装飾

ページ、見出し、段落の背景を組み合わせる
ページ、見出し、段落の背景を組み合わせる 2012年12月5日

ページ、見出し、段落の背景を組み合わせる表示例 ページ全体に背景を入れたり、見出しや段落に背景を入れることで、 […]

見出しを背景画像で装飾する
見出しを背景画像で装飾する 2012年12月4日

見出しの装飾を背景画像を使って行ないます。スタイルシート(CSS)でデザインするときに最も良く使われる手法と言ってよいでしょう。

見出しをCSSで装飾する(背景を角丸にする)
見出しをCSSで装飾する(背景を角丸にする) 2012年11月8日

見出しの背景を角丸にするには「border-radius」というプロパティを使います。IE8以前やFx3.6は非対応です。

見出しをCSSで装飾する(背景に影をつける)
見出しをCSSで装飾する(背景に影をつける) 2012年11月8日

見出しの背景色に影をつけるには「box-shadow」というプロパティを使います。ボックスに影をつけるプロパティです。IE8以前やFx3.6、Safari5は非対応です。

見出しをCSSで装飾する(文字に影をつける)
見出しをCSSで装飾する(文字に影をつける) 2012年11月7日

見出しの文字に影をつけます。「text-shadow」というプロパティを使いますが、IEは対応していません。「ie-css3.htc」のライブラリを使えば影はつきますが、あまり美しくありません。

見出しをCSSで装飾する(枠線・ボーダー)
見出しをCSSで装飾する(枠線・ボーダー) 2012年11月7日

見出しの文字の周りに枠線を入れます。スタイルシートを使って変更しましょう。わかりやすいように枠線の幅は7ピクセル、枠線の色は「#CCC」、文字の周りに10ピクセルの余白部分を設けます。

見出しをCSSで装飾する(背景色)
見出しをCSSで装飾する(背景色) 2012年11月7日

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

見出しをCSSで装飾する(文字色)
見出しをCSSで装飾する(文字色) 2012年11月7日

見出しの文字の色をスタイルシートを使って変更しましょう。文字の色の変更は<font color=”★”> ~ </font>でも指定できますが、スタイルシートを使うことが推奨されています。

見出しをCSSで装飾する(文字サイズ)
見出しをCSSで装飾する(文字サイズ) 2012年11月6日

見出しのテキストサイズ(文字の大きさ)をスタイルシートで変更してみましょう。文字サイズの単位は様々ですが、閲覧する人が自分にあった文字サイズに出来るようパーセントやemなどの相対的な値にすることが望ましいです。

見出しを記述する
見出しを記述する 2012年11月6日

見出しは<h★>ここに見出しのテキスト</h★>と記述します。★は1~6までの数字が入り、数字の小さいほど見出しのレベルが高い、つまり重要度が高いと言うことをあらわします。