デザイン規定

サイト運用に使用できるスタイルをまとめたページです。統一化を図り、一貫性を保つための情報です。また、内部デザインのアイコンが付いている箇所は、このサイト専用にデザインを調整してあるパーツです。アイコンがなパーツはCSSを調整して必要に応じてリデザインしてください。

見出し一覧(h2見出し)

h2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキスト。

<h2>見出し一覧(h2見出し)</h2>
<p>h2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキスト。</p>

h3見出し

1行あたり36文字以内(width:640pxくらい)で改行が望ましい。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。

<h3>h3見出し</h3>
<p>1行あたり36文字以内(width:640pxくらい)で改行が望ましい。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。<a href="/">ここに本文テキストが入ります。</a>ここに本文テキストが入ります。<a href="/">ここに本文テキストが入ります。</a>ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。</p>

h4見出し

h4-p テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h4>h4見出し</h4>
<p>h4-p テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
h5見出し

h5-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h5>h5見出し</h5>
<p>h5-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
h6見出し

h6-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h6>h6見出し</h6>
<p>h6-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

テキスト

リード文内部デザイン

これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。

<p class="lead">これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。</p>

ulリスト内部デザイン

  • リストリストリスト
  • リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。
  • リスト
  • リスト
  • リスト
  • リスト
<ul class="listing">
        <li>リストリストリスト</li>
        <li>リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
    </ul>

olリスト

  1. リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。
  2. リスト
  3. リストリストリストリストリストリスト
  4. リストリストリストリストリストリスト
  5. リスト
  6. リスト
<ol class="listing">
    <li>リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。</li>
    <li>リスト</li>
    <li>リストリストリストリストリストリスト</li>
    <li>リストリストリストリストリストリスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ol>

注意書き

※注釈:14px Regular
注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。
注釈のテキストが入ります。注釈のテキストが入ります。

<p class="annotation">※注釈:14px Regular<br>注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。<br>注釈のテキストが入ります。注釈のテキストが入ります。</p>

strong強調

私たちが本当に強調をしたいのは、我々の信念です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。

<p>私たちが本当に<strong>強調をしたいのは、我々の信念</strong>です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。</p>

markハイライト

私たちが本当に強調をしたいのは、我々の信念です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。

<p>私たちが本当に<mark>強調をしたいのは、我々の信念</mark>です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。</p>

LINE風 対話

お客様 お客様

3月15日に注文したAG-0473の納期を教えていただけますか?宜しくお願いします。

弊社 弊社

おはようございます、かしこまりました。

全て商品が揃い次第発送させていただきます。もうしばらくお待ち下さい。

概算で4月下旬を予定していますが、工場の混雑状況や税関の都合により遅延が発生する場合があります。遅延が発生する場合は事前にお知らせいたします。よろしくお願いします。

お客様 お客様

別途で注文をした、以下の商品の在庫状況を教えていただけますか?

写真の説明文

弊社 弊社

後ほどメールにて在庫表を送らせていただきますが、弊社のオンラインサイトからもご覧になれます。

<div class="chat left">
    <p class="img">
        <img src="/images/common/logo.svg" alt="お客様" width="60" height="60">
        <span>お客様</span>
    </p>
    <div class="txt">
        <p>3月15日に注文したAG-0473の納期を教えていただけますか?宜しくお願いします。</p>
    </div>
</div>

<div class="chat right">
    <p class="img">
        <img src="https://www.s-contigo.com/images/img/regulation/contigo.svg" alt="弊社" width="60" height="60">
        <span>弊社</span>
    </p>
    <div class="txt">
        <p>おはようございます、かしこまりました。</p>
        <p>全て商品が揃い次第発送させていただきます。もうしばらくお待ち下さい。</p>
        <p>概算で4月下旬を予定していますが、工場の混雑状況や税関の都合により遅延が発生する場合があります。遅延が発生する場合は事前にお知らせいたします。よろしくお願いします。</p>
    </div>
</div>

