HTML標準（目的別） HTML標準（ABC順） HTML5（旧仕様） HTML4（旧仕様）
CSSプロパティ（目的別） CSSプロパティ（ABC順） CSS3（目的別） CSS3（ABC順）
HTMLの基本 CSSの基本 チュートリアル ウェブ制作TIPS
JavaScript Canvas HTML5 API 特殊文字
優良デザイン WEBカラー WEB画像 イラスト素材
コラム about サイトマップ
トップページ  > ウェブ制作チュートリアル  > HTMLソース全文
第29章　HTML・CSSソース全文

★HTMLソース全文

HTMLソース全文

広告

完成したサンプルサイトのHTMLファイル（index.html・product.html・profile.html・contact_jisaku.html）のソース全文です。

トップページ（index.html）のHTMLソース全文

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="東海エリア中小企業向け会計システム開発実績ナンバーワン企業。あしたをみつめるウェブサンプル株式会社">
<meta name="keywords" content="会計システム, 中小企業向け,東海エリア,ウェブサンプル株式会社,帳票出力,カスタマイズ,見積無料">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css">
<link rel="stylesheet" media="print" href="print.css">
<link rel="shortcut icon" href="favicon.ico">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>
	
	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_index">
	<img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>新着情報</h2>
		<ul>
			<li><a href="#info0001">新商品のご案内</a></li>
			<li><a href="#info0002">展示会への出展</a></li>
			<li><a href="#info0003">環境への取り組み</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">新商品のご案内</h3>
		<p>
		<img src="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		</p>
		<hr>
	
		<h3 id="info0002">展示会への出展</h3>
		<p>
		<img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		</p>
		<hr>
	
		<h3 id="info0003">環境への取り組み</h3>
		<p>
		<img src="images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		</p>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

製品紹介ページ（product.html）のHTMLソース全文

HTMLソース（product.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css">
<link rel="stylesheet" media="print" href="print.css">
<link rel="shortcut icon" href="favicon.ico">
<title>製品紹介｜ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>
	
	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_subpage">
	<img src="./images/img_product.png" alt="製品紹介">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>製品紹介</h2>
		<ul>
			<li><a href="#info0001">個人向け製品</a></li>
			<li><a href="#info0002">法人向け製品</a></li>
			<li><a href="#info0003">紹介ビデオ</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">個人向け製品</h3>
		<p>
		<img src="images/product0001.png" alt="個人向け製品のイメージ画像" class="infoimg_subpage">
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		</p>
		<hr>

		<h3 id="info0002">法人向け製品</h3>
		<p>
		<img src="images/product0002.png" alt="法人向け製品のイメージ画像" class="infoimg_subpage">
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ、あいうえおかきくけこさしすせそ。
		</p>
		<hr>

		<h3 id="info0003">紹介ビデオ</h3>
		<video controls poster="videos/firstframe.jpg" width="600" height="480">
		<source src="videos/sample.mp4">
		<source src="videos/sample.ogv">
		<source src="videos/sample.webm">
		<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
		</video>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

会社概要ページ（profile.html）のHTMLソース全文

HTMLソース（profile.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css">
<link rel="stylesheet" href="table.css">
<link rel="stylesheet" media="screen and (max-width:800px)" href="table_sp.css">
<link rel="stylesheet" media="print" href="print.css">
<link rel="shortcut icon" href="favicon.ico">
<title>会社概要｜ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>
	
	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_subpage">
	<img src="./images/img_profile.png" alt="会社概要">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>会社概要</h2>
		<ul>
			<li><a href="#info0001">企業情報</a></li>
			<li><a href="#info0002">沿革</a></li>
			<li><a href="#info0003">アクセス</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">企業情報</h3>
		<table class="profile">
		<tr>
		<th>社名</th>
		<td>
		ウェブサンプル株式会社
		</td>
		</tr>
		<tr>
		<th>住所</th>
		<td>
		〒000-0000<br>
		東京都○○区○○○○○○<br>
		○○○○ビル<br>
		Tel：00-0000-0000（代表）　Fax：00-0000-0000
		</td>
		</tr>
		<tr>
		<th>代表者</th>
		<td>
		○○○ ○○
		</td>
		</tr>
		<tr>
		<th>資本金</th>
		<td>
		00,000,000円
		</td>
		</tr>
		<tr>
		<th>事業内容</th>
		<td>
		○○事業<br>
		○○事業<br>
		○○事業<br>
		○○事業
		</td>
		</tr>
		</table>
		<hr>

		<h3 id="info0002">沿革</h3>
		<table class="profile">
		<tr><th>0000年00月</th><td>会社設立</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		<tr><th>0000年00月</th><td>○○事業を開始</td></tr>
		</table>
		<hr>

		<h3 id="info0003">アクセス</h3>
		<p>
		<img src="images/profile0001.png" alt="アクセスのイメージ画像" class="infoimg_subpage">
		</p>
		<div class="remarks">
		<h4>交通機関</h4>
		地下鉄○○線<br>
		○○駅○番出口より徒歩○分
		</div>
		<div class="remarks">
		<h4>所在地</h4>
		〒000-0000<br>
		東京都○○区○○○○○○<br>
		○○○○ビル<br>
		Tel：00-0000-0000
		</div>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

