スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

デザイン規定

サイト運用に使用できるスタイルをまとめたページです。統一化を図り、一貫性を保つための情報です。

見出し一覧(h2見出し)

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

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

h3見出し

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

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

h4見出し

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

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

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

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

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

	<h6 id="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="お客様">
        <span>お客様</span>
    </p>
    <div class="txt">
        <p>3月15日に注文したAG-0473の納期を教えていただけますか?宜しくお願いします。</p>
    </div>
</div>

<div class="chat right">
    <p class="img">
        <img src="/images/common/contigo.svg" alt="弊社">
        <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="お客様">
        <span>お客様</span>
    </p>
    <div class="txt">
        <p>別途で注文をした、以下の商品の在庫状況を教えていただけますか?</p>
        <p><img src="/images/img/dum_01.jpg" alt="写真の説明文"></p>
    </div>
</div>

<div class="chat right">
    <p class="img">
        <img src="/images/common/contigo.svg" alt="弊社">
        <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="/images/common/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="/images/img/dum_01.jpg" alt="写真"></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>

横並びカラム

2カラム ul li

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="twoColumns">
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
</ul>

3カラム ul li

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="threeColumns">
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
</ul>

4カラム ul li(タブレット以下3カラム)

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="fourColumns">
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
</ul>

5カラム ul li(タブレット以下4カラム)

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="fiveColumns">
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像"></li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
</ul>

6カラム ul li(タブレット以下4カラム)

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像
  • 画像
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="sixColumns">
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像"></li>
<li><img src="/images/common/dum_02.jpg" alt="画像"></li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
<li><img src="/images/common/dum_02.jpg" alt="画像">画像キャプション</li>
</ul>

2カラム box

内部ページ

画像で表すHTML構造<

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

内部ページ

画像で表すHTML構造<

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

内部ページ

画像で表すHTML構造<

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

内部ページ

画像で表すHTML構造<

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

内部ページ

画像で表すHTML構造<

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

内部ページ

画像で表すHTML構造<

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

<div class="flex-container-two">
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.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="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.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="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>「
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>「
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="/files/page_files/regulation/regulation.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>

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>

メディア

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="/files/page_files/regulation/regulation.jpg" alt="デザイン規定"></p>

画像左寄せ

この画像の説明文

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

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

画像右寄せ

この画像の説明文

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

<div class="rightImg clearfix">
<div class="img"><img src="/images/common/dum_02.jpg" alt="この画像の説明文"></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="/images/video/short_ver3.mp4" autoplay="" muted="" loop="" controls=""></video>

ブレイクポイント

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

カラー規定