CSS

CSSで蛍光ペンの様なアンダーラインを引く方法

この記事では、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 横の「%」で透明部分を設定し、色の横の「%」で高さを決めていますので2つの「%」は揃える様にして下さい。


カラーの使い方

カラーについては薄めのものをお薦めします。推奨するカラーパターン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%はマーカー線が出ません。

マーカー線1つで、サイトのイメージが変わったり、センスが出てしまうので基本は抑えておきましょう。

ピックアップ記事

  1. Windows10でHDD不具合、SSDに交換でアクティベーションは必要か?
  2. 低価格レンタルサーバー比較:JETBOY vs ロリポップ
  3. サイトマップをグーグルに登録してクローラーを呼び込む

関連記事

  1. Web力強化

    アイキャッチ画像に使える無料素材サイト

    アイキャッチ画像って自分で作ろうとするとかなり面倒で時間がかかります。…

  2. CSS

    CSSでタブ付き強調見出しを付ける方法

    記事を書いていると「ここ強く強調したいな」と思うところが出できます。当…

  3. Web力強化

    撮影ボックスを使って撮影すると綺麗な写真が撮れる

    素材を撮影する時は撮影ボックスを使うと1ランク上の写真が簡単に撮影でき…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. アフィリエイトの始め方

    投稿する記事構成について定型を考えてみよう
  2. アフィリエイトの始め方

    レンタルサーバーの契約と独自ドメインの取得
  3. Wordpress

    アフィリエイトに最適なWordPressのテーマを紹介
  4. アフィリエイトの始め方

    低価格レンタルサーバー比較:JETBOY vs ロリポップ
  5. 素材

    意外と簡単!ファビコン(favicon.ico)の設置
PAGE TOP