【コピペでおしゃれに!】超簡単!CSSだけで蛍光ペン風のアンダーラインを作成

【コピペでおしゃれに!】超簡単!CSSだけで蛍光ペン風のアンダーラインを作成


ブログやホームページで文字だけがずらずらと並べられていると凄く読みづらいと感じることはありませんか?黒い文字以外に少し装飾が加わるだけでかなり読みやすいページへと変わります。
今回はCSSのみで簡単に導入できる蛍光ペン(マーカー)風のアンダーラインの作成方法について説明します。アンダーラインが加わるだけで強調したい箇所が一目で分かり非常に見やすいページへと変わります!

どんなものを作成できるの?

まずは、この記事で作成するサンプルをお見せします。

サンプル1(塗りつぶし)

特に重要な箇所に使用すると目立ってよさそうですね!
黄色のアンダーラインです。
青色のアンダーラインです。
緑色のアンダーラインです。
赤色のアンダーラインです。
ピンク色のアンダーラインです。

サンプル2(マーカー風)

個人的にこれがお気に入り!おしゃれでいい感じですね!
黄色のアンダーラインです。
青色のアンダーラインです。
緑色のアンダーラインです。
赤色のアンダーラインです。
ピンク色のアンダーラインです。

サンプル3(下線風)

派手なのは嫌だけど少しだけおしゃれに!っていう人にピッタリですね!
黄色のアンダーラインです。
青色のアンダーラインです。
緑色のアンダーラインです。
赤色のアンダーラインです。
ピンク色のアンダーラインです。

実装方法

それでは、実装方法を説明します。まずは、HTMLの記述方法から!

HTML記述方法

HTMLには以下のように記述してください。「span id=”○○”」の○○の部分は各自でお好きな物に

CSS記述方法

サンプル1

サンプル1(塗りつぶし)のCSS

サンプル2

サンプル2(マーカー風)のCSS

サンプル3

サンプル3(下線風)のCSS

まとめ

初心者の方々へ!

HTMLとかCSS全く分からない!という方の為にほんとにコピペのみで使用できるように記述しておきます。

まとめ

以上のように簡単にアンダーラインを表現することが可能です!ぜひやってみてくださいね。

WordPressをご使用の方はCSSの部分を 外観>テーマの編集>style.css にコピペすることで使用できますよ。

ご質問がありましたら是非コメントしてください!

CSSカテゴリの最新記事