Web上で文字の下線で二重線や波線等をCSSで引いてみませんかぁ～！？

     一重線     

     二重線     

     破　線     

     波　線     

CSSでの下線の引き方2選の違いを紹介!!
text-decoration と border-bottom!!

　今日はブログやHP上で文字の下線の書き方と表示のされ方の違い2選紹介してみようと思います。
　

1. 【text-decorationを使う場合】
   
   • 【一重線】
     <span style="text-decoration:underline solid red">一重線</span>
     
   • 【二重線】
     <span style="text-decoration:underline double red">二重線</span>
     
   • 【点　線】
     <span style="text-decoration:underline dotted red">点　線</span>
     
   • 【破　線】
     <span style="text-decoration:underline dashed red">破　線</span>
     
   • 【波　線】
     <span style="text-decoration:underline wavy red">波　線</span>
     


2. 【border-bottomを使う場合】
   
   • 【一重線】
     <span style="border-bottom:solid red">一重線</span>
     
   • 【二重線】
     <span style="border-bottom:double red">二重線</span>
     
   • 【点　線】
     <span style="border-bottom: dotted red">点　線</span>
     
   • 【破　線】
     <span style="border-bottom: dashed red">破　線</span>
     

　このような書き方なのですが・・・勘の良い方は既にお気付きかも知れませんね・・・
　text-decoration:underlineを使用した場合の一重線とborder-bottomを使用した場合の一重線はborder-bottomを使用した場合の方が文字と下線の間の隙間がありますよね・・・
　border-bottomとは文字を線で囲んだ場合、一重線のようになります・・・見て頂いて解りますように文字と線との間に空白がありますよね、この底辺の線を指定しているからなんです。
　それと下線の色は今回は赤ですが勿論、別の色を指定できますし、線の太さは2pxとか3pxをプラスされますと太くできますよ。
　この微妙な空白がある方が読み手としては読みやすいかもしれませんね・・・
　この違いを上手く利用されたら、良いんじゃないのでしょうか！？