パステルノート

ボーダー

ボーダー

ボーダーの色を変える時は、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>

リスト入り

タグ

<div class="dashed color_bd_pk"> <span class="label_2 color_bg_pk">ラベル文字</span> <p>文章</p> <ul> <li>リスト１</li> <li>リスト２</li> <li>リスト３</li> <li>リスト４</li> </ul> </div>

見た目

リスト入りBOX

BOX内にリストを入れてみる。

リスト１
リスト２
リスト３
リスト４

BOX in BOX

タグ

<div class="dashed color_bd_sky"> <span class="label_2 color_bg_sky">ラベル文字</span> <p>boxの中の文字</p> <div class="solid_2"><p>boxの中のboxの中の文字</p> </div> </div>

見た目

BOXの中にBOX

boxのなかにboxを入れたときのサンプル。

boxのなかにboxを入れてみる。

広告ユニットや補足説明などに使うといい。

広告ユニット

タグ