コピペで使えるマーカー風、下線、アンダーラインのインラインCSS

コピペで使えるインラインCSS第二弾。

文房具大好き!!!!

Uniball Signo(ユニボール シグノ)を全色揃えたい今日この頃です。

今日は文章を蛍光ペン(マーカー)や赤ペン下線を引いて強調したような装飾をご紹介します。

ちなみにマーカーの色は、本物の色にこだわって、カラーピッカーで抽出した色から色番号を出しました!!(狂気じみている(笑))

蛍光ペン(マーカー)

★に装飾したい文章を入れてください。

ピンクのマーカー風

濃くて細め
<span style="background:linear-gradient(to bottom, rgba(255,153,204,0) 60%, #ff99cc 60%);">★</span>

薄くて太め
<span style="background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);">★</span>

水色のマーカー風

濃くて細め
<span style="background:linear-gradient(to bottom, rgba(128,255,255,0) 60%, #80ffff 60%);">★</span >

薄くて太め
<span style="background:linear-gradient(to bottom, rgba(128,255,255,0) 20%, #80ffff 100%);">★</span>

黄色いマーカー風

濃くて細め
<span style="background:linear-gradient(to bottom, rgba(255,255,102,0) 60%, #ffff66 60%);">★</span >

薄くて太め
<span style="background:linear-gradient(to bottom, rgba(255,255,102,0) 20%, #ffff66 100%);">★</span>

紫のマーカー風

濃くて細め
<span style="background:linear-gradient(to bottom, rgba(238,187,255,0) 60%, #eebbff 60%);">★</span >

薄くて太め
<span style="background:linear-gradient(to bottom, rgba(238,187,255,0) 20%, #eebbff 100%);">★</span>

黄緑のマーカー風

濃くて細め
<span style="background:linear-gradient(to bottom, rgba(102,238,102,0) 60%, #66ee66 60%);">★</span >

薄くて太め
<span style="background:linear-gradient(to bottom, rgba(102,238,102,0) 20%, #66ee66 100%);"> ★</span>

アンダーライン

★に装飾したい文章を入れてください。

いろんな色のアンダーライン(実線)

赤いアンダーライン
<span style="border-bottom: 2px solid red;">★</span >

青いアンダーライン
<span style="border-bottom: 2px solid blue;">★</span >

黄色いアンダーライン
<span style=”border-bottom: 2px solid yellow;”>★</span >

緑のアンダーライン
<span style="border-bottom: 2px solid green;">★</span >

紫のアンダーライン
<span style="border-bottom: 2px solid purple;">★</span >

その他の線の種類のアンダーライン

色は、色を表す「red」を「いろんな色のアンダーライン(実線)」を参考に他の色名に変えたり、#で始まる16進数表記に変えてもOK。

太い線
太いアンダーライン
<span style="border-bottom: 4px solid red;">★</span >

点線
点線のアンダーライン
<span style="border-bottom: 2px dotted red;">★</span >

破線
破線のアンダーライン
<span style="border-bottom: 2px dashed red;">★</span >

二重線
二重線のアンダーライン
<span style="border-bottom: 4px double red;">★</span >

おわりに

マーカーは背景(background)の色をグラデーションにしてあるので少し難しいですが、下線(アンダーライン)は境界線(border)の下側(bottom)に色、太さ、線の種類を指定しただけですので、前回の水平線の設定と同じです。
これで少しは、「CSSって面白い。もっと知りたい」と思ってもらえたら幸いです。

Special Thanks!!

かさこ塾同期の池田 景(いけけい)さんがアメブロで試してくださいました!
こちらでiPhoneアメブロアプリでの適用方法がより詳しく紹介されています。
iPhoneからアメブロアプリを使ってマーカー風アンダーラインを引く方法!コピぺで大丈夫!!
「運命のパートナーに出会うために必要な50個リスト」で自分と向き合い非モテが44歳でアラフォー婚☆しくじりからの一発逆転する方法

オマケ

HTMLとCSSを知るための簡単な本あるかな〜と探したら、出たばかりのこんなのありました。
1日で身につくらしいゾ!!

WINGSプロジェクト,宮本 麻矢 技術評論社 2017-06-15
売り上げランキング : 134162

by ヨメレバ

スポンサーリンク
レクタングル(大)

シェアする

スポンサーリンク
レクタングル(大)