<div class="chat left">
    <p class="img">
        <img src="/images/common/logo.svg" alt="お客様" width="60" height="60">
        <span>お客様</span>
    </p>
    <div class="txt">
        <p>別途で注文をした、以下の商品の在庫状況を教えていただけますか?</p>
        <p><img src="https://www.s-contigo.com/images/img/regulation/dum_01.jpg" alt="写真の説明文" width="400" height="300"></p>
    </div>
</div>

<div class="chat right">
    <p class="img">
        <img src="https://www.s-contigo.com/images/img/regulation/contigo.svg" alt="弊社" width="60" height="60">
        <span>弊社</span>
    </p>
    <div class="txt">
        <p>後ほどメールにて在庫表を送らせていただきますが、弊社の<a href="https://www.agrina-s.com/online" target="_blank">オンラインサイト</a>からもご覧になれます。</p>
    </div>
</div>

FAQ

質問1です。質問を記載します。質問1です。質問を記載します。
解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。
質問2です。質問を記載します。質問2です。質問を記載します。写真1
解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。
質問3です。質問を記載します。質問3です。質問を記載します。
解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。
質問4です。質問を記載します。質問4です。質問を記載します。質問を記載します。質問を記載します。
解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。写真
質問5です。質問を記載します。質問5です。質問を記載します。
解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。
<dl class="faq">
    <dt><span>質問1です。質問を記載します。質問1です。質問を記載します。</span></dt>
    <dd><span>解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。</span></dd>
    <dt><span>質問2です。質問を記載します。質問2です。質問を記載します。<img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="写真1"></span></dt>
    <dd><span>解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。</span></dd>
    <dt><span>質問3です。質問を記載します。質問3です。質問を記載します。</span></dt>
    <dd><span>解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。</span></dd>
    <dt><span>質問4です。質問を記載します。質問4です。質問を記載します。質問を記載します。質問を記載します。</span></dt>
    <dd><span>解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。<img src="https://www.s-contigo.com/images/img/regulation/dum_01.jpg" alt="写真"  width="600" height="450"></span></dd>
    <dt><span>質問5です。質問を記載します。質問5です。質問を記載します。</span></dt>
    <dd><span>解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。</span></dd>
</dl>

blockquote 引用

引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。

引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。

引用元:株式会社AAA

<blockquote>
    <p>引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。 </p>
    <p>引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。 </p>
    <p class="cite">引用元:<cite>株式会社AAA</cite></p>
</blockquote>

準備中・中央寄せ

準備中
<div class="const">準備中</div>

コンセプト内部デザイン

CONCEPT

こだわりに
こだわりぬいて

私たちのミッションは、お客様のビジネスに
最適なオンラインプレゼンスを提供すること。

私たちはユーザビリティに優れた
ホームページを制作し、魅力的なデザインと
使いやすいナビゲーションを組み合わせています。

また、最新のウェブ技術とSEO対策を駆使し、
検索エンジンでの上位表示を目指します。

お客様のニーズに合わせた
カスタマイズと迅速なサポートを提供し、
ビジネスの成長をサポートします。

信頼性と専門性を大切にし、
お客様の成功を共に追求する
パートナーとしてお手伝いいたします。

CONCEPT CHANGE HERE
<div class="concept">
<div class="concept-left">
<p class="tit">CONCEPT</p>
<p class="catchcopy">こだわりに<br>こだわりぬいて</p>
</div>
<div class="concept-right">
<p>私たちのミッションは、お客様のビジネスに<br>最適なオンラインプレゼンスを提供すること。</p>
<p>私たちはユーザビリティに優れた<br>ホームページを制作し、魅力的なデザインと<br>使いやすいナビゲーションを組み合わせています。</p>
<p>また、最新のウェブ技術とSEO対策を駆使し、<br>検索エンジンでの上位表示を目指します。</p>
<p>お客様のニーズに合わせた<br>カスタマイズと迅速なサポートを提供し、<br>ビジネスの成長をサポートします。</p>
<p>信頼性と専門性を大切にし、<br>お客様の成功を共に追求する<br>パートナーとしてお手伝いいたします。</p>
</div>
<div class="concept-bg">CONCEPT CHANGE HERE</div>
</div>

