2020/04/07

【保管メモ】販売条件の記述【HTML＆CSSを１セットで公開】

世界No.1の“本物のオールインワンツール”をゾノ先生と同じように使えるビデオコース「はじめてのコンテンツ作成コース（49,700円相当）」が大人気です。30日間無料の特別招待ページをご用意しているので、下のバナーをタップして詳細をご覧ください！
こちらから確認することができます↓

本記事は、インターネット上で商品を販売する上で必須となる「販売条件の記述ページ」を作るためのHTMLとCSSを１セットで公開したものです。

【保管メモ】販売条件の記述【HTML＆CSSを１セットで公開】

下記が、ソースコードになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>販売法の記述</title>

<style type="text/css">
.text-block {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	color: #000;
	width: 682px;
	margin-top: 20px;
	margin-left: 20px;
}

.pageclose {
	text-align: center;
	clear: left;
	width: 680px;
	height: auto;
	padding-top: 10px;
}

h1 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 22px;
	font-weight: bold;
	padding-left: 10px;
}

.hanbai-left {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	width: 170px;
	clear: none;
	float: left;
	padding-top: 10px;
	padding-right: 6px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.hanbai-right {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	width: 468px;
	clear: none;
	height: auto;
	float: left;
	padding-top: 14px;
	padding-right: 6px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-weight: normal;
	line-height: 18px;
}

#hanbaihou-box {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	color: #000;
	clear: left;
	height: auto;
	width: 680px;
}

.table1 {
	width: 680px;
	border-collapse: collapse;
	border: 1px solid #CCCCCC;
} 

.table1 td {
	border: 1px solid #CCCCCC;
} 

.copyright {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	text-align: center;
}
</style>

</head>

<body>
<div class="text-block">
<h1>特定商取引法に基づく記述</h1>
<div id="hanbaihou-box">
<table border="1" cellpadding="0" cellspacing="0" class="table1" summary="特定商取引法に基づく記述">

<tr>
<td width="176" valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 販売者名</div></td>
<td width="498" valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 住所</div></td>
<td valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 電話番号</div></td>
<td valign="top"><div class="hanbai-right">TEL:◯◯◯◯◯◯◯<br>お問い合わせはメールでお願いします。</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> メールアドレス</div></td>
<td valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 販売URL</div></td>
<td valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 販売価格</div></td>
<td valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> お申し込み方法</div></td>
<td valign="top"><div class="hanbai-right">ご注文フォームよりのお申し込み。</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> お支払い方法</div></td>
<td valign="top"><div class="hanbai-right">クレジットカード<br />
銀行振込(前払い)</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 商品代金以外の<br>必要金額</div></td>
<td valign="top"><div class="hanbai-right">振込みの場合、振込手数料<br />
クレジット分割決済の場合、分割手数料</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 商品の引渡し方法</div></td>
<td valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 商品引渡し時期</div></td>
<td valign="top"><div class="hanbai-right">◯◯◯◯◯◯◯</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 返品・不良品について</div></td>
<td valign="top"><div class="hanbai-right">商品の特性上返品・交換することはできません。</div></td>
</tr>

<tr>
<td valign="top" bgcolor="#FEFFE9"><div class="hanbai-left"> 表現、及び商品に<br>関する注意書き</div></td>
<td valign="top"><div class="hanbai-right">本商品に示された表現や再現性には個人差があり、<br>
必ずしも利益や効果を保証したものではございません。</div></td>
</tr>

</table>
</div>
<div class="pageclose"><a href="#" onclick="window.close(); return false;">閉じる</a></div>
<p class="copyright">Copyright (C) ◯◯◯◯◯◯◯ All rights reserved.</p>
</div>
</body>
</html>

最後までお読みいただき、ありがとうございます。「オールインワンWeb集客サイト完全レポート」というレポートが大人気です。ぜひご覧になってくださると嬉しいです。
こちらから受け取ることができます↓

お知らせ：厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク（テレビ会議システム）の導入をご検討の方は、ぜひどうぞ🙇‍

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】３０分の無料相談会＆体験レッスン（オンライン開催）に初回限定で参加できることです。

どうしても分からなかったり、１人で悩むことがあればご相談ください。

その他、ご相談＆ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01BLOG COLLEGE」に参加はお済みですか？メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

私は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師（Kajabi特化型）・メディア運営の基礎・ヒット商品企画。『２〜３歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中！

チップをいただけると、心から喜びます

無料配信【先生2.0】完全在宅＆好きなことで稼ぎ毎日感謝される働き方【無料】

人気記事【Zoom】会議などの案内メールのテンプレート【セミナー時にも使える】

参考メモ