オンラインティーチャー・ゾノのブログ

» 【特別配信講義】只今、完全在宅で先生開業!オンラインティーチャーを目指すための講座『先生2.0 〜毎日感謝される働き方を作ろう〜』を無料配信中! ← 無料視聴はこちらをクリック!

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

MEMO & TEMPLATE

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

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

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

<!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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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 Pゴシック", "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>
最後までお読みいただき、ありがとうございます。下記の特別無料講座「先生2.0」も、是非チェックしてくださると喜びます🙇‍
講座を受講すると、当ブログで無料配布している「ブログの書き方テンプレート」もプレゼントさせていただきますので、この機会にどうぞ💁‍♂️

【無料開催】人気オンラインティーチャー養成講座

オンラインビジネスの悩みを解決して、効果的に前進するワークショップです。 「オンライン開催」なので、ご自宅からお気軽にご参加いただけます😌

» 今すぐ無料参加(今夜21時〜放送)

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

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

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

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

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

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

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

僕は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師(Teachable特化型)・メディア運営の基礎・ヒット商品企画。『2〜3歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約300名。「オンラインで先生開業を目指すための講座」を無料配信中!朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら

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


特別配信【先生2.0】毎日感謝される働き方を作ろう【無料で受講できる特別講座】

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