Before / After

  • BEFORE切り抜き前の画像切り抜き前の画像
  • AFTER切り抜き後の画像AFTER切り抜き後の画像(画像をクリックで拡大)
<ul class="before-after">
    <li><img src="https://www.s-contigo.com/images/img/regulation/img-before.jpg" width="1280" height="1820" alt="BEFORE切り抜き前の画像">切り抜き前の画像</li>
    <li><a href="https://www.s-contigo.com/images/img/regulation/img-after.jpg" rel="cbox"><img src="https://www.s-contigo.com/images/img/regulation/img-after.jpg" width="1280" height="1820" alt="AFTER切り抜き後の画像"></a>AFTER切り抜き後の画像(画像をクリックで拡大)</li>
</ul>

横並びカラム

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>

表・チャート

data

シャツ
100 110 120 130 140 150 160 S M L XL 3L 4L 5L
着丈 35.5 39 42.5 45 48.5 52 55 57 59 61 63 66 68 69.5
身幅 31 33.5 36 38.5 41 43.5 46 48 50 52 53.5 55 56.5 58
半袖丈 22.5 24 25.5 27 28.5 30 31.5 33 34 35.5 37 39 40.5 42
長袖丈 48 52 55 59 63 67 71 74 76 78 80 81.5 83 84.5
<div class="data">
    <table>
        <caption>シャツ</caption>
        <thead>
            <tr>
                <th></th>
                <th>100</th>
                <th>110</th>
                <th>120</th>
                <th>130</th>
                <th>140</th>
                <th>150</th>
                <th>160</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>3L</th>
                <th>4L</th>
                <th>5L</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>着丈</th>
                <td>35.5</td>
                <td>39</td>
                <td>42.5</td>
                <td>45</td>
                <td>48.5</td>
                <td>52</td>
                <td>55</td>
                <td>57</td>
                <td>59</td>
                <td>61</td>
                <td>63</td>
                <td>66</td>
                <td>68</td>
                <td>69.5</td>
            </tr>
            <tr>
                <th>身幅</th>
                <td>31</td>
                <td>33.5</td>
                <td>36</td>
                <td>38.5</td>
                <td>41</td>
                <td>43.5</td>
                <td>46</td>
                <td>48</td>
                <td>50</td>
                <td>52</td>
                <td>53.5</td>
                <td>55</td>
                <td>56.5</td>
                <td>58</td>
            </tr>
            <tr>
                <th>半袖丈</th>
                <td>22.5</td>
                <td>24</td>
                <td>25.5</td>
                <td>27</td>
                <td>28.5</td>
                <td>30</td>
                <td>31.5</td>
                <td>33</td>
                <td>34</td>
                <td>35.5</td>
                <td>37</td>
                <td>39</td>
                <td>40.5</td>
                <td>42</td>
            </tr>
            <tr>
                <th>長袖丈</th>
                <td>48</td>
                <td>52</td>
                <td>55</td>
                <td>59</td>
                <td>63</td>
                <td>67</td>
                <td>71</td>
                <td>74</td>
                <td>76</td>
                <td>78</td>
                <td>80</td>
                <td>81.5</td>
                <td>83</td>
                <td>84.5</td>
            </tr>
        </tbody>
    </table>
</div>

chart

関東の県庁所在地
都道府県 市区町村
東京都 新宿区
埼玉県 さいたま市
神奈川県 横浜市
<div class="chart">
<table>
    <caption>関東の県庁所在地</caption>
    <thead>
        <tr>
            <th>都道府県</th>
            <th>市区町村</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>東京都</th>
            <td>新宿区</td>
        </tr>
        <tr>
            <th>埼玉県</th>
            <td>さいたま市</td>
        </tr>
        <tr>
            <th>神奈川県</th>
            <td>横浜市</td>
        </tr>
    </tbody>
