記事をcssのspanタグでサッと装飾してみましょう

記事のテキストエディタに直接打ち込む形で手軽に装飾を施したい。
毎回思いついた時に装飾するだけで、スタイルシートに書き置く程のものでもないかな。

そういう場合は、
<span style=[属性]>~~~~~~ </span>
これを直接テキストに打ち込んで反映、表示させるようにしています。

自分が使用したい、spanタグを使って表示させるcssをここにまとめようと思います。

テキスト、文章を線で四角く囲う方法

ここにテキスト

こんな感じで強調表示させたい時は、

border属性を指定して装飾させます

<span style=”border: 2px solid #ff0000;”>ここを赤枠で囲います </span>

borderの数値を変えれば囲い線の太さが変わります。
 1px   5px 

#の部分をいじれば好きな色で囲えます。
青色 #0033FF 緑色 #33FF00

テキストに蛍光ペン風にラインを引く方法

蛍光ペンを引きたいテキスト

こんな感じで装飾表示させたい時は、

linear-gradient(transparent 線の太さ, 線の色 0%) 属性を使用します

<span style=”background: linear-gradient(transparent 60%, #FFFF33 60%);”>ここに黄色い蛍光ラインを引きます</span>

線の太さは%の値が小さくするほど太く表示されます。

水色 #00FFFF ピンク #FF99FF 緑 #99FF33 オレンジ #FF9900 紫 #9966FF

スポンサーリンク

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください