CSSでグラデーション機能を使用したマーカー風の文字装飾

CSSでグラデーション機能を使用したマーカー風の文字装飾

今回は、css3のlinear-gradient（リニアグラディエント）の記述方法につきまして、サンプルコードを記載しながら詳しく解説してみようと思います。

ページ作成時、テキストで表現を行っている際に、少し目立たせたいや、ただ単にマーカーで線を引いただけでなく、少しオシャレに表現してみたい場合など、多々あることと思います。そこで、css3のlinear-gradientの記述方法を詳しく記載してみようと思います。また、linear-gradientで記述できるグラデーションのジェネレーターもいたします。

• ・CSSでグラデション機能を使用したマーカー風の文字装飾
• ・従来のマーカー表現
• ・css3でのマーカー表現
• ・css3のグラデーションジェネレーターのご紹介

上記について記載していこうと思います…。

CSSでグラデーション機能を使用したマーカー風の文字装飾

ページ制作時、SEOを意識するとテキストでの説明などは、欠かすことができない要素になることと思います。しかしながら、テキスト文書で長い羅列を行いますと、どうしても読んでもらうことが難しくなってしまい、伝えたい部分だけでも目立たせたい場合など、文字列に蛍光ペンを引いたようなマーカー効果を施したい場合があります。

従来は文字列の背景に色を付けたり、背景画像を使いました。今回は従来のマーカー表現とCSS3のグラデーション機能を使用したマーカー表現を詳しく記載してみます。

■ 従来の背景色を指定した方法

■ CSS3で背景色を指定した方法

従来のマーカー表現

文字列の背景に色を付ける

文字列に蛍光マーカーを引いたような見映えを加えたい場合は、下記のように文字列の背景色を変更します。

背景画像を使用する方法

上記にもう一工夫加えたい場合は、背景画像を使う方法があります。

css3でのマーカー表現

CSS3のグラデーション機能を使うと、画像を指定したときと同様の表示をおこなうことができます。
色の境目に2色を指定することで、サンプルではあえてグラデーションさせず色を切り替えます。また、色の指定を変更するとマーカー自体にグラデーションを加えることも可能です。

それでは、少しご説明してみますと、background:linear-gradient(to bottom でtopから下（bottom）に向かって、背景色を指定しています。to bottomだと下からではなく、上から下に向かってになります。間違えやすいので注意が必要になります。また、to left topやto right topなどの指定も可能ですが、共に向かう方向を示しています。

■ グラデーションの指定

css3のグラデーションジェネレーターのご紹介

それでは最後に、おすすめのグラデーションジェネレーターを紹介してみます。
以前もご紹介いたしましたが、やはり下記のジェネレーターが便利です！！

CSS Gradient

細かな値を指定して自分でグラデーションを作成し、CSSのコードを出力することができるジェネレータサービスです。

ということで今回は、CSSでグラデーション機能を使用したマーカー風の文字装飾の記述方法につきまして、サンプルコードを交え記載してみました。

ページ作成を行っていると、SEOを意識するところと、ユーザーにどうしても伝えたいことが共通の要素だったりする場合があります。その際はやはりテキストを使用するわけですが、装飾が施されていないテキストの羅列では、ユーザーは見落としがちになってしまい、上手く重要な情報を使えることができなくなってしまいます。その際は上記のような方法で、上手くテキストの装飾を行い、ユーザーにシッカリと情報が伝わるように、作成することをおすすめいたします。

とりあえず、今回はここまで…。

ご相談・問合せ・お仕事のご依頼は↓コチラより…、それではまた次回…。

初心者向け：最短で「仕事レベルのプログラミング」を身に付ける方法

初心者向け：最短で「仕事レベルのプログラミング」を身に付ける方法 今回は、初心者にむけて、最短で「仕事レベルのプログラミング」を身に付ける方法を、私の経験をふまえ記載していこうと思います。 現在、学生さんやまたは、すでに社会人でプログラミン…

linear-gradient()

• ・linear-gradient()