お問合せページ（自作）（contact_jisaku.html）のHTMLソース全文

HTMLソース（contact_jisaku.html）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="table.css">
<link rel="stylesheet" href="form.css">
<title>お問合せ｜ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>
	
	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_subpage">
	<img src="./images/img_contact.png" alt="お問合せ">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>お問合せ</h2>
		<ul>
			<li><a href="#info0001">フォームからのお問合せ</a></li>
			<li><a href="#info0002">メールでのお問合せ</a></li>
			<li><a href="#info0003">お電話でのお問合せ</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">フォームからのお問合せ</h3>
		<form method="post" action="xxxxxxxx.php" id="form1" name="form1">
		<table class="profile">
		<tr>
		<th>お問合せ区分</th>
		<td>
			<label><input type="radio" name="sort" value="1">商品に関するお問合せ</label><br>
			<label><input type="radio" name="sort" value="2">採用に関するお問合せ</label><br>
			<label><input type="radio" name="sort" value="99">その他のお問合せ</label>
		</td>
		</tr>
		<tr>
		<th>メールアドレス</th>
		<td><input type="email" size="30" name="mail" id="mail" required></td>
		</tr>
		<tr>
		<th>お名前</th>
		<td><input type="text" size="20" name="namae" id="namae" required></td>
		</tr>
		<tr>
		<th>お問合せの内容</th>
		<td><textarea name="naiyou" cols="40" rows="5" placeholder="できるだけ詳しくご記入ください。" required></textarea></td>
		</tr>
		</table>
		<input type="hidden" name="q" value="1">
		<p><input type="image" src="images/form_btn.png" alt="送信する"></p>
		</form>
		<hr>

		<h3 id="info0002">メールでのお問合せ</h3>
		<p>
		<a href="mailto: [email protected]?subject=ウェブサイトからのお問合せ&body=お問合せ区分をご記入ください（商品・採用・その他）：">[email protected]</a>
		までメールをお送りください。
		</p>
		<hr>

		<h3 id="info0003">お電話でのお問合せ</h3>
		<p>
		<a href="tel:0000000000"><img src="images/contact0001.png" alt="電話番号0000-000-000" class="infoimg_tel"></a>
		</p>
		<div class="remarks">
		<h4>受付時間</h4>
		受付時間は、平日午前9時から午後5時までとなります。
		</div>
		<hr>
	</div>

	<!-- フッタ -->
	<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>

</div>
</body>
</html>

※参考：フォームサービス利用版のHTMLソース（contact.html）

まとめ
  1. 書き写すことも学習方法のひとつ
  2. 部分的に抜粋して表示テストをしてみても良い
  3. 意味が分からない箇所があれば、インターネットで検索してみると良い
<前へ 目次へ 次へ>
広告
Sponsors
HTML標準（目的別） HTML標準（ABC順） HTML5（旧仕様） HTML4（旧仕様）
CSSプロパティ（目的別） CSSプロパティ（ABC順） CSS3（目的別） CSS3（ABC順）
HTMLの基本 CSSの基本 チュートリアル ウェブ制作TIPS
JavaScript Canvas HTML5 API 特殊文字
優良デザイン WEBカラー WEB画像 イラスト素材
コラム about サイトマップ
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