PR

特定商取引法に基づく表示をHTML・CSSで書いてみた。tableタグ・listタグ・dlタグ各タイプで作成。【サンプルコードあり】

HTML CSS
2023.03.12

特定商取引法に基づく表示のページどうしてますか？
HTMLで書いたり、画像にしてアップしてる場合もみかけます。

今回HTMLでコーディングしてみました。
完成はこんな感じです。
サンプルコードもこの記事の中で掲載しております。

 

今回HTMLでコーディングしようと思ったのですが、
コーディングするにしても、2パターンでコーディングできるなあ
って感じです。
tableタグとlistタグで作成する方法どちらか悩みました。
上記の完成図はliatタグで作成分です。

今回両方のパターンでコーディングしてるので、両方の
コードサンプル記載しております。
よかったら参考にしてください。
コードはあくまでサンプルであり、実際に必要な情報に合わせて
適宜変更してください。

 

listタグで作成した場合

縦に長いリスト形式の場合、スクロールしても情報と項目の対応がしやすい。
スマートフォンなどの小さな画面でも、縦にスクロールできるため表示がしやすい。
項目と説明文が改行されているので、情報が多い場合にはスペースをとりやすくなる。

完成図はこちら

書いたコード

CSSリセットで使用

@charset "utf-8";

*{
	box-sizing: border-box;
}

html,body{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
}

h1,h2,h3,h4,h5,h6,p{
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: 400;
}

li{
	list-style: none;
}

section{
	padding: 110px 0;
}

.contents-wrapper{
	width: calc(100% - 100px);
	max-width: 1500px;
	margin: 0 auto;
}

@media screen and (max-width:767px) {
section{
    padding: 30px 0;
}

.contents-wrapper{
    width: calc(100% - 60px);
}

html,body{
	font-size: 14px;
}

}

 

 

HTML

  <section>
    <div class="contents-wrapper">
      <div id="specified-commercial" class="identification-wrap">
        <h2 class="identification-title">特定商取引法に基づく表記</h2>
        <ul>
          <li class="list-item">
            <div class="t-title">販売者名</div>
            <div class="t-content">氏名</div>
          </li>
          <li class="list-item">
            <div class="t-title">所在地</div>
            <div class="t-content">〒123-456<br>広島県
            </div>
          </li>
          <li class="list-item">
            <div class="t-title">電話番号</div>
            <div class="t-content">080-4477-8691<br>（受付時間 月曜日～金曜日<br>午前10時～午後5時）</div>
          </li>
          <li class="list-item">
            <div class="t-title">メールアドレス</div>
            <div class="t-content"><a href="mailto:sample@inopro.jpn.org">sample@inopro.jpn.org</a></div>
          </li>
          <li class="list-item">
            <div class="t-title">支払い方法</div>
            <div class="t-content">銀行振込</div>
          </li>
          <li class="list-item">
            <div class="t-title">商品代金以外の必要金額</div>
            <div class="t-content">振込の際の振込手数料</div>
          </li>
          <li class="list-item">
            <div class="t-title">返品・キャンセルについて</div>
            <div class="t-content">商品の性質上、納品後のキャンセル・返金は<br class="mc-br">承っておりません。ご了承ください。</div>
          </li>
          <li class="list-item">
            <div class="t-title">商品・表現に関する注意事項</div>
            <div class="t-content">本製品に記された表現・再現性には個人差あり。<br>
              利益や効果を保証したものではございません。</div>
          </li>
          <li class="list-item">
            <div class="t-title">個人情報の取り扱いについて</div>
            <div class="t-content">お客様のプライバシーを第一に考え運営しております。お客様の個人情報は、厳正な管理の下で安全に蓄積・保管しております。当該個人情報は、お客様の同意を得た場合、法律によって要求された場合、あるいは当社の権利や財産を保護する必要が生じた場合を除き、第三者に提供する事はありません。</div>
          </li>
        </ul>
      </div>
    </div>
  </section>

 

CSS

