会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【CSS】テキストに下線(アンダーライン)を引く時に使えるプロパティ+波線や点線・二重線を引く

CSS(シー・エス・エス)
この記事は約4分で読めます。

「CSSで下線引く時に使うCSSは何?」という時に使えるプロパティです。

下線/text-decoration:underline;

まずは、このプロパティ「text-decoration:underline;」で下線(アンダーライン)が引けます。

<p>吾輩は猫である。<span style="text-decoration:underline;">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="text-decoration:underline;">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>

結果▼

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

これで良ければ…以上です。

色や波線を引きたい時は、指定の方法を追加します。波線や点線なども引けます。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

text-decoration:underline wavy #f00;
text-decoration:underline dotted #0f0;
<p>吾輩は猫である。<span style="text-decoration:underline wavy #f00;">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="text-decoration:underline dotted #0f0;">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>

他にもいくつかアンダーラインを引く方法がありますので、試してみます。

ボーダー/border-bottom

border-bottomプロパティを使うことでも下線が引けます。

border-bottom は一括指定の CSS のプロパティで、要素の下側の境界のプロパティをすべて設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom

下線を引きたい場所をspanなどのタグで囲み、 border-bottomプロパティを指定します。そうすると下線のような状態になります。borderの指定を変えれば、色や線の形状も変えることができます。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<p>吾輩は猫である。<span style="border-bottom:1px solid #f00;">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="border-bottom:1px dotted #ff0;">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>
border-bottom:1px solid #f00;
border-bottom:1px dotted #ff0;

マーカー風/background:linear-gradient

background:linear-gradient プロパティを使って表示させます。マーカーを引いたようなイメージの下線を表示できます。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<p>吾輩は猫である。<span style="background:linear-gradient(transparent 70%, #FFFF00 0%);">名前はまだ無い</span>。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で<span style="background:linear-gradient(transparent 50%, #FF0000 0%);">ニャーニャー泣いていた事だけは記憶している</span>。吾輩はここで始めて人間というものを見た。</p>
background:linear-gradient(transparent 70%, #FFFF00 0%);
background:linear-gradient(transparent 50%, #FF0000 0%);

まとめ

CSSで下線を引く方法でした。他にも色々と方法がありそうですので、もし「CSSで下線を引きたい」を思ったときには、ご参考ください😃

0 件のコメント

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