検索

横並びカラム

目次

  1. 2カラム ul li内部デザイン
  2. 3カラム ul li内部デザイン
  3. 4カラム ul li（タブレット以下3カラム）
  4. 5カラム ul li（タブレット以下4カラム）
  5. 6カラム ul li（タブレット以下4カラム）
  6. 2カラム box内部デザイン
  7. 3カラム box内部デザイン
  8. 4カラム box

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>