この記事では、WEB上でよく見かける蛍光ペン風マーカー線について
「実際の記述方法」
「カラーの使い方」
「線の太さによる印象の違い」
などをサンプルコードを使いながら解説していきます。
このサイトで使っている蛍光ペン風マーカー線
実際にこのサイトで水色とピンクの2種類を使っていますのでまずはそのコードを紹介します。
蛍光ペン風マーカー線・水色
cssファイルへの記述内容と、実際のhtml文
/* マーカー線・水色 */
.marker-miz{
background:linear-gradient(transparent 65%, #c1ffff 65%);
font-weight:bold;
}
<span class="marker-miz">蛍光ペン風マーカー線・水色</span>
蛍光ペン風マーカー線・ピンク
cssファイルへの記述内容と、実際のhtml文
/* マーカー線・ピンク */
.marker-pnk{
background:linear-gradient(transparent 65%, #ffc1e0 65%);
font-weight:bold;
}
<span class="marker-pnk">蛍光ペン風マーカー線・ピンク</span>
補足説明
transparent 横の「%」で透明部分を設定し、色の横の「%」で高さを決めていますので２つの「%」は揃える様にして下さい。
カラーの使い方
カラーについては薄めのものをお薦めします。推奨するカラーパターン12種類を以下にご紹介します。「%」は0%です。
レ ッ ド・弱 (#ffadad)
レ ッ ド・強 (#ff9393)
ピ ン ク・弱 (#ffc1e0)
ピ ン ク・強 (#ff9ece)
オレンジ・弱 (#ffe0c1)
オレンジ・強 (#ffbf7f)
イエロー・弱 (#fff799)
イエロー・強 (#ffdc00)
グリーン・弱 (#b2ffb2)
グリーン・強 (#7fff7f)
ブ ル ー・弱 (#c1ffff)
ブ ル ー・強 (#7fbfff)
線の太さによる印象の違い
以下に5%～95%まで10%刻みでサンプルを表示します。透明な部分を%で表すと理解して下さい。色は#c1ffffです。好みの問題ですが当サイトでは65％を使用しています。
太さ 5%のマーカー線
太さ15%のマーカー線
太さ25%のマーカー線
太さ35%のマーカー線
太さ45%のマーカー線
太さ55%のマーカー線
太さ65%のマーカー線
太さ75%のマーカー線
太さ85%のマーカー線
太さ95%のマーカー線
※100%はマーカー線が出ません。
マーカー線１つで、サイトのイメージが変わったり、センスが出てしまうので基本は抑えておきましょう。
この記事へのコメントはありません。