</table>
</div>

scrollhint

シャツサイズ
100 110 120 130 140 150 160 S M L XL 3L 4L 5L
着丈 35.5 39 42.5 45 48.5 52 55 57 59 61 63 66 68 69.5
身幅 31 33.5 36 38.5 41 43.5 46 48 50 52 53.5 55 56.5 58
半袖丈 22.5 24 25.5 27 28.5 30 31.5 33 34 35.5 37 39 40.5 42
長袖丈 48 52 55 59 63 67 71 74 76 78 80 81.5 83 84.5
<div class="scroll">
    <table>
    <caption>シャツサイズ</caption>
        <thead>
            <tr>
                <th></th>
                <th>100</th>
                <th>110</th>
                <th>120</th>
                <th>130</th>
                <th>140</th>
                <th>150</th>
                <th>160</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>3L</th>
                <th>4L</th>
                <th>5L</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>着丈</th>
                <td>35.5</td>
                <td>39</td>
                <td>42.5</td>
                <td>45</td>
                <td>48.5</td>
                <td>52</td>
                <td>55</td>
                <td>57</td>
                <td>59</td>
                <td>61</td>
                <td>63</td>
                <td>66</td>
                <td>68</td>
                <td>69.5</td>
            </tr>
            <tr>
                <th>身幅</th>
                <td>31</td>
                <td>33.5</td>
                <td>36</td>
                <td>38.5</td>
                <td>41</td>
                <td>43.5</td>
                <td>46</td>
                <td>48</td>
                <td>50</td>
                <td>52</td>
                <td>53.5</td>
                <td>55</td>
                <td>56.5</td>
                <td>58</td>
            </tr>
            <tr>
                <th>半袖丈</th>
                <td>22.5</td>
                <td>24</td>
                <td>25.5</td>
                <td>27</td>
                <td>28.5</td>
                <td>30</td>
                <td>31.5</td>
                <td>33</td>
                <td>34</td>
                <td>35.5</td>
                <td>37</td>
                <td>39</td>
                <td>40.5</td>
                <td>42</td>
            </tr>
            <tr>
                <th>長袖丈</th>
                <td>48</td>
                <td>52</td>
                <td>55</td>
                <td>59</td>
                <td>63</td>
                <td>67</td>
                <td>71</td>
                <td>74</td>
                <td>76</td>
                <td>78</td>
                <td>80</td>
                <td>81.5</td>
                <td>83</td>
                <td>84.5</td>
            </tr>
        </tbody>
    </table>
</div>

大きな表組

