ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】サイトをおしゃれにするマーカーの実装方法を解説

【CSS】サイトをおしゃれにするマーカーの実装方法を解説

HTML/CSS

2022/03/18

2023/05/06

自分のサイトを見返したときに、「なんだか味気ない」と感じることはありませんか？もしかしたら、その原因はテキストを強調するバリエーションが少ないことかもしれません。

そんなとき、おすすめなのがラインマーカーデザインの実装。これを取り入れることでバリエーション豊かにテキストを目立たせることができます。おしゃれな印象もプラスされるのでぜひ試してみてください。

この記事ではCSSでラインマーカーデザインを実装する方法を解説します。実装の際に意識すべきポイントや応用的なデザインについてもわかりやすく解説しております。ぜひ学習にお役立てください。

この記事で身につく内容

マーカーデザインで意識するポイント
マーカーデザインの実装方法

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

マーカーデザインで意識するポイント
マーカーデザインの実装方法
マーカーデザインのサンプル一覧
まとめ

マーカーデザインで意識するポイント

ラインマーカーの使用目的は、テキストを強調すること。主役はテキストであるため、マーカーが目立ちすぎないように工夫しましょう。

以下の3つがマーカーデザインの使用時に意識すべきポイントです。

色
太さ
書式（太字/ボールド）

色

マーカーデザインはシンプルな色づかいを意識しましょう。例えばマーカーを引くときにはテキストに色をつけないことでシンプルに仕上がります。色づかいはデザインの中でも難易度の高い部分です。デザインに慣れないうちは色数を少なくすると良いでしょう。

「どうしても色つきの文字にマーカーを引きたい！」その場合は、マーカー色と文字色の組み合わせに気をつけましょう。色の組み合わせが悪いとき、見た目で読み手にストレスを与えかねないためです。

文字色ありマーカー
文字色なしマーカー

太さ

マーカーのおすすめは、細めであることです。太めのマーカーは主張が強くなり、邪魔な印象を与えます。太めのマーカーを使用するときには、テキストが見やすくなるように色づかいを工夫しましょう。

マーカー太め
マーカー細め

書式（太字/ボールド）

マーカーを引くときは、テキストを太字にしましょう。マーカーを引くテキストは目立たせたい部分のため読者の目に留まる工夫が必要です。太文字とマーカーの組み合わせは読者の視界に入り込みやすく効果的です。

テキスト通常
テキスト太字

マーカーデザインの実装方法

基本形

次の記述がマーカーデザインを実装するときの基本形です。

<p>テキストに<span>ラインマーカー</span>を引きます</p>

span{
  background: #ffbb1e;/*使用する色を記述*/
}

色をつける部分のテキストを<span>タグで囲みbackgroundを指定します。

出力結果

テキストにラインマーカーを引きます

ラインマーカーは次の3つを変えることで様々なデザインを作ることができます。

太さを変える
グラデーションさせる
アニメーションを追加する

マーカーの太さを変える

以下は、マーカーの太さを変える記述です。

