ボーダーに画像

アスタリスク①

ここに文章

使用画像

border_asterisk.gif

CSS（style 属性）

CSS（<head> 内）

HTML（<body> 内）
＜使い方＞

  内の例では、スタイルシートを使ってボックスのボーダー（枠線）に画像を指定しています。使用画像 border_asterisk.gif を自分のサーバーにアップロードしてソースをコピペするだけで 簡単にタイトルや見出し、記事の周りを可愛くレイアウトすることができます。 方法は、「CSS（style 属性）」をコピペする方法と 「CSS（<head> 内）」と「HTML（<body> 内）」の両方をコピペする方法の二通りになります。

＜ソースの挿入方法＞
三角矢印 CSS（style 属性）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
<p style="width:180px;…">ここに文章</p>
</body>
</html>
三角矢印 CSS（<head> 内）+ HTML（<body> 内）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.border_asterisk {
width:180px;
padding:5px;
border:10px solid #f0b8de;
border-image:url("border_asterisk.gif") 10 space;
}
</style>
</head>
<body>
<p class="border_asterisk">ここに文章</p>
</body>
</html>

＜「アスタリスク①」の説明＞

tec_border1.gif 三角矢印  内に記述しているスタイルシートは、 内容の横幅（width:180px）、内側の余白（padding:5px）、ボーダーの幅（10px）、使用画像のURL（border_asterisk.gif）、画像の繰り返し方法（space）を指定しています。

※ 「マージン、ボーダー、パディングの関係]」参照

tec_border2.gif 三角矢印 更に、古いブラウザなどで画像が表示されない場合は、同系色のボーダーが表示されるように指定（border:10px solid #f0b8de;）しています。

＜ 内のCSS/HTMLソースの説明＞

tec_border3.gif

＜横幅の例＞

width:180px → width:270px に変更
※ 横幅は使用画像が 30×30px なので、その 3 分の 1 の 10 の倍数が最適

width:180px → width:90% に変更
もちろん、行数によって縦も延びます
※ 100% にすると内側の余白（5px）とボーダーの幅（10px）の分だけはみ出すので注意

上に戻る