あしらいってどういう意味？よく使う種類と実装方法についても解説！

2025年9月6日2025年9月14日

あしらいとは？

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

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

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

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

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

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

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

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

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

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

よく使われるあしらい

下線（アンダーライン）

1つ目は、「下線（アンダーライン）」です。

説明するまでもないと思いますが、テキストの下に線が入っている装飾ですね。

また、下のようなマーカーが引いてあるテキストの表現も多用され

下線より強調度合いを高めたい時にお勧めのあしらいです。

座布団

座布団とは、テキストを楕円の枠などで囲ったもののことを言います。

Webサイトでよく登場するので、1度は見たことがあると思いますし、案件でも頻出のデザインです。

波線

続いては、「波線」です。

1つ目に紹介した下線の波線（ゆらゆらした下線）もありますが、ここで紹介したいのはそれでなく

セクションのトップやボトムに指定し、セクション間で動きを付けるあしらいの方です。

歪んだ円

正円ではなく、少し手書きでブレているような円もあしらいとしてよく出てきます。

無料相談や資料請求、お問い合わせボタンなど、様々なボタンに応用できるかと思います。

4方向のいずれかの端だけ丸くする

歪んだ円と少し似ていますが、こちらは「長方形のいくつかの角を丸くする」というあしらいです。

例えば、セクションに背景色を付け、左上と左下だけ丸くし

右端に寄せることで、遊び心があるデザインに仕上がります。

では、あしらいの種類を理解できたところで

実際に、いくつかのあしらいを実装してみましょう！

今回は、「下線（アンダーライン）」と「座布団」を実装していきます。

下線（アンダーライン）を実装してみよう！

まずは、指定したテキストに下線を引いてみましょう。

テキストに下線を引くには、border-bottomプロパティを適用します。

See the Pen CSSでテキストに下線を入れる by わい (@y_programing) on CodePen.

他にも、text-decorationプロパティにunderlineを指定することでも下線は引けます。

今回は、　h2に以下のようなCSSを当てています。

CSS

h2 {
    border-bottom: 3px solid lightpink;
}

h2 {
    border-bottom: 3px solid lightpink;
}

border-bottomのみならず、borderには

border: (線の太さ) (線の形) (色);

を指定する必要があります。

もし、実線でもっと細い線、例えば1pxくらいの線を引きたかったら

CSS

h2 {
    border-bottom: 1px solid lightpink;
}

h2 {
    border-bottom: 1px solid lightpink;
}

にすればいいですし、ドットや破線などにしたい場合は

CSS

h2 {
    border-bottom: 3px dotted/dashed lightpink;
}

h2 {
    border-bottom: 3px dotted/dashed lightpink;
}

などにすればいいです。

See the Pen CSSでテキストに下線を入れる（ドット線） by わい (@y_programing) on CodePen.

See the Pen CSSでテキストに下線を入れる（破線） by わい (@y_programing) on CodePen.

座布団を実装してみよう！

続いては、座布団です。

こちらも指定したテキストに座布団を敷いていきますが、divタグで囲んで白色のborderを付け、テキスト周りの背景をbackground: #fffでborderと同じ白色を付けています。

ただ、デフォルトの背景も白色で見分けがつかないため、body全体の背景はライトブルーにしています。

See the Pen あしらい（座布団） by わい (@y_programing) on CodePen.

詳しいCSSは、以下の通り。

body {
    background: lightblue;
}

.zabuton {
    padding: 10px;
    margin: 10px 10px 0;
    background: #fff;
    width: 215px;
    border: 1px solid #fff;
    border-radius: 5px;
}

body {
    background: lightblue;
}

.zabuton {
    padding: 10px;
    margin: 10px 10px 0;
    background: #fff;
    width: 215px;
    border: 1px solid #fff;
    border-radius: 5px;
}