お問い合わせはこちら

092-123-4567

営業時間　10:00 ～ 23:00 (年中無休)

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

1要素
- 背景色なし -

ここに見出しが入ります

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

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


Example code
<section class="colBox">
    <div class="container">
      <h2 class="contents__hl fontNotoSerif">ここに見出しが入ります</h2>
      <div class="contents__readBox">
        コンテンツ
      </div>
    </div>
</section>

1要素
- 背景色なし＆センター寄せ -

ここに見出しが入ります

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

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


Example code
<section class="colBox">
    <div class="container">
      <h2 class="contents__hl contents__hl--center fontNotoSerif">ここに見出しが入ります</h2>
      <div class="contents__readBox contents__readBox--center">
        コンテンツ
      </div>
    </div>
</section>

1要素
- 背景色あり＆センター寄せ -

ここに見出しが入ります

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

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


Example code
<section class="colBox colBox__bgColor bgColor-grey-100">
    <div class="container">
      <h2 class="contents__hl contents__hl--center fontNotoSerif">ここに見出しが入ります</h2>
      <div class="contents__readBox contents__readBox--center">
        コンテンツ
      </div>
    </div>
</section>

※使用したい背景色のクラス名は、コードサンプルの「カラー」ページからご確認ください。

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>

見出し左寄せ

Example code
<section class="section">
    <h3 class="section__hl--left">見出し左寄せ</h3>
    コンテンツ
</section>