HOME > > > CSSを使った便箋風のボーダーを引く方法

CSSを使った便箋風のボーダーを引く方法

CSSを使った便箋風のボーダを引く方法

CSSを使って便箋風なボーダーを引く

単純にborder-bottomをつけただけだと、ボーダーラインとして線はついてくれません。
では画像を使ってボーダーをつけちゃいましょう。

HTML

サンプルはこちら

HTMLは通常通りの書き方でOKです。
Pタグなどで囲んでください。

<p>CSSでボーダーを便箋の様な引きます<br>
参考にして頂けたらと思います。</p>

ボーダーになる画像を作ります

ボーダーはCSSでつけるのではなく、背景画像になります。 こんな感じで作ります。

CSS

CSSは下記の様に記載します。
作った画像を背景に読み込みます。
テキストの縦幅を考えてline-heightの数値を変えてみてください。

p{
line-height: 35px;
background: url(../images/border01.gif) repeat left bottom;
}

最後に

以上でボーダー設置は完了です。
ボーダーの色を変えたりするのも設置してしまえば画像を変更するだけです。

記事参考

Web Designing

参考にさせて頂きました。ありがとうございました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.02.23