ぼちぼち内容を入れて行きます。前回 は結構込み入った記事になりましたが、（それ以上に込み入るにも関わらず）今回は気楽ですよ。
何せ、読み飛ばしOK（何）。
早速ダウンロード用ファイルを置いておきますか。
- siteTest.lzh（解凍とか自力でやってね）
余りにあからさまに「サンプル」なので内容のカスタマイズがしたくなるかも知れませんが、CSS周りの設定が出来てから弄る事を、強くお勧めします。作業手順的に。
そのタイミングが来たら文中で明示しますけぇ。まだ数回先の話だけど。
さて、以下の記事は「何故こういうソースに？」という疑問を覚えた時にでもご参照下さい。
読んで置くに越した事は無いと思いますが、1回で理解出来なくても萎れる様な内容じゃ～ありませんので、念の為。
ソースの頭の方から、と言うか土台から、順繰りにザーっと流して解説します。
厳密さよりも、取っ付き易さの方を優先する方向です。宜しく。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
先ず、<html>の前にDOCTYPE宣言なる物を入れ、DTDを指定します。
DTD（文書型定義）とは「文書をこういう規則で書くよ」というルールブック。
文字列長いので覚えられなくても問題はありません……ぶっちゃけ、適切な宣言を選んでコピペする方が早くて正確だから。
今回はインラインフレームを使うので、「HTML 4.01 Transitional」つまりHTMLの4.01バージョンで、あんましキツキツじゃないタグの書き方する事にしました（この宣言だとフレームセットは使えない事になってるので注意）。
HTMLの他にXHTMLというものもあり、ちょっとタグの書き方のルールが違ったり。私は大概そっちを使っています。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
次いで、文書の文字コード（charset）の指定。
偶にあるでしょう？（日本のサイトにも関わらず）開いたら、ものっそい文字化け起こしていて困るページ（笑）。
確実に「半角英数以外の文字」が出て来る前に指定してやる必要があるので、<head>内の一番最初に指定します。
<meta>は文書情報の類を設定する要素で、その中に「文書タイプ：HTML」で「文字コード：shift_jis」なんだ、と書き込んであります。
勿論、実際の文字コードが違ったら此処の記載を変えないと駄目ですよ。
Windows環境の人がメモ帳で保存したら、初期設定でANSI (Shift-JIS)になるんで選びましたが、数ヶ国語混ぜて表記する可能性があるならutf-8をお勧めします。
蛇足ながら…キャラセットの指定部分を書換えても、ファイルの実際の文字コードが自動的に追従する訳ではないので（複数の文字コードに対応したソフトで変換して保存し直す必要がある）、指定と実際の文字コードに於ける不一致には気をつけましょう。逆もまた然り。
ここまで来て、漸く表示内容に突入。
<address><a href="サイトのURL">サイト名</a></address>
サイトの名前から行きましょうか。
これは<div id="header"></div>の中に入れます。フツーにテキストを記入するんですが……テキストを剥き出しで入れても機械は重要性や意味を理解せんのですよ。そんな訳で、<address>サイト名</address>としておきましょう。
<address>とは文書の連絡先なんかを指定する要素です。
サイト名はページの一番大きな見出し要素であるという解釈により<h1>サイト名</h1>とマークアップするという考え方もありますが、<h1>は「その文書固有の大見出し」と扱う方が自然かと思われます。
あ、サイト名を画像で表示したい？
それ後で出来ますから、取敢えず今はテキスト入れておいて下さい。
見栄えの問題は後で纏めて処理します。その方がメンテナンス楽になるんですよ、マジで。
<address>©著作権表示</address><p>注意事項</p>
次いで、コピーライト。
これは<div id="footer"></div>に入れます。著作権表示は著作者（文書の問合せ先）を表示するんで、やっぱり<address>で括れば良いですね。
因みに「マルCの著作権マーク＋発行年＋著作権者名」を記入すれば、著作権表示の構成としては充分です。心配なら、慣習的な構成で「～reserved.」まで長く表記。お好みで。
「©」でマルCマークが表示されます。あんまり旧いブラウザだと表示されんけどな。
ちょっとした注意書きなんかも記載する場合、<p>で括って文章を書きましょう。
<p>はパラグラフ、つまり段落を意味します。
<h1>ページタイトル</h1>
更に、ページの固有タイトル。
今作っているのはテンプレートというか雛形というかそういうページですからタイトルなんてどう付ければ良いかアレなんですが、<div id="main"></div>の中に<h1>ページタイトル</h1>を入れます。
<h1>は「1番大きい見出し」で、<body>の中に1回だけ出現します。
<title>ページタイトル：サイト名</title>
実はページタイトルを記入すべき場所がもう1つありまして、それは<head>の中です。
文書情報として<title>ページタイトル</title>と入れておきましょう（<h1>とは違うよ！）。
先に記した様な理由で、文字コードの指定より上の行に入れるのは駄目。
ニポンゴ、バケルカモ。
実際の運用上は「ページタイトル：サイト名」としておく事をお勧めします。
何故なら、閲覧者がブックマークする時に、ブラウザで使用されるのがこの文字列なので、両方入れておかないと使い辛いのです。
何処のサイトのどんなページか判らんのだ！
<ul>
<li><a href="メニュー項目リンク先">リスト項目</a></li>
<li><a href="メニュー項目リンク先">リスト項目</a></li>
<li><a href="メニュー項目リンク先">リスト項目</a></li>
<li><a href="メニュー項目リンク先">リスト項目</a></li>
<li><a href="メニュー項目リンク先">リスト項目</a></li>
</ul>
メニューは、リストでマークアップします。
これを手打ちするのはちょっと面倒かも知れませんが、大抵のホームページ作成ソフトには、リスト編集機能が付いてますからご安心を。
<div id="menu"></div>の中ですよ。
<h2>メニュー</h2>
もう何か、HTMLのタグ見慣れて来た事ないですか？
そんな事無いですかそうですか。
あ、リストに見出しを付けておきますよ。これは<h2>を使いましょう。「見出しレベルその2」という事ですね。
<h2>は、<h1>と違って、1つの文書内で何回も出現可能です。
<h3>～<h6>も以下同文。
但し、大見出しが無いのに中見出しや小見出しがあるとかいう順番飛ばしはNG。
で。
その他、本文に使いそうな要素を<div id="main"></div>の中へテスト用に追加しておきます。
<p id="goInnerTop"><a href="#inner">ページの先頭へ</a></p>
最後に、</div><!--end div#menu-->と</div><!--end div#inner-->の間に、<p id="goInnerTop">ページの先頭へ</p>を追加。名前（ID）をつけた段落です。
この挿入位置が、後でキーになります（謎）。
innerの先頭へ飛ばすアンカーを作成するから、innerの一番最後に配置している…という表向きの理由とはまた別に。
今回の作業はこれにて終了で～す。
次回は、いよいよ見栄え操作（CSS弄り）に突入します。
さぁレイアウトするぞ、と作業する、その前に（え）。
縦の物を横にもしたくねぇこの私が、CSS管理が面倒臭くならない為の下準備をしますよ。
コメントの投稿
- コメントおよび認証コードは、必須項目です。
- コメントは、即時公開されます。投稿したコメントの編集は、登録ユーザのみ行えます。