ボーダーで装飾
今回は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を使うよりリアルに見えます。
これをリンクに使用すると面白いことができます。詳しいことは別のページで紹介しますね。