タグで、いろいろな線を引いてみましょう。




◆・・・ 　文字に線を引いてみませんか。 ・・・◆

　　　●上に線を引いてみます。
文字の上に線を引くと
こんな感じです。

<font style="border-top-style:dotted;border-color: 9e99d9 ;line-height: 40 px;">


　　　●下に線を引いてみます。
文字の下に線を引くと
こんな感じでになります。

<font style="border-bottom-style:dotted;border-color: red ;line-height: 55 px;">


　　　●くぼんだ感じの線を引いてみます。
くぼんだ感じの線を引くと
こんな感じになります。

<font style="border-bottom-style:groove;border-color: blue ;line-height: 40 px;">


　　　●浮き上がった感じの線を引いてみます。
浮き上がった感じの線を引くと
こんな感じになります。

<font style="border-bottom-style:ridge;border-color: 99ffab ;line-height: 35 px;">


　　　●破線を引いてみます。
破線を引いた場合は、
こんな感じになります。

<font style="border-bottom-style:dashed;border-color: deeppink ;line-height: 35 px;">


　　　●二重線を引いてみます。
二重線を引くと
こんな感じになります。

<font style="border-bottom-style:double;border-color: a400db ;line-height: 50 px;">


　　　●ＯＵＴ線を引いてみます。
ＯＵＴ線を引くと
こんな感じになります。

<font style="border-bottom-style:outset;border-color: lime ;line-height: 40 px;">


　　　●ＩＮ線を引いてみます。
ＩＮ線を引くと
こんな感じになります。

<font style="border-bottom-style:inset;border-color: lime ;line-height: 40 px;">

＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊

☆・・・違いがわかりますか？･･･☆

color: 線の色 ;
line-height: 行の高さ px;

　　　線の色や（色は色番号・色の名前のどちらでもOKです。）
　　　行の高さを変更する場合は、緑の文字の所を直してください。

　　　ＯＵＴ線とＩＮ線の違いは良くわからないようなので、比較
　　　しやすいように、下に書いてみました。


　　　　◆ 背景を黒にして、同じ色を使って比較してみました。◆


　　　●　ＯＵＴ線　
ＯＵＴ線を引くと
こんな感じになります。


　　　●　ＩＮ線　
ＩＮ線を引くと
こんな感じになります。


© Rakuten Group, Inc.

Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: