上級編4

 スタイルシートで枠線をデコレーション
   スタイルシートで文字ごとに異なる枠線も簡単に。


スタイルシートなら文字の単位で枠線を種類豊富に入れられるんですよ。一応、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行目の数値が枠線の太さです。利用内容に応じて太さを変更して調整してみて下さい。
尚、スタイルシート記述部分でスペースがある場合は必ず半角スペースです。全角スペースではエラーになりますのでご注意下さい。
以上で、この項は修了でーす。

質問メール  SCHOOL MENU