CSS着せ替えテンプレートプロジェクト

基礎html解説

基礎htmlについて

基礎htmlは手に入れましたか？　しかしあなたはその意味がよく理解できていないかも知れません。ここでは、できるだけ簡単に、基礎htmlの各部位の説明をしていきます。基礎htmlはメモ帳などのテキストエディタもしくはHTMLエディタでひらいて編集することが出来ます。

文頭

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
このhtmlがどのような決まりにしたがい記述されているかを示しています。あなたはこれからHTML4.01 Transitionalの規則に従ってHTMLを作成します。この文にはできるだけ手を加えないことをおすすめします。
<html lang="ja">
html開始。言語に日本語（ja）を選択。日本語以外の場合は変更してください。
<head>
head開始。ここからページのタイトルや特徴等を記述します。
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
文字コードの指定。日本語にも様々あり、その中のShift_JISを使用すると宣言。違う文字コードを利用する場合は、一文中のShift_JISを該当する文字コードに変更してください。
<meta http-equiv="content-style-type" content="text/css">
スタイルシート言語指定。（そのページ内でstyle要素かstyle属性を使わないなら削除しても構いません）
<title>サイトの名前</title>
サイトの題名。必ずあなたのサイトの名前やページの題名に書き換えてください。HTML4.01では省略不可で必ず書かなければなりません。
<link rel="stylesheet" type="text/css" href="csstemplate/style.css">
このhtml文章から見て、同じ階層にあるcsstemplateフォルダに入っているstyle.cssを呼び出す。あなたが新しくフォルダを作成したなど、場合によっては変更する必要があります。
</head>
head終了。あなたがより高度なサイトを目指すならば、head内にナビゲーションや制作者情報等を記述することをおすすめします。
<body>
body開始。ここから記述される情報が、実際に表示される部分です。index.html(あるいはそれに準ずるファイル）のみ、<body id="INDEX">にします。
<div id="PAGETOP">
html文内に多々存在する、topへの戻りはここを指しています。

ヘッダーブロック

<div id="HEADER">
ヘッダー情報のまとまりです。
<h1>Your site title</h1>
サイトの題名。必ずあなたのサイトの名前に書き換えてください。
以下ロゴ画像にする場合のサンプル 
<h1><img src="logo.gif" alt="サイト名"></h1>
logo.gifには画像パス（URL)、サイト名には貴サイトのサイト名を代入してください。alt属性の値は画像が表示されないときや非グラフィカルブラウザでの閲覧時に参照され、HTML4.01では必須属性です。
<ul id="PAN">
パンくずリストと呼ばれ、今サイト内のどこにいるかをツリー構造で示します。
<li>index</li>
パンくずリストはページ事に異なります。あなたのサイトにあわせて変更する必要があります。
</ul>
パンくずリスト終了。
</div>
HEADER終了。
<hr>
罫線

メニューブロック

<div id="MENU">
サイトメニューについてのまとまりです。
<h2>menu</h2>
MENU題名。
<ul>
menuリスト開始。
<li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
メニューにはひとつひとつIDが付けられ、順にMENU01、MENU02、MENU03……となります。項目を増やす場合は、MENU05、MENU06…と続きます。また、現在あなたがいるページのメニューには、class="menu-on"を記述します。メニューはサイトにより異なりますので、あなたのサイトにあわせて変更する必要があります。
以下メニュー項目を画像にする場合のサンプル 
<li id="MENU01"><a href="index.html"><img src="index.gif" alt="インデックス"></a></li>
index.gifには画像パス（URL)、インデックスにはメニュー名を代入してください。alt属性の値は画像が表示されないときや非グラフィカルブラウザでの閲覧時に参照され、HTML4.01では必須属性です。
以下メニュー項目を増やした場合のサンプル 
<li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
<li id="MENU02"><a href="sample.html">sample</a></li>
<li id="MENU03"><a href="sample.html">sample</a></li>
<li id="MENU04"><a href="sample.html">sample</a></li>
<li id="MENU05"><a href="tuika1.html">追加1</a></li>
<li id="MENU06"><a href="tuika2.html">追加2</a></li>
</ul>
menuリスト終了。
</div>
MENU終了
<hr>
罫線

記事ブロック

<div id="KIZI">
各ページのメイン内容（記事）全体のまとまりです。
<h2>このテンプレートについて</h2>
見出し。記事のタイトル。
<div class="text">
メイン内容の個々の記事のまとまりです。このdivはh2要素の直下から開始し、次のh2要素まで続きます。
<div class="text">から<ul class="modori">の間
個々の記事の文章（内容）を書きます。
<ul class="modori">
ページの一番上へ戻るリンクのリスト（modori）開始。この部分はdiv.textの末尾に位置し、ワンセットで記述してください。
<li><a href="#PAGETOP">TOP</a></li>
ページの一番上へ戻るためのリンク。
</ul>
modori終了
</div>
text終了。
<hr>
罫線
<h2>～<hr>
記事が複数ある場合は<h2>から<hr>までをリピートします。
</div>
KIZI終了。忘れないようにしてください。
<div id="FOOTER">
フッター情報のまとまりです。
<h2>連絡先</h2>
FOOTER見出し。
<ul>
FOOTERリスト開始。
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
フッターにはひとつひとつ名前が付けられ、順にFOOTER01、FOOTER02、FOOTER03……となります。項目を増やす場合は、FOOTER04、FOOTER05…と続きます。ページの一番上へ戻るためリンク。
以下フッター項目を増やした場合のサンプル 
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
<li id="FOOTER02"><address><a href="mailto:mail@address.com">mail</a></address></li>
<li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>
<li id="FOOTER04">追加1</li>
<li id="FOOTER05">追加2</li>
<li id="FOOTER02"><address><a href="mailto:mail@address.com">mail</a></address></li>
『mail@address.com』の部分をあなたのメールアドレスに書き換えてください。もしくは、メールアドレスが記述してあるページやメールフォームが存在するページへリンクをはってください。後者をお勧めします。
<li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>
この企画へのリンク。
</ul>
FOOTERリスト終了。
</div>
FOOTER終了。

文末

</div>
PAGETOP終了。忘れないようにしてください。
</body>
body終了。
</html>
html終了。

おしまい。

補足

視覚的にはこんな感じになります。疑問点は、google等検索サイトで解決の糸口が見つけられるかもしれません。それでもうまくいかない場合は、私たちはフォーラムを設置しましたので、そちらをご利用ください。