コーディング

【CSS】文字を下線(アンダーライン)で目立たせる。コピペOK。

投稿日:2020年7月12日 更新日:

こんにちは。
今回はCSSでテキストにアンダーラインを引く方法をいくつか紹介します。

ブログやLP制作をしていると、テキストを際立たせたいって時がよくあります。
そんな時に使える実装を紹介します。

今回紹介するテクニックは3つ。

・text-decoration で下線を引く
・border-bottom で太線を引く
・background-image でマーカーを引く

text-decorationで下線を引く

これが最も基本的な方法です。

<p class="underline-1">
     <span class="kasen">こんにちは。下線をひきます。</span>
</p>
.kasen{
  text-decoration: underline;
}

結果:こんにちは。下線をひきます。


しかし、最近のサイト・LPでこのタイプの下線は見なくなってきています。なんだかデザイン的に古い感じがしますね。。w
色や下線の種類はいくつかあるのでチェックしてみて下さい。
デメリットとして太さを指定することができません。

厳密には太さを指定するプロパティがあるのですが、現在は一部のfirefoxとsafariでしか対応していない様です。
使用はあまりお勧めしません。


border-bottomで太線を引く

太線を引くにはborder-bottomで表現することができます。
borderに使用できるプロパティも使えるので、色・太さ・線の種類・位置,,,等の調整ができます。

<p class="underline-2">
     <span class="futosen">こんにちは。太線をひきます。</span>
</p>
.futosen{
  border-bottom: 5px solid yellow;
}

結果:こんにちは。太線をひきます。


background-imageで太線を引く

最後はマーカー風のアンダーラインを引く方法です。
こちらのコードを見て下さい。

<p class="underline-3">
   <span class="marker">こんにちは。マーカーをひきます。</span>
</p>
.marker{
  background-image: linear-gradient(transparent 60%, lightblue 0%)
}

結果:こんにちは。マーカーをひきます。


この様に、background-image:linear-gradient(transparent 太さ, 色 透明度) を指定してマーカーを表現します。これはクラス指定しているテキストの背景にグラデーションで色と高さを指定してマーカーで線を引いた様に見せています。
transparent(透明)を別の色に変えてみると、グラデーションの意味がわかると思います。


太さ”は第2引数のパーセント数値を小さくするとマーカーは太くなっていきます。

.marker01{
  background-image: linear-gradient(transparent 50%, lightblue 0%)
}
.marker02{
  background-image: linear-gradient(transparent 30%, lightblue 0%)
}

太さ50%:こんにちは。マーカーをひきます。

太さ30%:こんにちは。マーカーをひきます。


background-image:linear-gradientに関してはテキスト自体を素敵な魅せ方もできるので合わせてチェックしてみて下さい。

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。


実はborder-bottomでもマーカー風に線を引くことが可能です。

<p class="underline-4">
   <span class="border-marker">こんにちは。ボーダーでマーカーをひきます。</span>
</p>
.border-marker{
  display: inline-block;
  line-height: 0.3;
  border-bottom: 7px solid pink;
}

結果:こんにちは。ボーダーでマーカーをひきます。

ポイントは、display: inline-block; と line-height: 0.3; です。line-heightでマーカーの位置の設定をしているのですが、文章が長くなり2行以上になった時にはline-heightとborder-widthの調整をする必要があります。

なので個人的にはbackground-imageでマーカーを引く事をお勧めします。

今回はCSSで下線を引く方法を紹介しました。読ませたいテキストを際立たせることはユーザー理解にも繋がります。

是非上手に活用して下さい。

【おすすめ記事】プログラミングを独学で始めて3年間の成長ログ

-コーディング
-, , , ,

執筆者:

関連記事

CSS

【CSS】子要素を親要素内で上下左右中央寄せさせる方法

子要素を親要素の上下左右中央に持ってくる方法を書きました。
様々な方法があるのですが、個人的には今回紹介する方法がベストではないかと思います。参考になれば幸いです。

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

CSS

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

sass

SCSSの基礎

SCSSの基本をまとめてみました。CSSで書くよりかなりスピードアップしますし、記述場所も明確でわかりやすくなります。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。