MakingHPsample2
エディタでHPを作る＿sample2 の解説
《サンプルプログラム》
１．sample1（2カラム版） ⇔ sample1の解説２．sample２（３カラム版） ⇔ 解説：このページ
３．sample3（2カラム版） ⇔ （ 左サイドメニュー部分とヘッダー部分が固定表示の例）
実際に、モデル「2.sample2」に倣って、３カラムのページを作ってみましょう。
「2.sample2」をクリックすると、ホームページが現れます。
その画面上にマウスを乗せ、右クリックするとポップアップメニューが開くので、
そのポップアップメニューの中にある「ページのソースを表示」をクリックしてください。
sample2のソースコードが出てきますので、
このソースコードを見やすい様に画面を縮小表示しておいてくださいネ。
そのソースコードに従って説明していきます。
ねらいは、「３カラムのコーディングの方法を習得する」ことです。
ホームページの構造(1),(2)の部分【DTD宣言,head要素】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>XHTMLの基本</title>
<link rel="stylesheet" type="text/css" href="mckstyle.css" />
</head>
解説
文書型宣言（DTD）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">で、
XHTML1.0の厳密型（Strict）であることがわかります。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">より、
このサイトは、html4を「xml1.0」の書式に準拠して改変した書式の「xhtml1.0」（厳密型）
で作られたサイトで、使用言語は日本語です。
また、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
で、
metaとは、ひとつ上の次元、ひとつ上の段階、超～、付属の、追加の、～の後に追加した、
のような意味でしたね。
従って、このmetaタグは、「全体に対して追加的な情報」、「body部分に影響を与える
ひとつ上の次元、立場、ひとつ上の追加的情報」となります。
そして、このサイトはhtmlとCSSで書かれていて、文字コードはUTF-8です。
次に、
<link rel="stylesheet" type="text/css" href="mckstyle.css" />で、
スタイルシート「mckstyle.css」は別ファイルであり、その所在は
「href="mckstyle.css"」
より、同じサーバー上の同じデレィクトリ内にあることがわかります。
ホームページの構造（３）の部分（ヘッダーブロック）
<body>
<div id="Wrap">
<div id="header">
<div class="moji_small">ホームページをCSS、XHTMLを利用して、テキストエディタで作成します。
</div>
<img border="1" height="125" src="images/scene1.PNG" width="100%" alt="霧島山" />
<ul>
<li><a href="http://michoka.jp/tezukuri_HP/HP_sample2.html">TOP</a></li>
<li><a href="http://makehp.mitioka.com/sample_css_html_HP.html">sample1</a></li>
<li><a href="#">CSS</a></li>
<li><a href="http://mitioka.com/yasaitukuri/sample_yasaitukuri.html">野菜作り</a></li>
<li>・・</li>
<li>・・</li>
</ul>
</div><!-- /header_end -->
解説します。
まず、
<body> ←・・・・ ここからホームページの中身が始まります。
<div id="Wrap"> ←・・・これは中段（左サイドメニュー＋コンテンツ＋右サイドコラム）の全体を包むブロックの設定の始まりです。
<div id="header"> ←・・・・ヘッダーブロック部分の始まりです。
<div class="moji_small">ホームページをCSS、XHTML、PHPを利用して、テキストエディタで作成します。
</div> ←・・・・サイト概略説明文です。次に示す画像のすぐ上に来ます。
<img src="./images/homepage_header_image.JPG" alt="高千穂峰" height="285" width="100%">
↑ この部分は、幅945px、高さ285pxの画像です。↑
width="100%"は、スタイルシート「mckstyle.css」の中の「＃header」に記述
してある「width: 945px;」より、その100%だから、945pxであることがわかります。
#header {
clear: both;
width: 945px; ←・・・・この幅の100%だから、945pxである。
padding: 1px;
background-color: #ccff99;
border: solid 1px #1f2e3d;
margin-left: auto;
margin-right: auto;
text-align:center;
}
<ul> ←・・・・ヘッダー部ナビメニューの始まり。
<li><a href="http://michoka.jp/tezukuri_HP/HP_sample2.html">TOP</a></li>
↑↑・・・ここよりメニュー項目始まり。
<li><a href="http://makehp.mitioka.com/sample_css_html_HP.html">sample1</a></li>
<li><a href="#">CSS</a></li>
<li><a href="http://mitioka.com/yasaitukuri/sample_yasaitukuri.html">野菜作り</a></li>
<li>・・</li>
<li>・・</li> ←・・・・ここでメニュー項目終わり。
</ul> ←・・・・ここでナビメニュー終わり。
</div><!-- /header --> ←・・・・ ここでヘッダーブロック終了です。
ホームページの構造（３）の部分（innerブロック）
【（左サイドメニュー）＋（メインコンテンツ）】部分
<div id="inner">
<div id="largeWrap">
<div id="mainWrap">
<h1>XHTMLの勉強</h1>
<p>
パスカルは、「人間は考える葦である。」と言った。
</p>
<h2>XHTMLの基礎１</h2>
<h3> ＜箇条書き＞ </h3>
<em>・番号なし</em>
<div style="border:solid 1px #369;width:400px">
<pre>
<p>私の好きな雑誌：</p>
<ul>
<li>りぼん</li>
<li>なかよし</li>
</ul>
</pre>
</div>
↓↓これを実行すると；
<p>私の好きな雑誌：</p>
<ul style="list-style-type:disk">
<li style="display:list-item">りぼん</li>
<li style="display:list-item">なかよし</li>
</ul>
<br />
ul は unordered list（番号無し箇条書き），li は list item<br />（箇条書き項目）。
<li> ... </li> の中には文字などのインライン要素や、またはブロックレベル要素が入る。
<br />
<hr>
<br />
<br />
</div><!-- /mainWrap END -->
<div id="leftsideWrap">
<span style="color:white">（左サイドメニュー）</span>
<ul>
<li><a href="http://michoka.jp/tezukuri_HP/HP_sample2.html">TOP</a></li>
<li><a href="http://makehp.mitioka.com/sample_css_html_HP.html">sample1</a></li>
<li><a href="#">CSS</a></li>
<li><a href="http://mitioka.com/yasaitukuri/sample_yasaitukuri.html">野菜作り</a></li>
<li>・・</li><br /><br />
<li>・・</li><br /><br />
</ul>
</div><!-- /leftsideWrap -->
<div class="clear"><hr /></div>
</div><!-- /largeWrap END -->
