カード(横並びカラム)
目次
2カラム ul li内部デザイン
画像キャプション
画像キャプション
画像キャプション
画像キャプション
<ul class="c-twoColumns"> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li> </ul>
2カラム ul li 装飾版
<ul class="c-twodesign">
<li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
<li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
<li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
<li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
</ul>
3カラム ul li内部デザイン
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
<ul class="c-threeColumns"> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li> </ul>
4カラム ul li(タブレット以下3カラム)
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
<ul class="c-fourColumns"> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li> </ul>
5カラム ul li(タブレット以下4カラム)
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
<ul class="c-fiveColumns"> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146"></li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li> </ul>
6カラム ul li(タブレット以下4カラム)
画像キャプション
画像キャプション
画像キャプション
画像キャプション

画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
画像キャプション
<ul class="c-sixColumns"> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119"></li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119"></li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> <li><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li> </ul>
2カラム box内部デザイン
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
<div class="c-flex-container-two"> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> </div>
3カラム box内部デザイン
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
<div class="c-flex-container-three"> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> </div>
4カラム box
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
内部ページ

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。
<div class="c-flex-container-four"> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>「 <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> <section> <h3>内部ページ</h3> <div><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div> <p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p> </section> </div>
親ページ ul li
<ul class="c-page-parent">
<li><a href="#">選ばれる理由</a></li>
<li><a href="#">お客様の声</a></li>
<li><a href="#">サービス一覧</a></li>
<li><a href="#">施工事例</a></li>
<li><a href="#">施工までの流れ</a></li>
</ul>
カード1

タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
<div class="c-card1-container">
<section>
<figure><img src="https://www.s-contigo.com/images/img/regulation/deputy_02.webp" width="800" height="533" alt="画像"></figure>
<h3>タイトルタイトル</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
<section>
<figure><img src="https://www.s-contigo.com/images/img/regulation/deputy_02.webp" width="800" height="533" alt="画像"></figure>
<h3>タイトルタイトル</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
<section>
<figure><img src="https://www.s-contigo.com/images/img/regulation/deputy_02.webp" width="800" height="533" alt="画像"></figure>
<h3>タイトルタイトル</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
</div>
カード2
タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
<div class="c-card2-container">
<section data-case-prefix="scene">
<h3>タイトルタイトル</h3>
<p data-label="悩み">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
<p data-label="解決策">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
<section data-case-prefix="scene">
<h3>タイトルタイトル</h3>
<p data-label="悩み">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
<p data-label="解決策">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
<section data-case-prefix="scene">
<h3>タイトルタイトル</h3>
<p data-label="悩み">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
<p data-label="解決策">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
</div>
カード3
タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
タイトルタイトル
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
<div class="c-card3-container">
<section>
<h3>タイトルタイトル</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
<section>
<h3>タイトルタイトル</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
<section>
<h3>タイトルタイトル</h3>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</section>
</div>