【CSS】CSSで文字を蛍光ペンのようなマーカーを付けて綺麗に装飾する方法！

CSSも年々進化し、画像等を使用しなくてもCSSだけで幅広く文字を装飾できるようになりました。
読みやすい文章にすることは、サイトにとって必須ですよね。
CSSで文字を装飾して、多くの読者を獲得しましょう！

蛍光ペンのようなマーカー

まずはサンプルをご確認下さい。
サンプル1サンプル1サンプル1

<span style="background: linear-gradient(transparent 20%, #64e291 20%);">サンプル1サンプル1サンプル1</span>

サンプル2サンプル2サンプル2

<span style="background: linear-gradient(transparent 40%, #e6e56c 40%);">サンプル2サンプル2サンプル2</span>

サンプル3サンプル3サンプル3

<span style="background: linear-gradient(transparent 70%, #b6ffea 70%);">サンプル3サンプル3サンプル3</span>

サンプル4サンプル4サンプル4

<span style="background: linear-gradient(transparent 100%, #ffb3b3 100%);">サンプル4サンプル4サンプル4</span>

transparentが背景を透過することで実現しているため、%の大きさが透過度となっています。
つまり、100%にすると透過度が100%となるため、サンプル4のようにマーカーが表示されなくなります。数字が大きいほど線が細くなるのが特徴です。
カラーコードの方の%は高さとなるため、transparentの方の%と同値にすることが基本となっています。

また、mark要素でも代用可能です。

<mark>MARKMARKMARK</mark>

MARKMARKMARK

【CSS】画像いらず！Webフォントを使って「i」タグだけでアイコンを表示する方法

※2016/12/08 記事を修正しました。

アイコンに画像を使用する場合は、画像を探して、アップロードして、さらにタグを記述する必要がありますが、たった少しのタグだけで表示可能という便利な方法もあるんです。
タグは「i」なので、テキスト表示されるため、色やサイズなどのデザインの変更も簡単にできます。

今回はFont Awesomeを使用する方法をご紹介します。

1.Font Awesomeのファイルを読み込む

Webフォントは、Font Awesomeにあるフォントを使用するので、Font Awesomeのサーバーを読み込むように指示してあげましょう。

以下のlink要素を<head>～</head>内に記述して下さい。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Font Awesome
http://fontawesome.io/

2.「i」タグを記述してWebフォントを表示する

使用できるWebフォントは以下のFont Awesomeにあるアイコンです。
http://fontawesome.io/icons/

使用したいアイコンが見つかったらアイコンをクリックしてみましょう。そこで表示された「i」タグを記述するだけでWebフォントは表示されます。

■例

<i class="fa fa-home" aria-hidden="true"></i> ホーム
<i class="fa fa-play" aria-hidden="true"></i> 再生アイコン

このタグを記述すると、こう表示される

↓

ホーム
再生アイコン

応用編

CSSでアイコンのサイズ・色をカスタマイズしてみましょう。通常のCSSと同様にclassを指定するか、styleを記述するだけなので簡単です。

<p style="font-size:55px;color:#71C9CE;"><i class="fa fa-home" aria-hidden="true"></i> ホーム</p>
<p style="font-size:25px;color:#9E579D;transform: rotate(8deg);"><i class="fa fa-play" aria-hidden="true"></i> 再生アイコン</p>

このタグを記述すると、こう表示される

↓

ホーム

再生アイコン

■transform = 要素の角度を変える

• rotate() = 回転
• rotateX() = Xを軸として時計回りに回転
• rotateY() = yを軸として時計回りに回転
• rotateZ() = zを軸として時計回りに回転
• rotate3d() = (x軸,y軸,z軸,数値)

()内に数値を記述。

※Font Awesomeのzipをダウンロードし、自身のサーバーにアップロードすれば、WebフォントをFont Awesomeの外部サーバーから読み込む必要はなくなりますが、今回は説明を省略します。