ボーダーで装飾

今回はborderプロパティを使っていろいろ装飾してみます。
手軽にできるので、ぜひお試しくださいませ。

サンプル

見出し:サンプル１

.sample1{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:0px;
    border-left-width:10px;
    border-color:#6F3000;
}

見出し:サンプル２

.sample2{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:0px;
    border-bottom-width:2px;
    border-left-width:10px;
    border-color:#6F3000;
}

見出し:サンプル３

スタイルシート
.sample3{
    font-size:large;
    background-color:#FFFFFF;
    border-style:dashed solid;
    border-width:2px 12px;
    border-color:#6F3000;
}

ちょっと長めの見出し:サンプル４

.sample4{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:0px 100px;
    border-color:#6F3000;
    text-align:center;
}

見出し:サンプル５

.sample5{
    font-size:large;
    background-color:#FFFFFF;
    border-style:dotted;
    border-width:0px 4px;
    border-color:#6F3000;
}

見出し:サンプル６

.sample6{
    font-size:large;
    background-color:#FFFFFF;
    border-style:none inset none outset;
    border-width:0px 15px;
    border-color:#CC9900;
}

見出し:サンプル７

.sample7{
    font-size:large;
    background-color:#FFFFFF;
    border-style:double;
    border-width:0px;
    border-bottom-width:8px;
    border-color:#6F3000;
}

見出し:サンプル８

.sample8{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:10px 10px;
    border-color:#6F3000 #FFFFFF;
}

見出し:サンプル９

.sample9{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:10px 0px 10px 10px;
    border-color:#FFFFFF #6F3000;
}

見出し:サンプル１０

.sample10{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:1px 3px 2px 1px;
    border-color:#996600 #663300 #663300 #996600;
}

---

使いこなすための＋α

今回は10パターンしか紹介できませんでしたが、 組み合わせは無数にあります。
背景画像や、背景と見出し１を組み合わせれば、バリエーションはさらに広がります。
オリジナルの組み合わせを見つけてみてください。

組み合わせによっては、サンプル10のようにボタンのように見せかけることも可能です。
実は自分で調整したほうが、border-styleでridgeやoutsetを使うよりリアルに見えます。
これをリンクに使用すると面白いことができます。詳しいことは別のページで紹介しますね。

---