モックン☆彡の部屋

((o(^-^)o))わくワク枠１

((o(^-^)o))わくワク枠１

『文字背景（色）と（境界）線』の 《例題６》 で

『 border-style: solid 』は線の種類を表し、

１本線

であると書きました。

という事は、『 solid 』以外にもあるんです。 （＾▽＾笑）

下に例を載せます。上の色を変えた部分を置き換えればできるよ。

《例題１》

< HR style="border-style: solid ;" >

< HR style="border-style: double ;" >

< HR style="border-style: groove ;" >

< HR style="border-style: rigde ;" >

< HR style="border-style: inset ;" >

< HR style="border-style: outset ;" >

< HR style="border-style: dashed ;" >

< HR style="border-style: dotted ;" >

どうですか？違いが分かるかな？

使うとしても一番下（ dotted ）と下から２番目（ dashed ）くらいですね σ(^◇^;)

実は、この使い方は本来の使い方じゃないんです。

参考までに色や長さなどの指定を書くと、 《例題２》 のようになります。

これを使う人は、『文字背景（色）と（境界）線』でも見ながら使って下さい。

《例題２》

< HR style="border-style: solid ;border-color: red ;" >

< HR style="border-style: dashed ;border-color: blue ;width: 300 px;" >

< HR style="border-style: dotted ;border-color: white ;width: 200 px;" align=" right " >

話戻って、 《例題１》 で挙げたものですが、これは通常 《例題３》 のように使います。

《例題３》

< P style="border-style: solid ;" > solid </ P >
solid

前回も同じような事を書きましたが、

行単位

で線をつける場合は  タグを使います。

では、 《例題１》 で書いた線が  タグを使うとどのように変わるかを

説明を入れながら下に載せます。

《例題４》

< P style="border-style: none ;" > none </ P >
none
枠は描かれない。枠のスタイルが none であると、周りの枠の太さは強制的に 0 にされる。これがデフォルト（初期値）です。
< P style="border-style: hidden ;" > hidden </ P >
hidden
枠は描かれない。周りの枠の太さは 0 になります。none とほぼ同じで、見た目は変わりません。
< P style="border-style: solid ;" > solid </ P >
solid
枠は実線で描かれる。上の《例題３》で使いましたね。
< P style="border-style: double ;" > double </ P >
double
枠は二重線で描かれる。指定した枠の幅の中に 2 本の線が引かれることになる。2 本の線の間は背景色で塗りつぶされる。
< P style="border-style: groove ;" > groove </ P >
groove
枠は溝を掘ったように表現される。
< P style="border-style: ridge ;" > rigde </ P >
ridge
groove の逆で、枠の部分が盛り上がっているように表現される。
< P style="border-style: inset ;" > inset </ P >
inset
枠は一段低いところにあるように描かれる。上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示される。
< P style="border-style: outset ;" > outset </ P >
outset
inset の逆で、枠は一段高いところにあるように描かれる。上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示れる。
< P style="border-style: dashed ;" > dashed </ P >
dashed
枠は破線で描かれる。線と線の間は背景色になります。
< P style="border-style: dotted ;" > dotted </ P >
dotted
枠は点線で描かれる。点と点の間は背景色になります。

使い方は簡単で、例えば文章を一段高いところにあるように書く場合は下のようになります。

《例題５》

実際に書くもの

｜

結果


モックン☆彡の部屋へようこそ！  
楽天流のＨＴＭＬ講座なので、  
通常使わないような説明もあります。  
お見苦しい所などあると思いますが、  
よろしくお付き合い下さい。


→

モックン☆彡の部屋へようこそ！
楽天流のＨＴＭＬ講座なので、
通常使わないような説明もあります。
お見苦しい所などあると思いますが、
よろしくお付き合い下さい。

『文字背景（色）と（境界）線』のページに書いてある背景に色をつけるのを応用すると･･･

実際に書くもの

｜

結果


モックン☆彡の部屋へようこそ！  
楽天流のＨＴＭＬ講座なので、  
通常使わないような説明もあります。  
お見苦しい所などあると思いますが、  
よろしくお付き合い下さい。


→

もう少し頑張ると･･･

実際に書くもの

｜

結果

モックン☆彡の部屋へようこそ！  
楽天流のＨＴＭＬ講座なので、  
通常使わないような説明もあります。  
お見苦しい所などあると思いますが、  
よろしくお付き合い下さい。


→

[注意] ：画像のアドレスは
　　　　『 http://plaza.rakuten.co.jp/img/user/87/20/1128720/117.jpg 』を使っています。

こんな感じになります。文字だけではなく、画像も入れられますので

ちょっとした額縁みたいにもできますね。

ここまでできれば立派ですが、他に文字の色を変えたり、

文字をスクロールさせたりもできますので、各自で試して下さい。

ちなみに、今まで

行単位

で変える意味で  タグを使いましたが、

 タグを使うと 《例題５》 は下のようになります。