静的ページ基本構造 ※必ず必要

ページヘッダー + 内容記述領域

この構造が固定ページの基本となります。

ページヘッダー Texttext 

<div class="l-contentsHeader">
  <div class="l-contentsHeader__inner">
    <h1 class="l-contentsHeader__title">
      <span class="l-contentsHeader__titleMain">ページヘッダー</span>
      <span class="l-contentsHeader__titleSub">Texttext</span>
    </h1>
  </div><!-- l-contentsHeader__inner -->
</div>

<div class="l-wrapper u-autoSpacer">
  **ここに内容を記述(html)**
  **ここに内容を記述(html)**
  **ここに内容を記述(html)**
</div>

静的ページ基本説明

上記のclassl-wrapperの中に以下で説明するhtmlを記述。

ページのセクションはclassl-sectionで定義。

親要素にclassu-autoSpacerを付与するとその子要素に自動で余白が設定されます。

<div class="l-section">
	**ここに内容を記述(html)**
	**ここに内容を記述(html)**
	**ここに内容を記述(html)**
</div>

画像表示領域-1カラム

<div class="c-grid-image is-col--1">
  <div class="c-grid-image-content">
    <div class="c-grid-image-content__item">
      <img src="/assets/img/top/sample.jpg" alt="">
    </div>
  </div>
</div>

画像表示領域-2カラム

<div class="c-grid-image is-col--2">
  <div class="c-grid-image-content">
    <div class="c-grid-image-content__item">
      <img src="/assets/img/top/sample.jpg" alt="">
    </div>
    <div class="c-grid-image-content__item">
      <img src="/assets/img/top/sample.jpg" alt="">
    </div>
  </div>
</div>

画像表示領域-3カラム

<div class="c-grid-image is-col--3">
  <div class="c-grid-image-content">
    <div class="c-grid-image-content__item">
      <img src="/assets/img/top/sample.jpg" alt="">
    </div>
    <div class="c-grid-image-content__item">
      <img src="/assets/img/top/sample.jpg" alt="">
    </div>
    <div class="c-grid-image-content__item">
      <img src="/assets/img/top/sample.jpg" alt="">
    </div>
  </div>
</div>

見出し-h2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-heading-h2">
  <h2 class="c-heading-h2__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h2>
</div>

見出し-h3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-heading-h3">
  <h3 class="c-heading-h3__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
</div>

見出し-h3(小)

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-heading-h3 is-small">
  <h3 class="c-heading-h3__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
</div>

テキスト-p

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="c-common-el__p">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

ボタン

詳しく見る
詳しく見る 
<div class="c-button-large">
  <a href="#" class="c-button-large__content">
    <span class="c-button-large__text">詳しく見る</span>
  </a>
</div>

<div class="c-button-large is-colored--dark">
  <a href="#" class="c-button-large__content">
    <span class="c-button-large__text">詳しく見る</span>
  </a>
</div>

ボタン-大

詳しく見る
詳しく見る 
<div class="c-button-strong">
  <a href="#" class="c-button-strong__content">
    <span class="c-button-strong__text">詳しく見る</span>
  </a>
</div>

<div class="c-button-strong is-colored--dark">
  <a href="#" class="c-button-strong__content">
    <span class="c-button-strong__text">詳しく見る</span>
  </a>
</div>

組み合わせ例

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

詳しく見る 
<div class="l-section u-autoSpacer">
  <div class="c-heading-h3">
    <h3 class="c-heading-h3__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
  </div>
  <p class="c-common-el__p">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <div class="c-button-large">
    <a href="#" class="c-button-large__content">
      <span class="c-button-large__text">詳しく見る</span>
    </a>
  </div>
</div>

左に画像

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

詳しく見る 
<div class="l-section">
  <div class="c-leftImageBox">
    <div class="c-leftImageBox-header">
      <img src="/assets/img/top/hero_image01.png" alt="">
    </div>
    <div class="c-leftImageBox-body u-autoSpacer">
      <div class="c-heading-h3 is-small">
        <h3 class="c-heading-h3__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
      </div>
      <p class="c-common-el__p">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <div class="c-button-large">
        <a href="#" class="c-button-large__content">
          <span class="c-button-large__text">詳しく見る</span>
        </a>
      </div>
    </div>
  </div>
</div>

テーブル-table

テーブルタイトル

テーブルタイトル テーブルタイトル
テーブルタイトル テーブルテキスト テーブルテキスト
テーブルタイトル テーブルテキスト テーブルテキスト 
<div class="c-table">
  <p class="c-table-tilte">テーブルタイトル</p>
  <table>
    <thead>
      <tr>
        <td></td>
        <td>テーブルタイトル</td>
        <td>テーブルタイトル</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>テーブルタイトル</th>
        <td>テーブルテキスト</td>
        <td>テーブルテキスト</td>
      </tr>
      <tr>
        <th>テーブルタイトル</th>
        <td>テーブルテキスト</td>
        <td>テーブルテキスト</td>
      </tr>
    </tbody>
  </table>
</div>