スタイルシートで枠線をデコレーション
スタイルシートで文字ごとに異なる枠線も簡単に。
スタイルシートなら文字の単位で枠線を種類豊富に入れられるんですよ。一応、IEとNNで確認できている共通の枠線種類は6種類です。サンプルを見ましょうか。
(注意:今回のスタイルシートはIEは5以上で機能することが確認されています。)
solid=太線の枠
ridge=稜線の枠
double=二重の枠線
inset=陥没の枠線
outset=浮上の枠線
groove=溝線の枠
|
どうです、良い感じでしょう。
こうやって簡単に枠線を入れられるんですね。
タグの書き方は下記の通りです。
<style type="text/css">
P { border-width:12px;}
.solid { border-style:solid;}
.ridge { border-style:ridge;}
.groove { border-style:groove;}
.inset { border-style:inset;}
.outset { border-style:outset;}
.double { border-style:double;}
</style>
<p class="solid">solid=太線の枠</p>
<p class="ridge">ridge=稜線の枠</p>
<p class="double">double=二重の枠線</p>
<p class="inset">inset=陥没の枠線</p>
<p class="outset">outset=浮上の枠線</p>
<p class="groove">groove=溝線の枠</p>
|
英単語が重複して分かり難いと思われたら、下記のHTML文でも構いません。
<style type="text/css">
P { border-width:12px;}
.a { border-style:solid;}
.b { border-style:ridge;}
.c { border-style:groove;}
.d { border-style:inset;}
.e { border-style:outset;}
.f { border-style:double;}
</style>
<p class="a">太線の枠</p>
<p class="b">稜線の枠</p>
<p class="c">二重の枠線</p>
<p class="d">陥没の枠線</p>
<p class="e">浮上の枠線</p>
<p class="f">溝線の枠</p>
|
2行目の数値が枠線の太さです。利用内容に応じて太さを変更して調整してみて下さい。
尚、スタイルシート記述部分でスペースがある場合は必ず半角スペースです。全角スペースではエラーになりますのでご注意下さい。
以上で、この項は修了でーす。
|