CSSテクニック

ボーダーで装飾

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

サンプル

見出し:サンプル1
.sample1{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:0px;
    border-left-width:10px;
    border-color:#6F3000;
}
見出し:サンプル2
.sample2{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:0px;
    border-bottom-width:2px;
    border-left-width:10px;
    border-color:#6F3000;
}
見出し:サンプル3
スタイルシート
.sample3{
    font-size:large;
    background-color:#FFFFFF;
    border-style:dashed solid;
    border-width:2px 12px;
    border-color:#6F3000;
}
ちょっと長めの見出し:サンプル4
.sample4{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:0px 100px;
    border-color:#6F3000;
    text-align:center;
}
見出し:サンプル5
.sample5{
    font-size:large;
    background-color:#FFFFFF;
    border-style:dotted;
    border-width:0px 4px;
    border-color:#6F3000;
}
見出し:サンプル6
.sample6{
    font-size:large;
    background-color:#FFFFFF;
    border-style:none inset none outset;
    border-width:0px 15px;
    border-color:#CC9900;
}
見出し:サンプル7
.sample7{
    font-size:large;
    background-color:#FFFFFF;
    border-style:double;
    border-width:0px;
    border-bottom-width:8px;
    border-color:#6F3000;
}
見出し:サンプル8
.sample8{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:10px 10px;
    border-color:#6F3000 #FFFFFF;
}
見出し:サンプル9
.sample9{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:10px 0px 10px 10px;
    border-color:#FFFFFF #6F3000;
}
見出し:サンプル10
.sample10{
    font-size:large;
    background-color:#FFFFFF;
    border-style:solid;
    border-width:1px 3px 2px 1px;
    border-color:#996600 #663300 #663300 #996600;
}

使いこなすための+α

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

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


一覧へ戻る


Last Modified 2004-10-15 © きくちゃん 2004 - All Rights Reserved