HTML5/CSS3で二重下線を引くには

HTML CSS

ウェブデザインの話です。

 

HTML5より前の時代では、ウェブページに下線を引きたい場合は <u> ～ </u> でいけましたが。HTML5では <u>タグの意味合いが変わり、下線は <span style="text-decoration: underline"> ～ </span> のようにして引きます。

  • HTML5より前： <u> ～ </u>
  • HTML5：<span style="text-decoration: underline"> ～ </span>

それでは、二重下線の場合はどうでしょう？

一部のブラウザでは、text-decoration: underline double のようにstyleを指定してやるといいみたいですが、IEやChromeでは表示されません。

そこで紹介したいのが、border-bottomを使った実現方法。ググってみると、ちまたのWebページでもよく紹介されているやり方ですが、実際にやってみるとこんな風に下のほうに隙間が出来てしまうのが難点です。

 

上にある赤の二重線のようにするには、border-bottomのほかにdisplayとline-heightを指定してあげる必要があります。

  • border-bottom: 3px double;
  • display: inline-block;
  • line-height: 85%;

line-heightの値を調整する（値を大きくすると離れる）ことで、ぴったりした二重下線を引けるようになります。

 

より確実な方法としては、二重線の画像を用意してbackground-imageとして指定する方法があるみたいですが、border-bottomを使ったほうがお手軽な感じです。

 

 

参考Webページ