工事名称 単価 合計 説明
仮設足場 800~1,200円 約12.7万~19万円 足場を組むことで職人が安全に作業できるようになります。姿勢も安定するため丁寧な塗装が可能となります。
飛散防止シート 200~350円 約3.2万~5.5万円 隣家や駐車場の車、自転車、庭木などに塗料が飛散しないようメッシュシートで養生します。
高圧洗浄 250~350円 約4万~5.5万円 塗装前に住宅全体の汚れを落とします。劣化が著しい外壁の場合、はじめに高圧洗浄をしてしまうと、雨漏りの原因になるため、まずはシーリング工事を行い、続いて高圧洗浄となります。
下地処理 150~500円 約1.6万~7.9万円 ひび割れ(クラック)や穴などがあった場合、塗装する前に修復します。ケレン作業も行います。
養生 300~500円 約4.7万~7.9万円 窓や雨戸など、塗装しない部分をビニールで覆ったり、隣家に塗料が飛ばないよう養生シートで囲います。
外壁下塗り 800~1,200円 約12.7万~19万円 下地調整のために行う塗装作業で、シーラーとも呼ばれます。下塗りすることでその後の中塗り、上塗りが美しく仕上がります。下塗りによって、外壁塗装の遮熱性、防サビ性、防藻・防カビ性などの機能が向上します。
外壁中塗り 850~2,700円 約13.5万~42.8万円 凹凸のない平らで滑らかな下地に整えるための塗装作業です。下塗りした外壁が完全に乾いた後に行われますが、乾燥までに要する時間は塗料によって異なります。季節によっても乾燥までの時間は変化します。
外壁上塗り 850~2,700円 約13.5万~42.8万円 塗装の仕上げ工程で、ムラや塗り残しのない美しい仕上がりになっているかが重要です。上塗りが十分ではなかったり、省略されてしまうと塗料の厚みが不足し、本来期待できる耐用年数よりも早く塗膜が劣化する恐れがあります。
雨樋 1式 約5万~7万円 外壁の付帯物の一つです。雨どいの多くは塩ビ製で、錆びや劣化には耐性があります。ただし、外壁をきれいに塗り替えると、それまではあまり気にならなかった雨樋の色褪せが目立つようになります。外壁と合わせての塗装をおすすめします。
その他付帯物 1式 約10万円 軒天(庇の裏側)や水切りなどの鉄部、破風、雨戸、出窓、銅差、鉄骨階段、換気フード、霧除け、ベランダなど付帯物の塗装です。
シーリング 800~1,500円 約12.7万~23.8万円 つなぎ目から雨水などの侵入を阻止し、雨漏りを防止するため、外壁のボードとボードのつなぎ目(隙間)にシーリング材(コーキング材)を埋めて補修します。その際、古いシーリング材は撤去します。シーリング(コーキング)工事が必要なのは、サイディング外壁、ALC外壁、タイル外壁であり、モルタル外壁はほとんど必要ありません。
<div class="largeT">
    <table>
        <thead>
            <tr>
                <th>工事名称</th>
                <th>単価</th>
                <th>合計</th>
                <th>説明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>仮設足場</th>
                <td data-label="単価">800~1,200円</td>
                <td data-label="合計">約12.7万~19万円</td>
                <td data-label="説明">足場を組むことで職人が安全に作業できるようになります。姿勢も安定するため丁寧な塗装が可能となります。</td>
            </tr>
            <tr>
                <th>飛散防止シート</th>
                <td data-label="単価">200~350円</td>
                <td data-label="合計">約3.2万~5.5万円</td>
                <td data-label="説明">隣家や駐車場の車、自転車、庭木などに塗料が飛散しないようメッシュシートで養生します。</td>
            </tr>
            <tr>
                <th>高圧洗浄</th>
                <td data-label="単価">250~350円</td>
                <td data-label="合計">約4万~5.5万円</td>
                <td data-label="説明">塗装前に住宅全体の汚れを落とします。劣化が著しい外壁の場合、はじめに高圧洗浄をしてしまうと、雨漏りの原因になるため、まずはシーリング工事を行い、続いて高圧洗浄となります。</td>
            </tr>
            <tr>
                <th>下地処理</th>
                <td data-label="単価">150~500円</td>
                <td data-label="合計">約1.6万~7.9万円</td>
                <td data-label="説明">ひび割れ(クラック)や穴などがあった場合、塗装する前に修復します。ケレン作業も行います。</td>
            </tr>
            <tr>
                <th>養生</th>
                <td data-label="単価">300~500円</td>
                <td data-label="合計">約4.7万~7.9万円</td>
                <td data-label="説明">窓や雨戸など、塗装しない部分をビニールで覆ったり、隣家に塗料が飛ばないよう養生シートで囲います。</td>
            </tr>
            <tr>
                <th>外壁下塗り</th>
                <td data-label="単価">800~1,200円</td>
                <td data-label="合計" nowrap="nowrap">約12.7万~19万円</td>
                <td data-label="説明">下地調整のために行う塗装作業で、シーラーとも呼ばれます。下塗りすることでその後の中塗り、上塗りが美しく仕上がります。下塗りによって、外壁塗装の遮熱性、防サビ性、防藻・防カビ性などの機能が向上します。</td>
            </tr>
            <tr>
                <th>外壁中塗り</th>
                <td data-label="単価" nowrap="nowrap">850~2,700円</td>
                <td data-label="合計">約13.5万~42.8万円</td>
                <td data-label="説明">凹凸のない平らで滑らかな下地に整えるための塗装作業です。下塗りした外壁が完全に乾いた後に行われますが、乾燥までに要する時間は塗料によって異なります。季節によっても乾燥までの時間は変化します。</td>
            </tr>
           <tr>
                <th>外壁上塗り</th>
               	<td data-label="単価">850~2,700円</td>
                <td data-label="合計">約13.5万~42.8万円</td>
                <td data-label="説明">塗装の仕上げ工程で、ムラや塗り残しのない美しい仕上がりになっているかが重要です。上塗りが十分ではなかったり、省略されてしまうと塗料の厚みが不足し、本来期待できる耐用年数よりも早く塗膜が劣化する恐れがあります。</td>
            </tr>
            <tr>
                <th>雨樋</th>
                <td data-label="単価">1式</td>
                <td data-label="合計">約5万~7万円</td>
                <td data-label="説明">外壁の付帯物の一つです。雨どいの多くは塩ビ製で、錆びや劣化には耐性があります。ただし、外壁をきれいに塗り替えると、それまではあまり気にならなかった雨樋の色褪せが目立つようになります。外壁と合わせての塗装をおすすめします。</td>
            </tr>
            <tr>
                <th>その他付帯物</th>
                <td data-label="単価">1式</td>
                <td data-label="合計">約10万円</td>
                <td data-label="説明">軒天(庇の裏側)や水切りなどの鉄部、破風、雨戸、出窓、銅差、鉄骨階段、換気フード、霧除け、ベランダなど付帯物の塗装です。</td>
            </tr>
            <tr>
                <th>シーリング</th>
                <td data-label="単価">800~1,500円</td>
                <td data-label="合計" nowrap="nowrap">約12.7万~23.8万円</td>
                <td data-label="説明">つなぎ目から雨水などの侵入を阻止し、雨漏りを防止するため、外壁のボードとボードのつなぎ目(隙間)にシーリング材(コーキング材)を埋めて補修します。その際、古いシーリング材は撤去します。シーリング(コーキング)工事が必要なのは、サイディング外壁、ALC外壁、タイル外壁であり、モルタル外壁はほとんど必要ありません。</td>
            </tr>
        </tbody>
    </table>
