カード(横並びカラム)

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内部デザイン

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

<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内部デザイン

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

<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

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

<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>
コピー完了

お客様の声1

お客様の声2

お客様の声3

スタッフ紹介1

スタッフ紹介2

スタッフ紹介3