コードサンプル
- レイアウト -

2要素横並び

ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。

ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。

ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。ここにコンテンツ内容がはいります。

Example code
<div class="rowBox-2elem">
  <div class="boxInner">
   コンテンツ
  </div>
  <div class="boxInner">
   コンテンツ
  </div>
</div>

※逆並びの場合 class="rowBox-2elem-reverse"
※スマホ表示のときは縦並びになります。

3要素横並び

Example code
<div class="rowBox-3elem">
  <div class="boxInner">
   コンテンツ
  </div>
  <div class="boxInner">
   コンテンツ
  </div>
  <div class="boxInner">
   コンテンツ
  </div>
</div>

※逆並びの場合 class="rowBox-3elem-reverse"
※スマホ表示のときは縦並びになります。

4要素横並び

Example code
<div class="rowBox-4elem">
  <div class="boxInner">
   コンテンツ
  </div>
  <div class="boxInner">
   コンテンツ
  </div>
  <div class="boxInner">
   コンテンツ
  </div>
  <div class="boxInner">
   コンテンツ
  </div>
</div>

※逆並びの場合 class="rowBox-4elem-reverse"
※スマホ表示のときは縦並びになります。

横配置(左・右・中央)

class="aLeft"
左配置
Example code
<div class="aLeft">
   左配置
</div>
class="aCenter"
中央配置
Example code
<div class="aCenter">
   中央配置
</div>
class="aRight"
右配置
Example code
<div class="aRight">
   右配置
</div>