CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】

2021年11月15日

文章を強調したいときに、2重下線で文字を装飾したいという場面があるかと思います。

CSSには2重下線を実装できるtext-decorationプロパティがありますが、

色を一色しか設定できない
線と線の間隔を指定できない
アニメーションを適用できない（transitionが効かない）
線の位置や太さは指定できるが、一部のブラウザでは対応していない

などなど、使いにくい点がいくつかありますね。

そこで今回の記事では、CSSのグラデーション関数linear-gradientを使用して、文字に2重の下線を引く方法を紹介していきます！

linear-gradientを使用することで、text-decorationよりも自由度の高い2重下線を実装できますので、ぜひ参考にしてみてください。

【コピペ用】CSSグラデーションで文字に2重下線を引くための実装コード

コピペしてすぐに使用したい方のために、実装コードを用意しました。

以下のHTMLとCSSをコピペするだけで、2重下線を作成することができます！

<p>サンプルテキスト。<span class="double-line">このテキストに2下重線が引かれます。</span>サンプルテキスト。</p>

.double-line {
  display: inline;
  background-image: linear-gradient(
    0deg,
    #ffc74a 0px, #ffc74a 2px, /* 1本目の線 */
    transparent 2px, transparent 4px, /* 1本目と2本目の間隔 */
    #ffc74a 4px, #ffc74a 6px /* 2本目の線 */
  );
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px; /* 線の位置を調整 */
}

上記のコードをコピペすると、以下のような結果になります。

■実装結果

2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。

テキストに2重下線が引かれているのが確認できましたね。

次の章では、CSSグラデーションで2重下線を引く方法を解説してきます。

CSSグラデーションで2重下線を実装する方法の解説

ここからはHTML・CSSの順に、実装コードの解説を行います。

カスタマイズ方法なども合わせて説明していきますので、興味がある方は読み進めてください。

HTML

<p>サンプルテキスト。<span class="double-line">このテキストに2下重線が引かれます。</span>サンプルテキスト。</p>

下線を引きたい箇所をspanタグで囲み、double-lineクラスを付与します。

このクラスに対して、次のCSSで2重下線のスタイルを当てていきます。

CSS

.double-line {
  display: inline;
  background-image: linear-gradient(
    0deg,
    #ffc74a 0px, #ffc74a 2px, /* 1本目の線 */
    transparent 2px, transparent 4px, /* 1本目と2本目の間隔 */
    #ffc74a 4px, #ffc74a 6px /* 2本目の線 */
  );
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px; /* 線の位置を調整 */
}

こちらが全体のCSSです。

display:inlineで改行にも対応させる
linear-gradientで2重線をつくる
backgroundの各プロパティで細かい部分を調整する
padding-bottomで線の位置を調整する

上記の4つに分けて説明していきます！

ポイント①display:inlineで改行にも対応させる

display: inline;

2重下線を複数行に対応させるには、displayの値をinlineにする必要があります。

こうすることで、下線が1つのブロック全体ではなく1行ごとに引かれるようになります。

以下でdisplayの値がinlineの場合とblockの場合の違いを確認してみてください。

■display: blockの場合

2重下線確認用のサンプルテキストです。displayの値がblockの場合は、下線がブロック全体を基準に表示されます。

■display: inlineの場合

2重下線確認用のサンプルテキストです。displayの値がinlineの場合は、下線が全ての行に表示されます。

displayをinlineにすることで、下線が正しい位置に表示されたのが確認できたかと思います。

HTMLのspanタグはデフォルトでinlineに設定されていますが、念の為記述しておくといいでしょう。

ポイント②linear-gradientで2重線をつくる

background-image: linear-gradient(
  0deg,
  #ffc74a 0px, #ffc74a 2px, /* 1本目の線 */
  transparent 2px, transparent 4px, /* 1本目と2本目の間隔 */
  #ffc74a 4px, #ffc74a 6px /* 2本目の線 */
);

