横並びカラム

2カラム ul li内部デザイン

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="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>

3カラム ul li内部デザイン

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="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="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="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="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="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="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="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>