チェック ブログ兼用スタイル確認

ブログタイトルを外でも使えるようにした

またhタグじゃなくて

<div class="blog_h2_style">ブログタイトル</div>
<div class="blog_h3_style">ブログタイトル</div>
<div class="blog_h4_style">ブログタイトル</div>
<div class="blog_h5_style">ブログタイトル</div>

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

<p><span class="marker_yellow">サンプルテキスト</span></p>
<p><span class="marker_blue">サンプルテキスト</span></p>
<p><span class="marker_red">サンプルテキスト</span></p>
<p><span class="marker_green">サンプルテキスト</span></p>
<p><span class="marker_pink">サンプルテキスト</span></p>
<p><span class="marker_sky">サンプルテキスト</span></p>
<p><span class="marker_orange">サンプルテキスト</span></p>
<p><span class="marker_violet">サンプルテキスト</span></p>

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

<p><span class="text_bg_yellow">サンプルテキスト</span></p>
<p><span class="text_bg_blue">サンプルテキスト</span></p>
<p><span class="text_bg_red">サンプルテキスト</span></p>
<p><span class="text_bg_green">サンプルテキスト</span></p>
<p><span class="text_bg_pink">サンプルテキスト</span></p>
<p><span class="text_bg_sky">サンプルテキスト</span></p>
<p><span class="text_bg_orange">サンプルテキスト</span></p>
<p><span class="text_bg_violet">サンプルテキスト</span></p>

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

サンプルテキスト

折返しテスト用サンプルテキストこちらのspanはモバイルでインラインブロックになるので

途中で折返しが来るとw100のボックスになります。そうしないとモバイルの折返しが違和感がある

<p><span class="text_bg_yellow span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_blue span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_red span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_green span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_pink span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_sky span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_orange span_padding">サンプルテキスト</span></p>
<p><span class="text_bg_violet span_padding">サンプルテキスト</span></p>

白黒タイトル

h2.box7 サンプルタイトル

h2.box8 サンプルタイトル

h3.box9 サンプルタイトル

h3.box7 サンプルタイトル

h3.box9 サンプルタイトル

h3.box10 サンプルタイトル

h4.box7 サンプルタイトル

hタグ ＋ classのセット　なので　classだけでは 適応されない 

<h2 class="box7">h2サンプルタイトル</h2>
<h2 class="box8">h2サンプルタイトル</h2>
<h2 class="box9">h3サンプルタイトル</h2>
<h3 class="box7">h3サンプルタイトル</h3>
<h3 class="box9">h3サンプルタイトル</h3>
<h3 class="box10">h3サンプルタイトル</h3>
<h4 class="box7">h4サンプルタイトル</h4>

囲みボックス系

<div class="box_border">
<p>サンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキスト</p>
</div>
<div class="box_gray">
<p>サンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキスト</p>
</div>
<div class="box_red">
<p>サンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキスト</p>
</div>
<div class="box_sky">
<p>サンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキスト</p>
</div>
<div class="box_ivory">
<p>サンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキスト</p>
</div>