span{
  background:linear-gradient(transparent 80%, #ffbb1e 80%);/*linear-gradient(transparent ◯◯%, 使用する色 ◯◯%)*/
}

本来linear-gradientはグラデーションで使うプロパティですが、こちらを応用的に使用します。

transparentでグラデーションの開始色（マーカー上側の部分）を透明にしマーカーの太さを調整します。%に同じ数値を指定すればグラデーションになりません。%の値が大きいほどマーカーが細く、%の値が小さいほどマーカーが太くなります。

出力結果

マーカーを細くしています

記事の最後にマーカーの太さごとのサンプル一覧を用意しております。ぜひそちらも参照ください。

マーカーをグラデーションさせる

以下は、マーカーをグラデーションさせる記述です。

span{
  background:linear-gradient(to right, #ffbb1e, #ff9158);/*linear-gradient(グラデーションの方向, 使用する色1, 使用する色2)*/
}

linear-gradientのかっこ内では3つの値をカンマ（,）で区切って指定します。最初にグラデーションさせる方向を指定し、次に使用する2つの色を指定します。グラデーションで使用する2つの色は同系色にすると綺麗なグラデーションを作れます。

出力結果

マーカーがグラデーションします

マーカーにアニメーションを追加する

ここでは、マーカーにアニメーションをつける2つの方法を解説します。

ホバー時にマーカーが出現するアニメーション
ホバー時にマーカーを引くアニメーション

それぞれ出力結果を表示しております。どのようなアニメーションになるのか確認してみましょう。

以下は、マーカーにアニメーションを追加する記述です。

span{
  transition:1s;/*1秒かけてアニメーション*/
}

span:hover{
  background: #ffbb1e;/*使用する色を記述*/
}

出力結果

ホバーでマーカーが出現します

以下のようにマーカーを引いたようなアニメーションを作ることもできます。

/*最初の状態*/
span{
  background-image: linear-gradient(to right, #ffbb1e, #ffbb1e);
  background-repeat: no-repeat;
  background-size: 0;/*マーカー非表示*/
  transition: 1s;/*アニメーションの秒数*/
}

/*ホバー時*/
span:hover {
  background-size: 100%;/*マーカーが文字全体に広がる*/
}

出力結果

ホバーでマーカーを引きます

ここでのポイントは次の3つです。

background-imageとlinear-gradientを使用する
background-sizeでマーカーを引く動きを実装する
transitionでアニメーションの秒数を設定する

background-colorとlinear-gradientを使用する

マーカーにアニメーションを追加するときは、background-colorではなくbackground-imageを使用します。これはlinear-gradientで色の指定を行うためです。

linear-gradientで指定する色を別々にすればグラデーションつきのマーカーを引く動きが実装できます。

background-sizeでマーカーを引く動きを実装する

ホバーしていないときのbackground-sizeを0に、ホバー時のbackground-sizeを100%にするとホバー時にマーカーを引く動きを実装できます。

transitionでアニメーションの秒数を設定する

transitionを使用してアニメーションの秒数を設定します。background-sizeが0の状態から、ホバーした瞬間から1秒かけて100%になっていく動きが実装できます。

transitionの使い方はこちらの記事で詳しく解説しています。

【CSS】transitionでアニメーションをつける方法を解説

マーカーデザインのサンプル一覧

こちらは、サイトを彩るラインマーカーデザインのサンプルまとめです。自由にコピペしてお使いください。

太さ	オレンジ色	水色
太さ0%のマーカー	linear-gradient(transparent 0%, #ffe9b9 0%);	linear-gradient(transparent 0%, #e8f8f8 0%);
太さ10%のマーカー	linear-gradient(transparent 10%, #ffe9b9 10%);	linear-gradient(transparent 10%, #e8f8f8 10%);
太さ20%のマーカー	linear-gradient(transparent 20%, #ffe9b9 20%);	linear-gradient(transparent 20%, #e8f8f8 20%);
太さ30%のマーカー	linear-gradient(transparent 30%, #ffe9b9 30%);	linear-gradient(transparent 30%, #e8f8f8 30%);
太さ40%のマーカー	linear-gradient(transparent 40%, #ffe9b9 40%);	linear-gradient(transparent 40%, #e8f8f8 40%);
太さ50%のマーカー	linear-gradient(transparent 50%, #ffe9b9 50%);	linear-gradient(transparent 50%, #e8f8f8 50%);
太さ60%のマーカー	linear-gradient(transparent 60%, #ffe9b9 60%);	linear-gradient(transparent 60%, #e8f8f8 60%);
太さ70%のマーカー	linear-gradient(transparent 70%, #ffe9b9 70%);	linear-gradient(transparent 70%, #e8f8f8 70%);
太さ80%のマーカー	linear-gradient(transparent 80%, #ffe9b9 80%);	linear-gradient(transparent 80%, #e8f8f8 80%);
太さ90%のマーカー	linear-gradient(transparent 90%, #ffe9b9 90%);	linear-gradient(transparent 90%, #e8f8f8 90%);