スモール起業ビルダー・ZONOのブログ

【保管メモ】販売条件の記述【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>
最後までお読みいただき、ありがとうございます。下記のおしらせコーナーも、是非チェックしてくださると喜びます🙇‍
当ブログで無料配布している「ブログの書き方テンプレート」は受け取っておりますか?無料で資料請求できますので、この機会にぜひどうぞ💁‍♂️

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

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

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

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

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

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

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

僕は、こんな人です

ゾノ@スモール起業ビルダー
当ブログの筆者。日本一わかりやすいブログ教師/高校教師の職を捨て起業失敗→在宅リモートワークで月収7桁達成→V字回復。10代から不登校や非行で根っからの引きこもり人間。現在はオンライン講座『外出せずに学べるパソコン教室』を運営し生徒は累計230名。個人がマイペースに生きるコツを発信しています。朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら

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


人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

人気記事【発表】オンライン学習サイト完備のコミュニティ【01blog College】