.identification-wrap{
	width: 80%;
	margin: 100px auto;
}

.identification-title{
	font-size: 2rem;
	text-align: center;
	padding: 10px;
}

.list-item{
	display: flex;
	border: 1px solid #000;
}

.t-title{
	width: 30%;
	padding: 20px 10px;
	border-right: 1px solid #000;
	background-color: rgb(233, 247, 232);
}

.t-content{
	width: 70%;
	padding: 20px 10px;
}

.mc-br{
	display: none;
}


@media screen and (max-width: 600px){
		.identification-title{
		font-size: 1.3rem;
		font-weight: 700;
	}

	.list-item{
		display: block;
	}

	.t-title,
	.t-content{
		width: 100%;
		text-align: center;
	}

	.t-content{
		border-top: 1px solid #000;
	}

	.mc-br{
		display: block;
	}
}

 

 

tableタグで作成した場合

表形式なので、情報を整理しやすい。
行列があるので、項目とその説明文を並列表示することができる。
似たような情報を多数記載する場合に適している。
縦にスクロールが必要な場合、テーブル全体を表示するために
画面上部の項目との対応が見えにくい場合がある。
スマートフォンなどの小さな画面ではレイアウトが崩れる場合がある。

完成図はこちら

書いたコード

HTML

  <sectione>
    <div class="contents-wrapper">
      <div id="specified-commercial" class="identification-wrap">
        <h2 class="identification-title">特定商取引法に基づく表記</h2>
        <table class="tb01">
          <tr>
            <th class="t-title">販売者名</th>
            <td class="t-content">氏名</td>
          </tr>
          <tr>
            <th class="t-title">所在地</th>
            <td class="t-content">〒123-456<br>広島県
            </td>
          </tr>
          <tr>
            <th class="t-title">電話番号</th>
            <td class="t-content">080-4477-8691<br>（受付時間 月曜日～金曜日<br>午前10時～午後5時）</td>
          </tr>
          <tr>
            <th class="t-title">メールアドレス</th>
            <td class="t-content"><a href="mailto:sample@inopro.jpn.org">sample@inopro.jpn.org</a></td>
          </tr>
          <tr>
            <th class="t-title">支払い方法</th>
            <td class="t-content">銀行振込</td>
          </tr>
          <tr>
            <th class="t-title">商品代金以外の必要金額</th>
            <td class="t-content">振込の際の振込手数料</td>
          </tr>
          <tr>
            <th class="t-title">返品・キャンセルについて</th>
            <td class="t-content">商品の性質上、納品後のキャンセル・返金は<br class="mc-br">承っておりません。ご了承ください。</td>
          </tr>
          <tr>
            <th class="t-title">商品・表現に関する注意事項</th>
            <td class="t-content">本製品に記された表現・再現性には個人差あり。<br>
              利益や効果を保証したものではございません。</td>
          </tr>
          <tr>
            <th class="t-title">個人情報の取り扱いについて</th>
            <td class="t-content">お客様のプライバシーを第一に考え運営しております。お客様の個人情報は、厳正な管理の下で安全に蓄積・保管しております。当該個人情報は、お客様の同意を得た場合、法律によって要求された場合、あるいは当社の権利や財産を保護する必要が生じた場合を除き、第三者に提供する事はありません。</td>
          </tr>
        </table>
      </div>
    </div>
  </sectione>

 

CSS

.identification-wrap{
	width: 80%;
	margin: 100px auto;
}

.identification-title{
	font-size: 2rem;
	text-align: center;
	padding: 10px;
}

.tb01{
	margin-top: 30px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-collapse: collapse;
}

