サンプルページ

テンプレについて

カラムを作るときは12分割で考える

コンテンツの区切りはsectionで区切る

タイトル系

<h2 class="ttl01"><span>h2</span></h2>

h2

<h3 class="ttl02"><span>h3h3h3h3</span></h3>

h3h3h3h3

<h4 class="ttl03">h4h4h4h4</h4>

h4h4h4h4

<h5 class="ttl04">h5h5h5h5</h5>

h5h5h5h5

段落、文章、画像

<p>テキストがはいります。テキストがはいります。</p>

テキストがはいります。テキストがはいります。

<p><img src="https://placehold.jp/800x530.png" alt=""></p>

リスト系

      <ul class="list">
        <li>リストが入ります。リストが入ります。</li>
        <li>リストが入ります。リストが入ります。</li>
        <li>リストが入ります。リストが入ります。</li>
      <!-- /.list --></ul>
      

• リストが入ります。リストが入ります。
• リストが入ります。リストが入ります。
• リストが入ります。リストが入ります。

      <ol>
        <li>リストが入ります。リストが入ります。</li>
        <li>リストが入ります。リストが入ります。</li>
        <li>リストが入ります。リストが入ります。</li>
      </ol>
      

1. リストが入ります。リストが入ります。
2. リストが入ります。リストが入ります。
3. リストが入ります。リストが入ります。

注意書き

      <div class="attention">
        <p>※注意書きなどがはいります。注意書きなどがはいります。注意書きなどがはいります。<br>
          ※注意書きなどがはいります。注意書きなどがはいります。注意書きなどがはいります。</p>
      <!-- /.attention --></div>
      

テーブル

      <table>
        <tr>
          <th>テーブルテーブル</th>
          <td>テキストが入ります。テキストが入ります。</td>
        </tr>
        <tr>
          <th>テーブルテーブル</th>
          <td>テキストが入ります。テキストが入ります。</td>
        </tr>
      </table>
      

ボタン

      <div class="btn_common btn_arrow"><a href="">ボタンボタン</a></div>
      

      <div class="btn_common btn_pdf"><a href="">PDFボタン</a></div>
      

グリッド

2分割

      <div class="row">
        <div class="col-sm-6">テキストテキスト</div>
        <div class="col-sm-6">テキストテキスト</div>
      </div>
      

3分割

      <div class="row">
        <div class="col-sm-4">テキストテキスト</div>
        <div class="col-sm-4">テキストテキスト</div>
        <div class="col-sm-4">テキストテキスト</div>
      </div>
      

4分割

      <div class="row">
        <div class="col-sm-3">テキストテキスト</div>
        <div class="col-sm-3">テキストテキスト</div>
        <div class="col-sm-3">テキストテキスト</div>
        <div class="col-sm-3">テキストテキスト</div>
      </div>
      

1対2

      <div class="row">
        <div class="col-sm-4">テキストテキスト</div>
        <div class="col-sm-8">テキストテキスト</div>
      </div>
      

1対3

      <div class="row">
        <div class="col-sm-3">テキストテキスト</div>
        <div class="col-sm-9">テキストテキスト</div>
      </div>