HTMLソースを説明していきます。
HTMLソースsample8.htmlの注意事項を赤い字で記しています。
重複する箇所は省略しています。（但し、重要な箇所は残します）
−−−−−−−−−−−−−−−−−前略−−−−−−−−−−−−−−−−−
<head>
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
<link rel="start" href="sample8.html" />
<link href="style8.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> コンテナーブロックの開始
<div id="banner"> バナーブロックの開始
<h1>HTMLCSS.biz-ホームページ制作講座</h1> バナー上の文字を表示
</div> バナーブロックの終了
<div id="leftsidebar"> 左ナビゲーションブロックの開始
<div class="lftbox"> 上部のボックス部分、設定はスタイルシートで
<h2>当教材の構成について</h2>
<p class="c1">このマニュアル<br />
HTMLファイル、sample1.html〜<br />sample8.html</p>
<p class="c1">スタイルシート、style1.css〜style8.css
</p>
</div>
<div class="lftbox2"> 真ん中の縦長ボックス部分、設定はスタイルシートで
<h2>HTMLについて</h2>
<p class="c1">HTMLとは<span class="cont">
<a href="http://ja.wikipedia.org/wiki/HyperText_Markup_Language">
HyperText Markup Language</a></span>の略です。文書の論理的な構造を示す言語です。</p>
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
</div>
<div class="lftbox"> 下部のボックス部分、設定はスタイルシートで
<h2>スタイルシート<br />(CSS)について</h2>
<p class="c1">CSSは<span class="cont">
<a href="http://ja.wikipedia.org/wiki/Cascading_Style_Sheets">Cascading Style Sheets</a></span>の略です。HTMLやXHTMLで見栄えを定義する仕様です。<br />
CSSはW3Cにより規格が定められています。
</p>
</div>
</div> 左ナビゲーションブロックの終了
<div id="contents"> コンテンツブロックの開始
<h3>初心者がHTMLとスタイルシートを使いこなせるようになる事を目指すホームページ作成講座</h3> スタイルシートで枠線内に文字を表示させている
<p>「HTMLCSS.biz-ホームページ制作講座」はHTMLとスタイルシート(CSS)が始めての人が、本格的な商用ホームページやアフィリエイトサイトを作成出来るようになる事を目的としています。<br />
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
準備するものはWindows付属のメモ帳ですが、<span class="cont"><a href="http://hide.maruo.co.jp/">秀丸エディタ</a></span>等があるほうが尚良いです。他にダウンロードするソフトがありますが、次章でダウンロード先を後章で利用方法について説明します。<br />
−−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
</div> コンテンツブロックの終了
<div id="rightsidebar"> 右ナビゲーションブロックの開始
<ul> ボタン状のリンク部分です 仕掛けはスタイルシートにあります 画像は使っていません
<li class="menu"><a href="../1/sample1.html">サンプル１−<br />１カラムレイアウトその１</a></li>
<li class="menu"><a href="../2/sample2.html">サンプル２−<br />１カラムレイアウトその２</a></li>
<li class="menu"><a href="../3/sample3.html">サンプル３−<br />２カラムレイアウトその１</a></li>
<li class="menu"><a href="../4/sample4.html">サンプル４−<br />２カラムレイアウトその２</a></li>
<li class="menu"><a href="../5/sample5.html">サンプル５−<br />右ナビゲーションその１</a></li>
<li class="menu"><a href="../6/sample6.html">サンプル６−<br />右ナビゲーションその２</a></li>
<li class="menu"><a href="../7/sample7.html">サンプル７−<br />３カラムレイアウトその１</a></li>
<li class="menu"><a href="sample8.html">サンプル８−<br />３カラムレイアウトその２</a></li>
</ul>
</div> 右ナビゲーションブロックの終了
<div id="footer"> フッターブロックの開始
右ナビゲーションブロック部分と同様にスタイルシートで小さなボタン状のリンクに設定
<div class="adst"> 位置の微調整
<span class="menu2"><a href="../1/sample1.html">サンプル1.1カラムレイアウトその1</a></span>
<span class="menu2"><a href="../2/sample2.html">サンプル2.1カラムレイアウトその2</a></span>
<span class="menu2"><a href="../3/sample3.html">サンプル3.2カラムレイアウトその1</a></span>
<span class="menu2"><a href="../4/sample4.html">サンプル4.2カラムレイアウトその2</a></span>
<span class="menu2"><a href="../5/sample5.html">サンプル5.右ナビゲーションその1</a></span>
<span class="menu2"><a href="../6/sample6.html">サンプル6.右ナビゲーションその2</a></span>
<span class="menu2"><a href="../7/sample7.html">サンプル7.3カラムレイアウトその1</a></span>
<span class="menu2"><a href="sample8.html">サンプル8.3カラムレイアウトその2</a></span>
</div>
</div> 右ナビゲーションブロックの終了
</div> コンテナーブロックの終了
<address>
Copyright ©2007 あなたのホームページ名or会社名 All Rights Reserved.<br />
Powered by<span class="cont"><a href="http://www.htmlcss.biz">HTMLCSS.biz-ホームページ制作講座</a></span>
</address>著作権リンクの削除禁止
</body>
</html>
スタイルシートの説明にお進み下さい。メニューは上部にあります。