注目キーワード

CSSでマーカーを作成してカラーのセットを設定する

CSSでマーカーを作成してカラーのセットを設定する
  1. HOME
  2. CSS
  3. CSSでマーカーを作成してカラーのセットを設定する

CSSで「基本的なマーカー」「下線のマーカー」「マーカーアニメーション」を作成しました。

文章を強調するときに蛍光ペン風のマーカーを使用したくなったのが作成の目的なのですが、作成途中で、使用するマーカーのカラーは事前にカラーセットとして設定しておき、後々でマーカーのカラー変更がCSSで簡単にできるような作成方法にしてみました。

CSSでマーカーを作成する方法から記事は始まります。

 

目次

まずはCSSでマーカーを作成する

 

まずは基本的なマーカーを作成します。

CSSでマーカーを表示するテキストにHTMLのspanタグをマークアップしてをスタイルを適用できるようにしておきます。

 

<p>文章をマークアップした<span>span要素にCSSでマーカーを作成して表示します。</span>作成するマーカーは<span>下線のマーカー</span>と<span>アニメーションするマーカー</span>の作成です。</p>

 

マーカー表示するspan要素をCSSでクラスセレクタにしてマスタイルをあてる場合は、span開始タグにclass属性と属性値を記述するようにします。

マークアップしたspan要素はCSSでセレクタにしてマーカーを作成します。

 

