loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS3】テキストに蛍光ペンぽい装飾を施す方法を雰囲気別に分けてみた
この記事は約3分で読めます。

【CSS3】テキストに蛍光ペンぽい装飾を施す方法を雰囲気別に分けてみた

投稿日:2016.2.10

受験前によくお世話になった蛍光ペン。
あれが実際にどれだけ受験に役立ったかは定かではないんですが、
少なくともウェブの世界では目立たせる手段として充分役に立ちます。

スポンサーリンク

蛍光ペンいろいろ

基本的にCSSでの設定になります。

色の設定は16進数になってます。

ここで背景色に使っている色はピンク系(#f763f2)です。

色を変えたい場合はとほほの色入門・色見本あたりで探ってみてください。

行全体に蛍光ペン装飾をかける人はあまりいないと思われます。

そのためHTMLは”p”ではなく”span”を使っての構文にしてあります。

 

全体を塗りつぶし

こちらはテキストの上から下まで全体を塗りつぶすやり方です。
一番シンプルですね。

これは蛍光ペン装飾を施すテストです。

 

ペンを少し太めにしてみる

上の例はテキストの高さ丁度にかかってますが、
少し外側まではみ出させたい時は”余白”を付け足してあげましょう。

数値を変えれば太さも変わります。

これは蛍光ペン装飾を施すテストです。

 

テキストの70%だけ

テキスト全体ではなく下から70%の高さだけマーカー表示させてみます。

これは蛍光ペン装飾を施すテストです。

ここからは”linear-gradient”という関数(?)を使います。

表示させたい部分が全体の70%になるなら指定には(100-70)=30%と書きます。

(※transparentは”透過”という意味です)

 

テキストの70%だけ(太め)

テキスト全体ではなく下から70%の高さだけマーカー表示させてみます。

その際、下を少し太めにしてみます。

これは蛍光ペン装飾を施すテストです。

 

テキストの90%だけグラデ表示

テキスト全体ではなく下から90%の高さだけ、
今度はグラデーションをかけてマーカー表示させてみます。

これは蛍光ペン装飾を施すテストです。

透明(transparent)から徐々に色が出てくるイメージですね。

ただしこれだとPCで見た時は問題ないんですが、
iPhone(スマホ)で見た時はこんな↓風に透過部分が黒っぽくなってしまうんです。

キャプチャ画像

これは”transparent”ではなく、白を表す”#FFFFFF”に変えてやれば解決します。

ただし背景が白1色の場合は問題ないですが、背景に白以外の色が設定されていると
こんな↓感じでみっともなくなっちゃうんですね。

キャプチャ画像

そこでグラデーションマーカーを使いたい時は、
”RGBa”というプロパティを使ってあげれば解決します。

上記コードを使った実際の表示がこちら↓。

背景色のあるページでもきちんと透過表示されました。

キャプチャ画像

これは蛍光ペン装飾(グラデーション+RGBa)を施すテストです。

以上、使えそうなのはこんなところでしょうか。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「Logue (tcd020)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