ボーダーに画像

アスタリスク①

ここに文章

使用画像

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ソースの説明>

<横幅の例>

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

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

上に戻る