2重下線は、グラデーションを作成できるlinear-gradient関数を使用します。

まず角度には0degを指定することで、グラデーションカラーの向きが下から上になります。

続いては、1本目の線を作成していきます。

線の色とサイズ（太さ）を、以下のように指定します。

#ffc74a 0px, #ffc74a 2px,

このコードは、0pxから2pxの間は#ffc74aの色にするという意味になります。

色を変えたい場合は好きなカラーコードを、太さを変えたい場合はpxの部分をそれぞれカスタマイズしてください。

1本目の線の次は、線と線の間隔を作成します。

1本目の線は0pxから2pxの太さなので、2pxから4pxを透明にしていきます。

transparent 2px, transparent 4px,

上記のコードで、1本目の線の上に透明な部分を確保することができました。

最後に2本目の線を作成します。

#ffc74a 4px, #ffc74a 6px

1本目と同じように、色と太さを指定します。

これで2本目の線を作成することができました。

■実装結果

2px間隔で2重下線が実装されているのが確認できましたね。

ここをカスタマイズすることで、

線の色をそれぞれ変える
線の本数を増やす
線の太さを変える

などなどいろんな線を作成できますので、ぜひ試してみてください。

ポイント③backgroundの各プロパティで細かい部分を調整する

background-size: 100% 6px;
background-repeat: no-repeat;
background-position: left bottom;

backgroundの上記3つのプロパティで、線の微調整をしていきます。

まずbackground-sizeで、2重下線の全体の大きさを指定します。

background-size: 100% 6px;

background-sizeは、横幅・縦幅の順に数値を指定します。

spanで指定した部分全体に下線を引きたいので、横幅は100%にします。これで1文字目から最後の文字まで下線を表示することができます。

続いて縦幅には、ポイント②で指定した線の高さを入力します。

background-image: linear-gradient(
  0deg,
  #ffc74a 0px, #ffc74a 2px, /* 1本目の線 */
  transparent 2px, transparent 4px, /* 1本目と2本目の間隔 */
  #ffc74a 4px, #ffc74a 6px /* 2本目の線 */
);

ここでは1本目から2本目の線の高さが6pxなので、background-sizeの縦幅にも6pxを指定します。

線の太さや本数をカスタマイズした場合は、こちらの数値も忘れずに編集してください。

次にbackground-repeatをnoneにしておきます。

この指定をしないと、2重下線が縦方向にリピートされてしまい、以下のようになります。

これはbackground-repeatのデフォルト値がrepeatになっているため起こる現象ですね。

これを回避するために、background-repeatにはnoneを指定する必要があります。

ポイント④padding-bottomで線の位置を調整する

padding-bottom: 5px;

線の表示位置は、padding-bottomで調整することができます。

■padding-bottom: 0の場合

■padding-bottom: 5pxの場合

padding-bottomの値を増やすと線と文字との間に余白ができ、減らすと線と文字との間が狭まります。

さらに調整したい場合は、line-heightで行の高さを変更するとよいでしょう。

これで実装コードの解説は終わりです！

次でいくつかカスタマイズ例を紹介していきますので、興味がある方はぜひ読んでみてください。

CSSグラデーションで実装する2重下線のカスタマイズ例

以下の3つのカスタマイズ方法を紹介します。

線の色を変更する
線の数を増やす
ホバーアニメーションをつける

①線の色を変更する

線の色を変更するには、ハイライト部分に好きな色を指定してください。

.double-line {
  display: inline;
  background-image: linear-gradient(
    0deg,
    #4aabff 0px, #4aabff 2px,
    transparent 2px, transparent 4px,
    #4aabff 4px, #4aabff 6px
  );
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px;
}

■実装結果

2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。

それぞれの線に別の色を指定することも可能です。

.double-line {
  display: inline;
  background-image: linear-gradient(
    0deg,
    #ffc74a 0px, #ffc74a 2px,
    transparent 2px, transparent 4px,
    #4aabff 4px, #4aabff 6px
  );
  background-size: 100% 6px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px;
}

■実装結果

2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。

②線の数を増やす

線の数は、linear-gradientの部分に記述を追加することで、増減可能です。

.double-line {
  display: inline;
  background-image: linear-gradient(
    0deg,
    #ffc74a 0px, #ffc74a 2px,
    transparent 2px, transparent 4px,
    #ffc74a 4px, #ffc74a 6px,
    transparent 6px, transparent 8px,
    #ffc74a 8px, #ffc74a 10px,
  );
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px;
}

■実装結果

3重下線確認用のサンプルテキストです。3重下線確認用のサンプルテキストです。3重下線確認用のサンプルテキストです。

線の数を1本増やして、3重下線にしてみた例です。

線の本数をカスタマイズする場合は、background-sizeの縦幅の数値も忘れずに調整してください。

③ホバーアニメーションをつける

background-sizeにtransitionを指定することで、ホバーすると下線が横に伸びるアニメーションを設定できます。

.double-line {
  display: inline;
  background-image: linear-gradient(
    0deg,
    #ffc74a 0px, #ffc74a 2px,
    transparent 2px, transparent 4px,
    #ffc74a 4px, #ffc74a 6px
  );
  background-size: 0 6px; /* 最初は横幅を0にしておく */
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 5px;
  transition: all 0.6s; /* アニメーション持続時間を指定 */
}

.double-line:hover {
  background-size: 100% 6px; /* ホバー時に横幅を100%にする */
}

■以下のテキストにマウスカーソルを当ててみてください。(SPの場合はタップ)

2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。2重下線確認用のサンプルテキストです。

このアニメーションに関しては以下の記事で詳しく解説していますので、ぜひご覧ください。

【まとめ】2重下線はCSSグラデーションで実装可能！

CSSのグラデーション関数linear-gradientを使用して、2重下線を引く方法を紹介しました。

text-decorationプロパティでも2重下線を実装できますが、CSSグラデーションを使った方法だと、

線の太さ・色・本数を自由に変えられる
線の位置を調整可能
アニメーションを指定可能

などなど、より自由度の高い2重下線を実装することができます！

さらにブラウザ対応も完璧なので、ぜひこの方法で2重下線を実装してみてください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】

【コピペ用】CSSグラデーションで文字に2重下線を引くための実装コード

CSSグラデーションで2重下線を実装する方法の解説

HTML

CSS

ポイント①display:inlineで改行にも対応させる

ポイント②linear-gradientで2重線をつくる

ポイント③backgroundの各プロパティで細かい部分を調整する

ポイント④padding-bottomで線の位置を調整する

CSSグラデーションで実装する2重下線のカスタマイズ例

①線の色を変更する

②線の数を増やす

③ホバーアニメーションをつける

【まとめ】2重下線はCSSグラデーションで実装可能！

コメント

コメントするコメントをキャンセル

Next.jsとMDXで技術ブログ「WebTech Note」を新設しました

パートナーとして一緒に仕事してくださるデザイナー様を募集中です

GatsbyJSでポートフォリオサイトをリニューアルしました。

CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】

【コピペ用】CSSグラデーションで文字に2重下線を引くための実装コード

CSSグラデーションで2重下線を実装する方法の解説

HTML

CSS

ポイント①display:inlineで改行にも対応させる

ポイント②linear-gradientで2重線をつくる

ポイント③backgroundの各プロパティで細かい部分を調整する

ポイント④padding-bottomで線の位置を調整する

CSSグラデーションで実装する2重下線のカスタマイズ例

①線の色を変更する

②線の数を増やす

③ホバーアニメーションをつける

【まとめ】2重下線はCSSグラデーションで実装可能！

コメント

コメントする コメントをキャンセル

Next.jsとMDXで技術ブログ「WebTech Note」を新設しました

パートナーとして一緒に仕事してくださるデザイナー様を募集中です

GatsbyJSでポートフォリオサイトをリニューアルしました。

コメントするコメントをキャンセル