CSS

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

この記事では、WEB上でよく見かける蛍光ペン風マーカー線について

実際の記述方法
カラーの使い方
線の太さによる印象の違い

などをサンプルコードを使いながら解説していきます。


このサイトで使っている蛍光ペン風マーカー線

実際にこのサイトで水色とピンクの2種類を使っていますのでまずはそのコードを紹介します。


蛍光ペン風マーカー線・水色

cssファイルへの記述内容と、実際のhtml文


蛍光ペン風マーカー線・ピンク

cssファイルへの記述内容と、実際のhtml文

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

関連記事

  1. Web力強化

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

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

  2. CSS

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. ASPアフィリ

    ASPアフィリエイトって何?その仕組みと考え方
  2. 雑記帳

    【備忘録】JETBOYメール設定、Beckey! 2.0 編
  3. Wordpress

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

    サイトマップをグーグルに登録してクローラーを呼び込む
  5. 素材

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