アンダーライン【CSS】テキストにマーカー風アンダーラインを引く3つの方法まとめHOMEHTML/CSS【CSS】テキストにマーカー風アンダーラインを引く3つの方法まとめブログの記事なので読みやすくするために、重要部分に線を引いたり、色を変えたり、太くしたりと色々表現はありますが、最近マーカ風のアンダーラインを引くやり方が多くあります。今回はいくつかの方法でCSSでマーカー風のアンダーラインを引く方法を解説します。【1】グラデーションを使う方法(おすすめ度80%)ブログの記事本文内などで、一番多く使われている手法ですね。記事本文中の重要ポイントにアンダーラインを引く場合はこれで問題ないと思います。書体によっては、太いアンダーラインになる場合があります。あと、「padding-bottom」の数値が高いと、アンダーラインが下にいってしまい、文字から離れてしまいます。60%);}【2】backgroundを使う方法(おすすめ度70%)グラデーションのアンダーラインと違って、線の太さが画像のサイズ分で固定なので、数値通りの数字になりますが、レスポンシブでスマホ対応させた時は(background-size)を調整する必要があります。大した容量じゃないんですが、当然画像を使うので、グラデーションで引く場合より容量を食います。0;}【3】before要素を使う方法(おすすめ度25%)疑似要素を使って引くこともできますが、改行した時に下の行にアンダーラインが引かれないので、文章量の多い場合はおすすめしません。inline;」にしないと改行時に【3】と同現象が起きてしまいますので、注意が必要です。※「inline-block」「block」どちらもレイアウトが崩れます。改行しないテキストで「display:block;」を指定した場合、【1】のグラデーションでやる場合は「line-height」で行間を調整すると、アンダーラインの高さも調整できます。基本、グラデーションでやるのが一般的ですが、高さを自分で調整できるbackground画像を使うほうが個人的には好きですかね?今回は、以上です。Photoshopで写真をカフェ風のイラスト加工をする方法(キャンバスに描いたようなフワッとした感じ)こちらの記事もあわせてどうぞごめんなさいm(__)mまだ関連する記事がありません。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。