【デザイン】BOX内にいろいろ入れたときのサンプル集

f:id:michiru521:20210321205130j:plain

BOX内にいろいろ入れたときのサンプル集。

目次から各項目へ飛べます。

リスト入り
BOX in BOX
広告ユニット
- 広告ユニットのみの場合

リスト入り

タグ

<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を入れてみる。

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

広告ユニット

タグ

<div class="dashed color_bd_green">
<span class="label_2 color_bg_green">ラベルの文字</span>
<p>BOXの中の文字</p>
<div class="add">
ここに広告のタグ
</div>

</div>

見た目

広告ユニット入りBOX

広告ユニットを入れるとこんな感じ。

HTML5＆CSS3デザインレシピ集 [ 狩野祐東 ]

価格:3,025円
(2021/3/20 13:39時点)
感想(5件)

広告ユニットをbox内に入れるときは、div class="add"で括る。

広告ユニットのみの場合