.tb01 .t-title{
	width: 30%;
	text-align: left;
	padding: 20px 10px;
	background-color: rgb(233, 247, 232);
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

.tb01 .t-content{
	width: 70%;
	padding: 20px 10px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

.t-content-small:first-child{
	font-size: 0.9rem;
	margin-top: 10px;
}

.mc-br{
	display: none;
}


@media screen and (max-width: 600px){
		.identification-title{
		font-size: 1.3rem;
		font-weight: 700;
	}

	.tb01 .t-title,
	.tb01 .t-content{
		display: block;
		width: 100%;
		text-align: center;
	}

	.mc-br{
		display: block;
	}
}

 

 

今回２パターン書きてみたが、結果的にどちらでやっても
大差はないが、listタグで行った方がコードの量は少なく
書きやすかった感じです。

追加でdlタグで作成するパターンあったのでそれもやってみました。

dlタグで作成した場合

装飾がちょっと難しい印象でした。

完成図

書いたコード

HTML

  <section>
    <div class="contents-wrapper">
      <div id="specified-commercial" class="identification-wrap">
        <h2 class="identification-title">特定商取引法に基づく表記</h2>
      <dl class="dl01">
        <dt class="t-title">販売者名</dt>
        <dd class="t-content">氏名</dd>
        <dt class="t-title">所在地</dt>
        <dd class="t-content">〒123-456<br>広島県</dd>
        <dt class="t-title">電話番号</dt>
        <dd class="t-content">080-7766-1234</dd>
        <dt class="t-title">メールアドレス</dt>
        <dd class="t-content">sample@inopro.jpn.org</dd>
        <dt class="t-title">支払い方法</dt>
        <dd class="t-content">銀行振込</dd>
        <dt class="t-title">商品代金以外の必要金額</dt>
        <dd class="t-content">振込の際の振込手数料</dd>
        <dt class="t-title">返品・キャンセルについて</dt>
        <dd class="t-content">商品の性質上、納品後のキャンセル・返金は<br class="mc-br">承っておりません。ご了承ください。</dd>
        <dt class="t-title">商品・表現に関する注意事項</dt>
        <dd class="t-content">本製品に記された表現・再現性には個人差あり。<br>
          利益や効果を保証したものではございません。</dd>
        <dt class="t-title">個人情報の取り扱いについて</dt>
        <dd class="t-content">お客様のプライバシーを第一に考え運営しております。お客様の個人情報は、厳正な管理の下で安全に蓄積・保管しております。当該個人情報は、お客様の同意を得た場合、法律によって要求された場合、あるいは当社の権利や財産を保護する必要が生じた場合を除き、第三者に提供する事はありません。</dd>
      </dl>
      </div>
    </div>
  </section>
  <section>

 

CSS

.identification-wrap{
	width: 80%;
	margin: 100px auto;
}

.identification-title{
	font-size: 2rem;
	text-align: center;
	padding: 10px;
}

.dl01 {
  display: flex;
  flex-wrap: wrap;
	margin: 20px auto;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}

.dl01 .t-title {
  width: 30%;
  padding: 20px 10px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	background-color: rgb(233, 247, 232);
}

.dl01 .t-content {
  width: 70%;
  padding: 20px 10px;
	margin: 0;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}


@media screen and (max-width: 600px){
	.identification-title{
		font-size: 1.3rem;
		font-weight: 700;
	}
	.dl01 .t-title,
	.dl01 .t-content{
		display: block;
		width: 100%;
		text-align: center;
	}

	.mc-br{
		display: block;
	}
}

 

今回サンプルで特定商取引法に基づく表示を書いてますが、
記載内容は、各自の使用状況で変更する必要がございます。
この記事の内容は、あくまでサンプルになります。

通信販売 – 特定商取引法ガイド – 消費者庁

 

スポンサーリンク

ハードな通信をする方におすすめ！専用帯域で高速インターネット！
hi-hoひかりから、ゲームに特化した回線「hi-hoひかりwith games」が新登場。
ラグ・遅延を抑えて勝利を掴め！

hi-ho with games

オンラインゲーム・配信者向けインターネット
月額4,400円～
日本最大級 プロ愛用のゲーム専用インターネット光回線

HTML CSS
特定商取引法に基づく表示
シェアする
inoproをフォローする
inopro

コメント

タイトルとURLをコピーしました