span{
    background:linear-gradient(transparent 0%, #566be0 0%);
    color: #fff;
    padding: 2px 0;
}

 

CSSのbackgroundプロパティを指定した値にlinear-gradient関数を記述することで、テキストの背景カラーとしてマーカーが表示できるように作成できます。

linear-gradient関数のカッコ内の記述が、マーカーのカラーを指定している記述です。

linear-gradient関数のカッコ内の記述方法は、2色のカラーとカラーストップを記述します。グラデーションカラーを作るときと同じ書き方ですが、1色は透明にします。

具体的には最初のカラーをtransparentで透明色を指定して0%でカラーストップ、カンマで区切り、次のグラデーションに使うカラーをカラーコードで指定して0%でカラーストップします。CSSの記述例ではカラーコードは#566be0を使用して青色にしています。

 

 

CSSを記述したファイルを保存してブラウザでHTMLファイルを表示するとテキストのspan要素の部分にlinear-gradientで指定したカラーでマーカーが表示するので、CSSでマーカーの作成が成功しているのが確認できます。

テキストが複数行になってもマーカーはテキストと一緒に改行します。マーカーのCSSをあてたspanタグがinline要素になるため、backgroundプロパティがテキストの各行ごとに適用されることでマーカーが改行します。

 

Advertisement

 

CSSでアンダーラインマーカーにする

 

基本的なマーカーを作成したCSSを土台にしてアンダーラインマーカーを作成する場合を説明します。テキストに対してマーカーが下線になるように表示されるマーカーです。

 

span{
    background:linear-gradient(transparent 85%, rgb(143 187 244) 85%);
}

 

CSSでアンダーラインマーカーを作成する場合の記述方法は、backgroundプロパティを指定した値にlinear-gradient関数を記述、linear-gradientのカッコ内にtransparentとマーカーのカラーに使用するカラーコードを指定します。どちらのカラーストップも85%くらいで指定します。

これによりtransparentで85%までが透明、85%以降は指定したカラーコードの色になります。

 

 

CSSでマーカーを作成するときに使用するlinear-gradientは、グラデーションで変化する色の方向を指定することができるのですが、今回は方向の指定を省略しています。色の方向を省略した場合、色は上から下の方向に変化します。

そのためマーカーを表示する要素の上(0%)から下(100%)の範囲のうち、透明色が85%を占領して、残りの範囲85%から100%までをマーカーに適用するカラーが反映することでアンダーラインマーカーにすることができます。

 

アニメーションするマーカーも作成

 

CSSでマーカーを作成するときにアニメーションするマーカーの作成についても説明します。

マーカーのCSSを適用するHTMLは、相変わらずテキストにclass属性を付与したspan要素でマークアップします。以下の記述例ではクラス名をmarker-animationにしています。

 

<p>白文字にマウスを乗せると<span class="marker-animation">マーカーが左から右へアニメーションします。</span></p>

 

クラス名marker-animationをCSSのクラスセレクタにしてマーカーアニメーションを作成するプロパティと値を記述していきます。

 

.marker-animation{
    background: linear-gradient(to right, #f48fb1 50%, transparent 50%) 100% bottom / 200% 20% no-repeat;
    font-weight:bold;
    transition: background-position .8s ease-out;
}

.marker-animation:hover{
    background-position: 0% bottom;
}

 

まずはbackgroundプロパティの記述です。値にlinear-gradient関数を記述してカッコ内に色の方向とマーカーの色、カラーストップを指定します。

「to rigth」でグラデーションする色を右の方向へ進むように指定します。

マーカーに使用するカラーの指定はtransparentとカラーコードの色を指定して、カラーストップで50%ずつに区切ります。

そしてマーカーの表示位置を決めて、背景のサイズを大きめの200%にします。

あとはマーカーをアニメーションさせるためにtransitionを指定すると、テキストにマウスが乗った時に、マーカーが左から右にアニメーションで移動します。

 

See the Pen
マーカーアニメーション by @shu (@shua01cdfbae5)
on CodePen.

 

Advertisement

 

CSSでマーカーのカラーセットを設定

 

CSSでマーカーを作成して下線のマーカーを作成みたり、アニメーションするマーカーを作成してみたりと、カラーパターンをいくつか作成しているうちに思うことがあります。

 

linear-gradientのカッコ内の記述が毎回だとめんどくさい。

 

しかしマーカーに使うカラーセットをあらかじめ設定しておけばマーカーのパターンを変更するときに、めんどくさいと思う気持ちがスッと消えると思ったのです。つまり楽できる。

たまたま調べていたCSSのカスタムプロパティ(IE未対応)を使用することで、マーカーのカラーセットをCSSで設定することができました。

 

マーカー専用のCSSファイルを読み込む

 

まずはマーカー専用のCSSファイルを作成。CSSファイル名は分かりやすく「marker.css」

 

<link rel="stylesheet" href="marker.css">

 

marker.cssのファイルは、CSSでマーカーを作成して表示させたいHTMLファイルのheadで読み込みます。

これにてmarker.cssファイルがマーカー専用のCSSファイルとして誕生しました。

 

カラーセットをmarker.cssに設定

 

マーカー専用のCSSファイル「marker.css」に、マーカーで使用するカラーセットをカスタムプロパティで設定します。

 

:root{
    --marker-blue-normal:linear-gradient(transparent 60%, rgb(143 187 244) 60%);
    --marker-pink:linear-gradient(to right, #f48fb1 50%, transparent 50%) 100% bottom / 200% 20% no-repeat;
    --marker-blue:linear-gradient(to right, #8fbbf4 50%, transparent 50%) 100% bottom / 200% 20% no-repeat;
    --marker-orange:linear-gradient(to right, #f4b78f 50%, transparent 50%) 100% bottom / 200% 20% no-repeat;
}
Advertisement

 

:rootでCSSのセレクタを作成します。

 

作成した:rootセレクタ内では、ハイフン2つ (–) で始まるカスタムプロパティ名を決めて記述。マーカーに使うカラーセットを作りたいので、例えば「marker-pink」や「marker-blue」のように後で自分がみたときにカラーが見つけやすいように。

そしてマーカー作成のときに登場したCSSのbackgroundプロパティの値になっている色の指定部分「linear-gradient」の記述をカスタムプロパティ名に合わせてどんどんセットしていきます。

おしゃれなマーカーやシンプルなマーカーなど適宜で設定してカラーセットを完成させます。

 

カラーセットでマーカーを作成する

 

CSSでカラーセットの設定が終わったら、マーカーを作成するときに、設定したカラーをbackgroundのプロパティ値として呼び出します。

 

span{
    background:var(--marker-blue-normal);
    font-weight:bold;
    padding: 2px 0;
}

 

マーカーに使用するカラーは設定済みですので、マーカー作成時のbackgroundの値linear-gradientの細かい記述は必要なしです。代わりにvar関数を記述します。var関数のカッコの中に、marker.cssファイル内で設定したカラーセットのカスタムプロパティ名を記述します。

 

 

作成したマーカーの表示結果は、カラーセットで設定したlinear-gradientの指定がカスタムプロパティ名で呼び出されマーカーが表示します。

CSSでおしゃれなマーカーを作成してみたけど、やっぱりシンプルなマーカーに変更しよう思ったときにはvar関数のカッコ内のカスタムプロパティ名を、事前に作成しておいたカラーセットのカスタムプロパティ名に差し替えるだけで済みます。

マーカーに使うカラーセットがあると、マーカーの変更が楽ですし、CSSの記述がスッキリするので、意外と良いマーカーの作成方法なのかもしれないと思いました。

CSSカテゴリの最新記事