いろんな文字装飾サンプル

ボーダー

ボーダー

ボーダーの色を変える時は、div class="color_bd_色"で変更！

背景をつける時は、div class="color_bg_色"で変更！

色一覧

pk
sky
green
cream

太さを変更する時は、div class="サイズ"で変更！

サイズ一覧

下にボーダー

<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>