HOME > ウェブデザイン > 【CSS3】テキストに蛍光ペンぽい装飾を施す方法を雰囲気別に分けてみた
公開日:2016.2.10
この記事は約3分で読めます。

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

この記事は最終更新日から3年以上経過しているため現状にそぐわない可能性もあります。

受験前によくお世話になった蛍光ペン。

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

SIRIUSレビューイメージ画像

蛍光ペンいろいろ

基本的にはCSSで設定します。

色の指定は16進数によるカラーコードを使用。

当ページでは一例として背景色にピンク系(#f763f2)を指定してます。

カラーコードはカラーコード一覧表といったようなページを参考にして#から始まる6桁の英数字で指定します。

行全体(※ブロック)に蛍光ペン装飾をかける人はあまりいないと思われます。

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

こんな感じですね。

 

全体を塗りつぶし

テキストの上から下まで全体を塗りつぶすシンプルなやり方です。

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

 

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

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

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

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

 

テキストの70%だけ

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

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

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

上記30%という数値は、表示させたい部分が全体の70%になるので(100-70)=30%という計算になってます。

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

 

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

上記マーカーの下を少しだけ厚めに(※余白)してみました。

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

 

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

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

徐々に透明(transparent)になるイメージですね。

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

上記10%という数値は先ほどと同じく(100-90)=10%という計算です。

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

キャプチャ画像

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

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

キャプチャ画像

これを解決するには”RGBa”というプロパティを使います。

rgbaの後ろの255,255,255は16進数ではなくRGBによる色指定となります。

またその直後の0は不透明度を表し、不透明度0すなわち100%の透明度となります。

詳しくは「16進数 rgba変換」などのキーワードで検索してみてください。

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

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

キャプチャ画像

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

以上です。

スポンサーリンク

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

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

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