コピペOK!CSSで書けるborder(線)覚え書き

CSSで可能な基本のボーダー装飾というのはそもそも限られていて、「線」「点線」「破線」「二重線」くらいしかない。

美しい目次枠が欲しいというお話を頂いたのだけれど、ご希望の案がどれもCSSで対応できません……と思ったところで、ああ、これも画像を使えばいいよねと思いつく。

CSSで作るボーダー「線」カスタマイズ

と言ってもただ、ものすごく狭い背景画像を配した棒を表示するだけなのですが。

まずは基本のborder CSS

 

solid 1本線
double 2本線
groove 立体凹線
ridge 立体凸線
inset 上と左のボーダーが暗く、下と右のボーダーが明るくなる
outset 上と左のボーダーが明るく、下と右のボーダーが暗くなる
dashed 破線
dotted 点線

基本はボーダーを表示するためのコードをHTMLで指定して

<div class="border-1"></div><div class="border-2"></div><div class="border-3"></div><div class="border-4"></div>

CSSで装飾を指定する。

.border-1 {border-width: 3px 0 0 0;border-style: solid;border-color: #aa4c8f;}.border-2 {border-width: 10px 0 0 0;border-style: double;border-color: #f0908d;}.border-3 {border-width: 5px 0 0 0;border-style: dashed;border-color: #aa4c8f;}.border-4 {border-width: 6px 0 0 0;border-style: dotted;border-color: #f0908d;}
“px”は太さです。

CSS のみで装飾する変化球ボーダー

いわゆるCSSのみで作る背景装飾を細く細くして棒にしたものです。

斜線

HTML

<div class="border-5"></div>

CSS

.border-5 {background-color:#dfdfdf ;}.border-5 { background-image: linear-gradient(-45deg, #c4a3bf 25%, #f9f8f7 25%, #f9f8f7 50%, #c4a3bf 50%, #c4a3bf 75%, #f9f8f7 75%, #f9f8f7); background-size: 10px 10px; height: 10px;}

ドット

HTML

<div class="border-6"></div>

CSS

.border-6 { background-color: #000; background-image: radial-gradient(#c4a3bf 15%, transparent 3%), radial-gradient(#c4a3bf 15%, transparent 5%); background-size: 20px 20px; background-position: 0 0, 10px 10px; height: 15px;}

変わりストライプ

HTML

<div class="border-7"></div>

CSS

.border-7 { background-color: #9d5b8b; background-image: linear-gradient(to left,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.2) 40%), linear-gradient(to left,rgba(255,255,255,0.9) 5%,rgba(255,255,255,0.1) 20%); background-size: 20px 20px,30px 30px; height: 11px;}
色は” #●●●●● “の部分を改変してください。
線の太さ(高さ)は” height: 11px; “の部分を改変

ボーダーの中に画像を入れる

もっと複雑な模様のボーダーが欲しいんだ!……と、なったら画像を使うしかありません。

やる事は「画像背景見出し」と同じ。

関連記事

カスタマイズに熱が入るとトップの画像から枠からアイコンから目次から……色々とやりたくなるわけで、中でも見出しは誰でもいじりたくなる所。「見出しを可愛く」の声が聞こえるので、見出しのバックに背景画像を入れるCSS覚え書き。見出しカ[…]

[THE THOR(ザ・トール)]カスタマイズ

見出しよりも細いので、見栄えの良い画像のチョイスも大変ですね。

HTML

<div class="border-8"></div>

CSS

.border-8 { border-style: solid; border-width: 10px; border-image: url(画像URL.jpg) 30 repeat;}

 

サンプルは大きな画像を使用しています。細いスペースなので軽くて小さな画像を繰り返す方がよろしいかと。
サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』