ぱたぱたアニメ館

ボーダーに画像

サンプル

ここに文章

使用画像

border-asterisk.gif

使い方

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

実際の運用では、class 指定でまとめて管理すると便利です。

コードの挿入方法

CSS + HTML 

<!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>
CSS（style 属性） 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
<p style="width:180px;padding:5px;border:10px solid #f0b8de;border-image:url('border-asterisk.gif') 10 space;">ここに文章</p>
</body>
</html>

ボーダーの説明

tec-border1.gif

上記のスタイルシートは、内容の横幅（width:180px）、内側の余白（padding:5px）、ボーダーの幅（10px）、 使用画像のURL（border-asterisk.gif）、画像の繰り返し方法（space）を指定しています。

「マージン、ボーダー、パディングの関係]」参照（只今修正中につき後ほどリンクを張ります）

tec-border2.gif

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

現在の主要ブラウザではほぼすべて border-image に対応していますが、フォールバックとして指定しています。

CSS/HTML コードの説明

tec-border3.gif

＜横幅の例＞

width:180px → width:270px に変更
※ 横幅は使用画像が 30×30px なので、その 3 分の 1 の 10 の倍数が最適（見た目がきれいに揃いやすい）

width:180px → width:90% に変更
もちろん、行数によって縦も延びます

100% にすると内側の余白（5px）とボーダーの幅（10px）の分だけはみ出すので注意してください。解決策として、 box-sizing: border-box; を指定すると、width にボーダーとパディングを含めて計算されるため、100% 指定でもはみ出しません。

上に戻る