【デザイン】いろんな文字装飾のサンプル
ちょっと目立たせたい時や、見出しっぽくしたい時などに使えそうな文字装飾のサンプルです。
続きを読むからどうぞ。
ボーダー
ボーダーの色を変える時は、div class="color_bd_色"
で変更!
背景をつける時は、div class="color_bg_色"
で変更!
色一覧
- pk
- sky
- green
- cream
太さを変更する時は、div class="サイズ"
で変更!
サイズ一覧
- s
- m
- l
- xl
下にボーダー
下にボーダー
<p class="bd_b">下にボーダー</p>
色変更
<p class="bd_b color_bd_pk">色変更</p>
ボーダーの太さを変更
太さ変更
太さ変更
太さ変更
<p class="bd_b s">細い</p> <p class="bd_b m">普通</p> <p class="bd_b l">太い</p>
ボーダーのスタイルを変更
破線
二重線
細い破線
太い二重線
<p class="bd_b_dashed">破線</p> <p class="bd_b_double">二重線</p> <p class="bd_b_dashed s">細い破線</p> <p class="bd_b_double l">太い二重線</p>
左にボーダー
左にボーダー
<p class="bd_l">左にボーダー</p>
色変更
<p class="bd_l color_bd_pk">色変更</p>
ボーダーの太さを変更
細め
普通
太め
<p class="bd_l s">細め</p> <p class="bd_l m">普通</p> <p class="bd_l l">太め</p>
ボーダーのスタイルを変更
破線
二重線
太い二重線
さらに太い二重線+背景色
<p class="bd_l_dashed">破線</p> <p class="bd_l_double">二重線</p> <p class="bd_l_double l">太い二重線</p> <p class="bd_l_double xl color_bd_pk color_bg_cream">さらに太い二重線+背景色</p>
端の丸いボーダー
下線の端を丸める
左線の端を丸める
<p class="bd_b_radius">下線の端を丸める</p> <p class="bd_l_radius">左線の端を丸める</p>
色違い
PINK
SKY
GREEN
CREAM
<p class="bd_b_radius_pk">PINK</p> <p class="bd_b_radius_sky">SKY</p> <p class="bd_b_radius_green">GREEN</p> <p class="bd_b_radius_cream">CREAM</p>
PINK
SKY
GREEN
CREAM
<p class="bd_l_radius_pk">PINK</p> <p class="bd_l_radius_sky">SKY</p> <p class="bd_l_radius_green">GREEN</p> <p class="bd_l_radius_cream">CREAM</p>
box内文字にボーダー
下にボーダー
ボーダーなしテキスト
ちょっと目立たせたい時に。
ホントはh1
など見出しタグを使用したいところですが、はてなブログの目次の使用上、見出しタグを使うと目次に全部反映されてしまうので、代わりにp
タグにclass
指定。
<div class="back_color_2"> <p class="bd_b">ボーダー付きテキスト</p> <p>ボーダーなしテキスト</p> </div>
左にボーダー
ボーダーなしテキスト
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
<div class="back_color"> <p class="bd_l">ボーダー付きテキスト</p> <p>ボーダーなしテキスト</p> </div>
端の丸いボーダー付きテキスト
ボーダーなしテキスト
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
<div class="back_color_2"> <p class="bd_b_radius">端の丸いボーダー付きテキスト</p> <p>ボーダーなしテキスト</p> <p>テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル</p> </div>
端の丸い左ボーダー
ボーダーなしテキスト
テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル
<div class="back_color_2"> <p class="bd_l_radius">端の丸い左ボーダー</p> <p>ボーダーなしテキスト</p> <p>テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル</p> </div>
太字・斜体・取り消し・下線・強調タグ
太字bタグ
<b>文字</b>
斜体iタグ
<i>文字</i>
取り消しsタグ
<s>文字</s>
下線uタグ
<u>文字</u>
強調emタグ
<em>文字</em>
さらに強調strongタグ
<strong>文字</strong>