【CSS】文字に線を引く方法をまとめてみた

HTML&CSS

text-decorationを使って文字に線を引く

text-decorationプロパティは、テキストに線を引くことができるプロパティです。

文字に下線を引く

text-decorationプロパティを使って文字に下線を引きます。

<p>text-decorationプロパティを使って<span class="line">文字に下線</span>を引きます。</p>

.line {
  text-decoration: underline;
}

HTMLでリンクを表現する<a>タグはデフォルトで下線が引かれるようになっています。

文字に取り消し線を引く

text-decorationプロパティを使って文字に取り消し線を引きます。

<p>text-decorationプロパティを使って<span class="line">文字に取り消し線</span>を引きます。</p>

.line {
  text-decoration: line-through;
}

文字に波線を引く

text-decorationプロパティを使って文字に波線を引きます。

<p>text-decorationプロパティを使って<span class="line">文字に波線</span>を引きます。</p>

.line {
  text-decoration: underline wavy;
}

text-decorationまとめ

text-decorationプロパティを使うことで、簡単に文字に線を引くことができます。

// ショートハンド
text-decoration: underline wavy blue;

// 個別に指定する
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: blue;
プロパティ値効果
text-decoration-lineunderline文字に下線を引く
text-decoration-lineoverline文字に上線を引く
text-decoration-lineline-through文字に取り消し線を引く
text-decoration-stylesolid直線
text-decoration-styledouble二重線
text-decoration-styledotted点線
text-decoration-styledashed破船
text-decoration-stylewavy波線

text-decorationプロパティでは、色や太さなどを細かく調整することはできないので、もしデザインにこだわりたい場合は後に紹介する方法を試してみてください。

borderを使って文字に線を引く

border-bottomプロパティを使って文字に線を引くこともできます。

ただし、複数行になるときや、paddingなどで余白を作る際には見た目が崩れてしまう可能性があるので注意しましょう。

文字に下線を引く

border-bottomでは、文字の太さや色を自在に設定することができます。

border-bottomプロパティを使って文字に下線を引きます。

<p>border-bottomプロパティを使って<span class="line">文字に下線</span>を引きます。</p>

.line {
  border-bottom: 1px solid #333;
}

文字に破線を引く

border-bottomプロパティを使って文字に破線を引きます。

<p>border-bottomプロパティを使って<span class="line">文字に破線</span>を引きます。</p>

.line {
  border-bottom: 1px dashed #333;
}

文字に二重線を引く

border-bottomプロパティを使って文字に二重線を引きます。

<p>border-bottomプロパティを使って<span class="line">文字に二重線</span>を引きます。</p>

.line {
  border-bottom: 3px double #333;
}

グラデーション付きの下線を引く

border-bottomプロパティとborder-imageプロパティを組み合わせることで、文字にグラデーション付きの下線を引くことができます。

border-bottomプロパティとborder-imageプロパティを使って
文字にグラデーション付きの下線を引きます。

<p>border-bottomプロパティとborder-imageプロパティを使って<span class="line">文字にグラデーション付きの下線</span>を引きます。</p>

.line {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #8d8dff 0%, #ffe760 100%);
  border-image-slice: 1;
}

ストライプ柄の下線を引く

border-bottomプロパティとborder-imageプロパティを使って
文字にストライプ柄の下線を引きます。

<p>border-bottomプロパティとborder-imageプロパティを使って<span class="line">文字にストライプ柄の下線</span>を引きます。</p>

.line {
  border-bottom: 2px solid;
  border-image: repeating-linear-gradient(-45deg, #8d8dff 0%, #8d8dff 5px,  #ffe760 5px, #ffe760 10px);
  border-image-slice: 1;
}

border-bottomまとめ

border-bottomプロパティは、要素に対して線を引くことができるプロパティです。

使い方を工夫することで、文字に対して線を引くことができます。

// ショートハンド
border-bottom: 1px solid red;

// 個別に指定する
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
プロパティ値効果
border-bottom-styledotted点線
border-bottom-styledashed破線
border-bottom-stylesolid直線
border-bottom-styledouble二重線
border-bottom-stylegroove立体的に窪んだ線
border-bottom-styleridge立体的に隆起した線

border-bottomでは、波線のwavyは使えないので覚えておきましょう。代わりにtext-decorationでは使用できないgrooveやridgeなどが使えるようになります。

background-imageを使って文字に線を引く

background-imageプロパティを利用して文字に線を引くこともできます。

border-bottomプロパティの時と同様、複数行の時やpaddingなどで余白をつける場合は注意が必要です。

文字に下線をひく

background-imageプロパティとlinear-gradient()を利用して文字に線を引きます。

background-imageプロパティを使って文字に下線を引きます。

<p>background-imageプロパティを使って<span class="line">文字に下線</span>を引きます。</p>

.line {
  background-image: linear-gradient(transparent 80%, #8d8dff 80%);
}

文字にハイライトを引く

background-imageプロパティを使って文字にハイライトを引きます。

<p>background-imageプロパティを使って<span class="line">文字にハイライト</span>を引きます。</p>

.line {
  background-image: #ffe760;
}

文字にスプライト柄のハイライトを引く

background-imageプロパティを使って工夫することで、スプライト柄など色々な線を引くこともできます。

background-imageプロパティを使って文字にスプライト柄のハイライトを引きます。

<p>background-imageプロパティを使って<span class="line">文字にスプライト柄のハイライト</span>を引きます。</p>

.line {
  background-image: repeating-linear-gradient(
    -45deg,
    #ffe760, #ffe760 5px, #fff 5px, #fff 10px
  );
}

backgroundまとめ

background-imageプロパティとlinear-gradient()を利用することで、シンプルな線だけでなくハイライトやスプライト柄の線などを文字に引くことができるようになります。

background-image: linear-gradient(角度, 色1, 色2, ...);

グラデーションをうまく活用して、文字に線を引いているという訳ですね。

まとめ

border-bottomプロパティやbackground-imageプロパティをうまく活用することで、文字によりおしゃれな線を引くことができるようになります。

また、疑似要素と組み合わせると表現の可能性は無限であると言えるでしょう。

疑似要素と組み合わせておしゃれな線を表現する

<p class="sample_1">疑似要素と組み合わせておしゃれな線を表現する</p>

.sample_1 {
  position: relative;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
}
.sample_1::before {
  content: "";
  position: absolute;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 10px;
  background-image: repeating-linear-gradient(-45deg, orange 0%, orange 5px, green 5px, green 10px);
}

疑似要素と組み合わせておしゃれな線を表現する②

<p class="sample_2">疑似要素と組み合わせておしゃれな線を表現する②</p>

.sample_2 {
  position: relative;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
}
.sample_2::before {
  content: "";
  position: absolute;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 10px;
  background-image: linear-gradient(150deg, #441dd5 0%, #44107a 30%, #ff9bbc 60%, #fff800 100%);
}

コメント

タイトルとURLをコピーしました