【HTML, CSS】太い下線を引くときはlinear-gradientが便利!!

太い下線を引く時はlinear-gradientが便利

デザイナーからいただくpsdファイルを見ると、文字列と下線の間が空いていたり太かったりします。
そのような場合はuタグで囲ったりtext-decorationプロパティにunderlineを設定したりでは難しい場合があります。

イレギュラーな下線を引く際は、backgroundプロパティにlinear-gradientをあてると実現できることが多いです。

lineargradientはグラデーションのかかった背景を作成する際に使われますが、今回はlinear-gradientを使って下線を引く方法を紹介します。

linear-gradientで下線を引く

例えば以下のようなHTMLがあったとして、underlineクラスに囲まれた「ほげほげほげほげ」という文字列に太い下線を引きます。

これに以下のCSSを使用します。

ここで大事なのはbackgroundのlinear-gradientpadding-bottomです。

linear-gradientの第一引数はグラデーションの角度を設定するのですが、ここに「transparent 50%」と書くと文字の高さの上から50%の領域を透明にします。
80%にすれば上側80%が透明になります。

transparent:50%;

transparent 50%;

transparent:80%;

transparent 80%;

第二引数は色とグラデーションの割合を指定します。
グラデーションの割合を0%にしているので色は完全に一様です。

ちなみに、割合を上げていくと上の方から薄くなっていきます。

グラデーション率809%

グラデーション率80%

次にこの下線の位置を調整します。
padding-bottomを調整しましょう。

padding-bottom:15px;

padding-bottom:15px;

まとめ

linear-gradientの幅と位置を好きなように調整すれば大抵のデザインの下線は引けると思います。

デザインをどうHTMLに落とし込むかについて、様々な引き出しを持っていたいものです