</div>

dl dt dd内部デザイン

概算納品予定日
6月16日
新規最低オーダー数
5着~
追加最低オーダー数
1着~
素材
ポリエステル100%
<dl class="table">
<dt>概算納品予定日</dt>
<dd>6月16日</dd>
<dt>新規最低オーダー数</dt>
<dd>5着~</dd>
<dt>追加最低オーダー数</dt>
<dd>1着~</dd>
<dt>素材</dt>
<dd>ポリエステル100%</dd>
</dl>

フロー ol li

  1. お問合せ
  2. ヒアリング
  3. プラン提案
  4. 制作スタート
  5. リリース
  6. サポート
<div class="flow-ol-container">
<ol>
<li>お問合せ</li>
<li>ヒアリング</li>
<li>プラン提案</li>
<li>制作スタート</li>
<li>リリース</li>
<li>サポート</li>
</ol>
</div>

フロー h2 h3

お届けまでの流れ

ミーティング

当社営業スタッフが直接ご要望をうかがいます。今抱えられているお悩みや改善したい点など何でもご相談ください。

ミーティング

デザイン提案

お客様の声をもとに企画しご提案します。生地のサンプルや完成イメージ図などを用いて、理想の1着に向けて進めていきます。

デザイン提案

サンプル制作

決定したデザイン案にてサンプルをお作りします。実際に着用いただき、シルエットや仕様などをチェックいただけます。

サンプル制作

生産

最終仕様が決定したらお客様のサイズと必要な数量を確認。生地などの材料を手配し、製造にとりかかります。

生産

