お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    WordPressのスキルアップ!▶

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

    CSS(シー・エス・エス)
    この記事は約4分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    「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で下線を引きたい」を思ったときには、ご参考ください😃

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