MENU
Web制作スキルで人生に彩りを。
  1. ホーム
  2. CSS
  3. 【コピペOK】Webデザインの「あしらい」とは？｜よく使う5種類の実装方法【CSS】

【コピペOK】Webデザインの「あしらい」とは？｜よく使う5種類の実装方法【CSS】

CSS HTML Web制作
あしらいってどういう意味？よく使う種類と実装方法についても解説！
目次

あしらいとは？

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

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

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

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

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

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

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

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

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

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;
}

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

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

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

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

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

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

CSS
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.

蛍光マーカーを実装してみよう！

続いては、テキストの下にマーカーを引くコーディングの実装です。

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

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>

マーカーを当てたいテキストは”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%;
    }
}

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

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

あわせて読みたい
CSSアニメーションでタイピング風にテキストを表示させる方法【keyframes】 今回は、タイピング風にテキストを表示させるアニメーションのコーディングを解説していきます！ しかも、今回の方法はJavaScriptは使用しないので（HTMLと）CSSだけで...

また、テキストの高さ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%;
    }
}

spanタグ内のテキストの下部分だけでなく、全体にマーカーが当たるように変化します。

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

続いては、座布団です。

こちらも指定したテキストに座布団を敷いていきますが、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全体（画面全体）にライトブルーの背景色を付けた上で

zabutonというclass名をつけたdivタグに対し、白のborderと背景色を付けています。

それだけだとborderとテキストの間が窮屈なので、padding: 10px; を指定。

さらに、テキストを囲っている白色の四角の角を少し丸めるために、border-radius: 5px; も入れています。

座布団も、そこまで難しい実装ではないので

挑戦してみたい人はぜひエディターを開いてやってみてくださいね。

参考記事
あわせて読みたい
VSCodeの基本的な使い方とファイルを表示させる方法を徹底解説！【Web制作初心者必見！】 VSCodeとは？ VSCodeはMicrosoftが開発した、主にファイル内の記述を編集するためのエディターです。 高機能で軽量、かつ多くのプラグラミング言語に対応しているので ...

斜線を実装してみよう！

続いては、斜線の実装です。

斜線の場合は

CSS
section {
  clip-path: polygon(0% 10%, 100% 0%, 100% 95%, 0% 100%);
}

のように、sectionに対してclip-pathを指定し、数値を変更することで角度を変えることができます。

See the Pen Untitled by わい (@y_programing) on CodePen.

このようにセクションとセクションの間や、コンテンツとして図形を作る場合は

Clippyなどのgeneratorを利用すると簡単に実装できるのでおすすめです。

歪んだ円を実装してみよう！

歪んだ円を実装するには、正円に対して

CSS
.circle {
    border-radius: 31% 47% 35% 47% / 42% 55% 51% 34%;
}

のように、border-radiusの値を変えていくのがポイント。

See the Pen 手で描いたような円 by わい (@y_programing) on CodePen.

まとめ

ということで、今回は「あしらい」について解説していきましが、軽く復習しておくと

  • あしらいとは装飾のことで、付けることによってある部分を強調したり目立たせる機能がある
  • あしらいには、「下線（アンダーライン）」や「座布団」などがある
  • 意外に簡単に実装できるものもある

ということでした！

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

CSS HTML Web制作
あしらい
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

y_programingのアバター y_programing

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。大手有名企業の提携会社のサイト制作も経験。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。

関連記事

コメント

コメントする

CAPTCHA


目次