CSSを使って文字装飾 (下線・蛍光マーカー風など)

2021年5月3日2021年5月4日HTML・CSS

CSSを使って文字装飾
€(下線・蛍光マーカー風など)

今回は文字に下線を付ける方法と下線の色やふとさを変える方法などについて書こうと思います。

基本的な下線をつける方法

まずは基本的な下線をつける方法を紹介します。

HTML uを使う

<u>～</u>を使って下線を付けることができます。

<u>下線をつける</u>

下線をつけたい語句を<u>～</u>タグで囲むと下線を付けることができます。

ただし、uタグの下線は文字色と同じ色で太さや線の種類などを帰ることはできません。またuタグは語句を強調させるために使用するタグではない(らしい)です。

きらり

uタグって「強調」させるためのタグじゃないの？

結耶

違うみたいだよ。だからなのか色や線の種類を変えたりできないみたい。
私もそうだけど、「強調」目的で使ってる人は多いと思うよ～。

CSS text-decoration

<span class="sample-underline">下線をつける</span>

.sample-underline {
    text-decoration:underline;
}

HTMLの「span」を利用してCSS「text-decoration:underline」を指定すれば、「span」で囲んだ語句に下線を付けることができます。

下線の色を変える text-decoration-color

「text-decoration:underline」でつけた下線は文字と同じ色になりますが、「text-decoration-color」を使い色を指定すれば下線の色を変えることができます。

.sample-underline {
    text-decoration:underline;
    text-decoration-color:red;
}

線の種類を変える text-decoration-style

「text-description-style」を使って指定すれば線の種類を変えることができます。

.sample-underline {
    text-decoration:underline;
    text-decoration-color:red;
    text-description-style:double;
}

きらり

結耶。「text-description」は人さは変えられないの？

結耶

変えられないみたいだよ。下線はこれでつけられるけどちょっと味気によね。
それにこれだと「リンク」と 間違えそうだよね。

上で紹介した2つの方法ではちょっと味気なく使うには不便な気がします。ということでちょっと別の方法で下線をつけてもう少しおしゃれにしてみましょう。

border-bottomを使う

<span class="sample-underline">下線をつける</span>

.sample-underline {
   border-bottom:1px solid red;
}

「border-bottom」を使って語句に下線をつけることもできます。borderなので色や太さ、線の種類も指定できます。

色を変える

.sample-underline {
   border-bottom:1px solid blue;
}

太さを変える

.sample-underline {
   border-bottom:5px solid blue;
}

線の種類を変える

二重線(double)

.sample-underline {
   border-bottom:5px double blue;
}

破線(dashed)

.sample-underline {
   border-bottom:5px dashed blue;
}

点線(dotted)

.sample-underline {
   border-bottom:5px dotted blue;
}

きらり

色や太さ、線の種類を変えると見やすくわかり易くなるね！

結耶

そうだよね。色や太さを変えるだけで印象が変わるよね～(*^^*)

backgroundで蛍光マーカー風に！

「background」を使うと蛍光マーカー風になります。

<span class="sample-marker">下線をつける</span>

.sample-marker {
  background:pink;
}

文字の下部分にマーカーを付ける

<span class="sample-underline">下線をつける</span>

.sample-marker {
 background:linear-gradient(transparent 70%, pink 70%);
}

「background:linear-gradient(transparent 70%, yellow 70%);」の中の％の数値を大きくするほどマーカーの線が細くなります。％の数値を調整してお好みの幅にしてください。

きらり

どれにしようかなぁ～。迷うなぁ。」

結耶

色違いで作って使い分けるのもいいよね(*^^*)
コピーして使う場合は「クラス名を好みのものに変えてね。

最後に

最初に紹介した「u」や「text-decoration」もいいと思いますが、色や線の種類などの変更ができず不便な気がします。また、テキストのリンクでも実線の下線が入るため、リンクなのか強調のための下線なのか解らず、ユーザーさんが戸惑ってしまうかもしれません。

なので色を変えたり、太さ、線の種類を変えたり、や蛍光マーカー封などにして区別しておくと記事を読んでくれるユーザーさんがわかり易くなると思います。

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター

きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM