LAYOUT レイアウト・コンポネート
横並び(column_N)
※スマホは「sp-clear」クラスをつけると横並び解除
<div class="m-col2 sp-clear">
<div>
<!-- コンテンツ -->
</div>
<div>
<!-- コンテンツ -->
</div>
</div>
2カラム
3カラム
4カラム
左右ボックス
※スマホは「sp-clear」クラスをつけると横並び解除
<div class="m-col-lr sp-clear">
<div class="m-col-lr__l">
<!-- コンテンツ -->
</div>
<div class="m-col-lr__r">
<!-- コンテンツ -->
</div>
</div>
<div class="m-col-lr is-reverse sp-clear">
<div class="m-col-lr__l">
<!-- コンテンツ -->
</div>
<div class="m-col-lr__r">
<!-- コンテンツ -->
</div>
</div>
見出しが入ります
句読点を入て拾文字、ここまでで二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九拾をについご盲従う百。句読点込み百拾文字、ここまで百二拾文字。この文章はダミ百三拾この文章はダミ百四拾自分に見ですの百五拾うど偶然へよく百六拾同時に嘉納さん百七拾係壇ああ見当に百八拾し人その主義私百九拾をについご盲従弐百。
見出しが入ります
句読点を入て拾文字、ここまでで二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九拾をについご盲従う百。句読点込み百拾文字、ここまで百二拾文字。この文章はダミ百三拾この文章はダミ百四拾自分に見ですの百五拾うど偶然へよく百六拾同時に嘉納さん百七拾係壇ああ見当に百八拾し人その主義私百九拾をについご盲従弐百。
テーブル
※スマホは「sp-clear」クラスをつけると横並び解除
【dlタグ使用時】
<dl class="m-table m-table01">
<div class="m-table__tr">
<dt class="m-table__th font-bold">項目名</dt>
<dd class="m-table__td">内容</dd>
</div>
<div class="m-table__tr">
<dt class="m-table__th font-bold">項目名</dt>
<dd class="m-table__td">内容</dd>
</div>
<div class="m-table__tr">
<dt class="m-table__th font-bold">項目名</dt>
<dd class="m-table__td">内容</dd>
</div>
</dl>
【tableタグ使用時】
<table class="m-table01">
<tbody>
<tr>
<th class="font-bold">項目名</th>
<td>内容</td>
</tr>
<tr>
<th class="font-bold">項目名</th>
<td>内容</td>
</tr>
<tr>
<th class="font-bold">項目名</th>
<td>内容</td>
</tr>
</tbody>
</table>
table1
- 項目名
- 内容
- 項目名
- 内容
- 項目名
- 内容
| 項目名 | 内容 |
|---|---|
| 項目名 | 内容 |
| 項目名 | 内容 |
table2
- 項目名
- 内容
- 項目名
- 内容
- 項目名
- 内容
| 項目名 | 内容 |
|---|---|
| 項目名 | 内容 |
| 項目名 | 内容 |
ボタン
※hoverでふんわりアニメーション
<p><a href="" class="m-link01"><span>通常ボタン</span> <i class="fa-solid fa-chevron-right"></i></a></p>
見出し文字サイズ
【通常見出し】
<h2>最大限に叶える家づくり。</h2>
【別のフォントサイズを使用する場合】
<h3 class="h1">最大限に叶える家づくり。</h3>
【pタグを使用する場合】
<p class="h h1">最大限に叶える家づくり。</p>
※下記はサンプルです。デザインにより異なります。
heading1最大限に叶える家づくり。
heading2最大限に叶える家づくり。
heading3最大限に叶える家づくり。
heading4最大限に叶える家づくり。
heading5最大限に叶える家づくり。
カラー
※下記はサンプルです。デザインにより異なります。
メインカラー
サブカラー
フォントカラー
デザインフォント
※下記はサンプルです。デザインにより異なります。
最大限に叶える家づくり。
【フォント1】
Noto Serif JP
最大限に叶える家づくり。
【フォント2】
Shippori Mincho
NEXT STAGE
【フォント3】
Crimson Text
JQUERY jQuery
通常スライダー
<!-- slick start -->
<div id="normalSlider" class="slickSlider">
<div class="img">
<!-- コンテンツ -->
</div>
<div class="img">
<!-- コンテンツ -->
</div>
<div class="img">
<!-- コンテンツ -->
</div>
<div class="img hide">
<!-- コンテンツ -->
</div>
</div>
<!-- slick end -->
無限ループスライダー(右から左)
<!-- slick start -->
<div id="roopSlider" class="slickSlider">
<div class="img">
<!-- コンテンツ -->
</div>
<div class="img">
<!-- コンテンツ -->
</div>
<div class="img">
<!-- コンテンツ -->
</div>
<div class="img hide">
<!-- コンテンツ -->
</div>
</div>
<!-- slick end -->
アコーディオン
<div class="accordion">
<div class="accordion__item">
<div class="accordion__lb js-tglBtn">
<!-- 見出し -->
</div>
<div class="accordion__cont">
<!-- コンテンツ -->
</div>
</div>
<div class="accordion__item">
<div class="accordion__lb js-tglBtn">
<!-- 見出し -->
</div>
<div class="accordion__cont">
<!-- コンテンツ -->
</div>
</div>
</div>
クリックで開く
二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九
クリックで開く
二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九
タブ
<div class="tabBox">
<div class="tabBox__tabBlock">
<div class="tabBox__tab is-active">
<!-- 見出し -->
</div>
<div class="tabBox__tab">
<!-- 見出し -->
</div>
<div class="tabBox__tab">
<!-- 見出し -->
</div>
<div class="tabBox__tab">
<!-- 見出し -->
</div>
</div>
<div class="tabBox__contBlock">
<div class="tabBox__cont is-active">
<!-- コンテンツ -->
</div>
<div class="tabBox__cont">
<!-- コンテンツ -->
</div>
<div class="tabBox__cont">
<!-- コンテンツ -->
</div>
<div class="tabBox__cont">
<!-- コンテンツ -->
</div>
</div>
</div>
タブ01
タブ02
タブ03
タブ04
二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九
二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九
二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九
二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九