FAQ

基礎htmlは手に入れましたか？しかしあなたはその意味がよく理解できていないかも知れません。ここではindex.htmlを使用し、できるだけ簡単に、基礎htmlの各部位の説明をしていきます。基礎htmlはメモ帳などで開いて編集することが出来ます。

文頭

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
このhtmlがどのような決まりにしたがい記述するかを示しています。この文にはできるだけ手を加えないことをおすすめします。
<html lang="ja">
html開始。言語に日本語を選択。
<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">
スタイルシート言語指定。
<title>サイトの名前</title>
サイトの題名。必ずあなたのサイトの名前に書き換えてください。
<link rel="stylesheet" type="text/css" href="csstemplate/style.css">
このhtml文章から見て、同じ階層にあるcsstemplateフォルダに入っているstyle.cssを呼び出す。あなたが新しくフォルダを作成し、そこにhtml文章を書く場合など、場合によっては変更する必要があります。
</head>
head終了。あなたがより高度なサイトを目指すならば、head内にナビゲーションや制作者情報等を記述することをおすすめします。
<body>
body開始。ここから記述される情報が、実際に表示される部分です。index.htmlにのみ、id="INDEX"を表記。
<div id="PAGETOP">
html文内に多々存在する、topへの戻りはここを指しています。

ヘッダー

<div id="HEADER">
デザインのために存在するdiv、HEADERです。ヘッダー情報のまとまりです。
<h1>Your site title</h1>
サイトの題名。必ずあなたのサイトの名前に書き換えてください。
<ul id="PAN">
パンくずリストと呼ばれ、今サイト内のどこにいるかをツリー構造で示します。
<li>index</li>
パンくずリストはページ事に異なります。あなたのサイトにあわせて変更する必要があります。
</ul>
パンくずリスト終了。
</div>
HEADER終了。
<hr>
区切り。CSSが使用されない場合、見やすいようにとの意味もあります。

メニュー

<div id="MENU">
デザインのために存在するdiv、MENUです。サイトメニューについてのまとまりです。
<h2>menu</h2>
MENU題名。
<ul>
menuリスト開始。
<li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
メニューにはひとつひとつ名前が付けられ、上からMENU01、MENU02、MENU03・・・・・となります。また、現在あなたがいるページのメニューには、class＝”menu-on”を記述します。メニューはサイトにより異なりますので、あなたのサイトにあわせて変更する必要があります。
</ul>
menuリスト終了。
</div>
MENU終了
<hr>
区切り。CSSが使用されない場合、見やすいようにとの意味もあります。

記事部分

<div id="KIZI">
デザインのために存在するdiv、KIZIです。各ページのメイン内容（記事）全体のまとまりです。
<h2>このテンプレートについて</h2>
見出し。記事の名前やタイトル。
<div class="text">
デザインのために存在するdiv、textです。メイン内容の個々の記事のまとまりです。このdivはh2要素の直下から開始し、次のh2要素まで続きます。
<ul class="modori">
ページの一番上へ戻るためのul、modori開始。この部分はdiv、textの末尾に位置し、ワンセットで記述してください。
<li><a href="#PAGETOP">TOP</a></li>
ページの一番上へ戻るためのリンク。
</ul>
modori終了
</div>
text終了。
<hr>
区切り。CSSが使用されない場合、見やすいようにとの意味もあります。
</div>
KIZI終了。

フッター

<div id="FOOTER">
デザインのために存在するdiv、FOOTERです。フッター情報のまとまりです。
<h2>連絡先</h2>
FOOTER見出し。
<ul>
FOOTERリスト開始。
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
フッターにはひとつひとつ名前が付けられ、上からFOOTER01、FOOTER02、FOOTER03・・・・・となります。ページの一番上へ戻るためリンク。
<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等、検索サイトで解決の糸口を探してください。それでもうまくいかない場合は、私たちはフォーラム（準備中）を設置しましたので、そちらをご利用ください。