【あしらいCSS】テキストの下にマーカーを引く方法【Web制作頻出】

2025年9月6日2025年9月10日

「最近、『あしらい』という存在を知り、そのうちの1つにテキストの下にマーカーを引く方法があるらしいけど、どうやって実装するんだろう？」

テキストにマーカーを引くあしらいって、良く見ますよね。

このようにマーカーを引かれたら、サイトやブログを見た人は目がいってしまうので興味を引いたり（マーカーを引くあしらい、だけにね。。）注目を集めることができます。

ということで、今回はテキスト下にマーカーを引くためのコーディングについて解説したいと思います。

あしらいとは？

あしらいとは、部分的に当てる装飾のことを指します。

あしらいは、必ず取り入れなくてはいけないわけではありませんが

利用すると、特定の部分だけ強調することができたり、同じような要素が並んでいる箇所では変化を与えることができます。

例えば、あしらいのひとつに「テキストにマーカーを引く」というものがありますが

「もっと詳しく知りたい人は、ここをクリックしてください！」という文章があり、「ここをクリック」の部分に別のページのリンクが貼ってあるとします。

「ここをクリック」の部分に別のページのリンクを貼っておくだけでも色が変わるので、ページを見ている側も「あ、ここにリンクが貼ってあるんだな！」とは分かるでしょうが

「ここをクリック」のテキストの部分だけマーカーが引いてあったらどうでしょう？

該当テキストが強調され、ここにリンクが貼ってあることがより明確になりますよね？

あしらいを習得できると、サイトにメリハリをつけることができるようになり

Webデザイナーやサイト制作者として一歩抜きん出ることができますので、頑張って習得していきましょう！

テキストの下にマーカーを引く方法

では、あしらいについて理解ができたところで

さっそくテキストの下にマーカーを引くコーディングの実装をしていきたいと思います！

今回は、このようなアニメーションの実装をしていきます。

See the Pen テキストにマーカーが引かれるアニメーション by わい (@y_programing) on CodePen.

HTMLはこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テキストにマーカーアニメーション</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>マーカーを引きたいテキスト部分に、
        <span class="marker">このようにマーカーを引くことができます。</span>
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テキストにマーカーアニメーション</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>マーカーを引きたいテキスト部分に、
        <span class="marker">このようにマーカーを引くことができます。</span>
    </p>
</body>
</html>

マーカーを当てたいテキストは”marker”というclass名を付けたspanタグに入れています。

CSSはこちら。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.marker {
    background-image:
        linear-gradient(
            to bottom,
            transparent 70%,
            yellow 70%
        )
    ;
    background-repeat: no-repeat;
    animation: marker 3s .5s ease-in-out forwards;
}

@keyframes marker {
    from {
        background-size: 0%;
    }
    to {
        background-size: 100%;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.marker {
    background-image:
        linear-gradient(
            to bottom,
            transparent 70%,
            yellow 70%
        )
    ;
    background-repeat: no-repeat;
    animation: marker 3s .5s ease-in-out forwards;
}

@keyframes marker {
    from {
        background-size: 0%;
    }
    to {
        background-size: 100%;
    }
}

今回はspanタグ内のテキストの始まりから終わりにマーカーが移動するアニメーションをkeyframeで加えていますが、keyframeに関しては別の記事で解説していますので

気になる方や、アニメーションの使い方を深く学びたい人は見てみてください。

また、テキストの高さ100%にマーカーを当てたい場合は、markerセレクタのbackground-imageプロパティのlinear-gradientの中身を下のように書き換えましょう。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.marker {
    font-weight: bold;
    background-image:
        linear-gradient(
            yellow,
            yellow
        )
    ;
    background-repeat: no-repeat;
    animation: marker 1s ease-in-out forwards;
}

@keyframes marker {
    from {
        background-size: 0%;
    }
    to {
        background-size: 100%;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.marker {
    font-weight: bold;
    background-image:
        linear-gradient(
            yellow,
            yellow
        )
    ;
    background-repeat: no-repeat;
    animation: marker 1s ease-in-out forwards;
}

@keyframes marker {
    from {
        background-size: 0%;
    }
    to {
        background-size: 100%;
    }
}