納品

検品後、ご指定の納品先に出荷します。納品後の追加ご注文や仕様変更などアフター・フォローについてもおまかせください。

納品
<section class="flow-section-container">
	<h2>お届けまでの流れ</h2>
	<section>
		<div>
			<h3>ミーティング</h3>
			<p>当社営業スタッフが直接ご要望をうかがいます。今抱えられているお悩みや改善したい点など何でもご相談ください。</p>
		</div>
		<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_04.jpg" width="300" height="300" alt="ミーティング"></div>
	</section>
	<section>
		<div>
			<h3>デザイン提案</h3>
			<p>お客様の声をもとに企画しご提案します。生地のサンプルや完成イメージ図などを用いて、理想の1着に向けて進めていきます。</p>
		</div>
		<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_04.jpg" width="300" height="300" alt="デザイン提案"></div>
	</section>
	<section>
		<div>
			<h3>サンプル制作</h3>
			<p>決定したデザイン案にてサンプルをお作りします。実際に着用いただき、シルエットや仕様などをチェックいただけます。</p>
		</div>
		<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_04.jpg" width="300" height="300" alt="サンプル制作"></div>
	</section>
	<section>
		<div>
			<h3>生産</h3>
			<p>最終仕様が決定したらお客様のサイズと必要な数量を確認。生地などの材料を手配し、製造にとりかかります。</p>
		</div>
		<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_04.jpg" width="300" height="300" alt="生産"></div>
	</section>
	<section>
		<div>
			<h3>納品</h3>
			<p>検品後、ご指定の納品先に出荷します。納品後の追加ご注文や仕様変更などアフター・フォローについてもおまかせください。</p>
		</div>
		<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_04.jpg" width="300" height="300" alt="納品"></div>
	</section>
</section>

メディア

youtube動画

変更箇所は、embed/5kah8d0256I
embed/ 以降の数字の部分のみ。

<div class="iframe-content"><iframe src="https://www.youtube.com/embed/5kah8d0256I" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
<p>変更箇所は、<strong>embed/5kah8d0256I</strong><br>
embed/ 以降の数字の部分のみ。</p>

画像横幅100%

<p class="page-header"><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" alt="デザイン規定" width="1280" height="300"></p>

画像左寄せ内部デザイン

この画像の説明文

画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像のサイズはCSSによって制御されています。変更が必要な場合は、CSSを変更する必要があります。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。

<div class="leftImg clearfix">
<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="この画像の説明文" width="371" height="278"></div>
<p>画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像のサイズはCSSによって制御されています。変更が必要な場合は、CSSを変更する必要があります。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。</p>
</div>

画像右寄せ内部デザイン

この画像の説明文

画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。

<div class="rightImg clearfix">
<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="この画像の説明文" width="371" height="278"></div>
<p>画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。</p>
</div>

iframe (map)

<div class="iframe-content"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13703.561911378798!2d139.52924467488197!3d35.85856060352935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c2d96b2c6c47%3A0x94a32359b4e28959!2z44CSMzU0LTAwMjQg5Z-8546J55yM5a-M5aOr6KaL5biC6ba054Cs5p2x77yS5LiB55uu77yR77yU4oiS77yT!5e0!3m2!1sja!2sjp!4v1619651243751!5m2!1sja!2sjp" width="600" height="450"  loading="lazy"></iframe></div>

video

<video src="https://www.s-contigo.com/images/img/regulation/movie.mp4" autoplay="" muted="" loop="" controls=""></video>

スクリーンショット(影付き画像)

スクリーンショット
<div class="screenshot"><img src="https://www.s-contigo.com/images/img/regulation/dum_05.jpg" alt="スクリーンショット"  width="1280" height="550"></div>

ブレイクポイント

大きな画面
横幅1,280px以上 / style.css
一般的なPC画面
横幅1,279px以下 / pc.css
タブレット
横幅1,023px以下 / tablet.css
スマートフォン
横幅599px以下 / smart.css

カラー規定