見出しをCSSで装飾する(枠線・ボーダー)

見出しをCSSで装飾する(枠線・ボーダー)の表示例

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

枠線の種類

見出しをCSSで装飾する(枠線・ボーダー)

none
ボーダーを表示しない。テーブルの枠線などと重なった場合は他の値が優先される。
hidden
ボーダーを表示しない。テーブルの枠線などと重なった場合もこの値が優先される。
solid
実線で表示する。
dotted
点線で表示する。
dashed
破線で表示する。
double
2重線で表示する。
groove
くぼんだ様に見える線で表示する。
ridge
浮き上がったように見える線で表示する。
inset
内側がへこんだように見える線で表示する。
outset
内側が浮き上がったように見える線で表示する。

HTML/XHTML

<body> ~ </body>内に以下を記述します。

<h1 class="solid">ここに見出し枠線「solid」h1のテキスト</h1>
<h1 class="dotted">ここに見出し枠線「dotted」h1のテキスト</h1>
<h1 class="dashed">ここに見出し枠線「dashed」h1のテキスト</h1>
<h1 class="double">ここに見出し枠線「double」h1のテキスト</h1>
<h1 class="groove">ここに見出し枠線「groove」h1のテキスト</h1>
<h1 class="ridge">ここに見出し枠線「ridge」h1のテキスト</h1>
<h1 class="inset">ここに見出し枠線「inset」h1のテキスト</h1>
<h1 class="outset">ここに見出し枠線「outset」h1のテキスト</h1>

CSS記述例

<head> ~ </head>内に以下を記述します。

<style type="text/css">  
<!--
h1 { padding: 10px; }
h1.solid { border: 7px solid #CCC; }
h1.dotted { border: 7px dotted #CCC; }
h1.dashed { border: 7px dashed #CCC; }
h1.double { border: 7px double #CCC; }
h1.groove { border: 7px groove #CCC; }
h1.ridge { border: 7px ridge #CCC; }
h1.inset { border: 7px inset #CCC; }
h1.outset { border: 7px outset #CCC; }
-->  
</style>

見出しをCSSで装飾する(枠線・ボーダー)の表示例

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