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>
PAGETOP終了。忘れないようにしてください。
</body>
body終了。
</html>
html終了。

おしまい。

補足

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

本文マークアップ実践

  1. <div id="KIZI">以降から、記事ブロック終了の</div>のあいだにある記述を消します。
  2. 以下のコードを書き込みます。 
    <h2></h2>
<div class="text">

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  3. どんな記事を書くか、見出しを考えてください。思いついたら書き込みます。記事内容を書いてから考えても構いません、次の項目を見てください。 
    <h2>「○×」の映画を見た感想</h2>
<div class="text">

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  4. 記事に書きたい文章を考え、<div class="text">の直後から書きます。 
    <h2>「○×」の映画を見た感想</h2>
<div class="text">

▲月■日に友達と、先日放映開始した「○×」を見に行きました。
ネタバレしてるので、内容を知りたくない人は気をつけてください。

あらすじ
ある嵐の日に助けた王子に恋をした人魚姫
失恋すると泡になるという条件で、人魚姫は人間の足を手に入れる
しかし王子は隣国の姫との結婚が決まっていて、人魚姫は泡になって消える

原作との相違点
・AがBだった
・BがCじゃなかった

感想
私はAがBだったことにびっくりしました。帰り道で読んだ「雑誌名」には
『AがBなのはCの演出において失敗だった』って書いてあったけど、私はいいと思います。

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  5. 文章の構造を考え、その文字列が文中においてどんな要素であるか考えます。 
    <h2>「○×」の映画を見た感想</h2>
<div class="text">

<段落> ▲月■日に友達と、先日放映開始した「<話題> ○× </話題>」を見に行きました。 </段落>
<段落> <強調> ネタバレしてる </強調> ので、内容を知りたくない人は気をつけてください。 </段落>

<見出し> あらすじ </小見出し>
<順番1> ある嵐の日に助けた王子に恋をした人魚姫 </順番1>
<順番2> 失恋すると泡になるという条件で、人魚姫は人間の足を手に入れる </順番2>
<順番3> しかし王子は隣国の姫との結婚が決まっていて、人魚姫は泡になって消える </順番3>

<見出し> 原作との相違点 </小見出し>
<順不同のリスト項目> AがBだった </リスト項目>
<順不同のリスト項目> BがCじゃなかった </リスト項目>

<見出し> 感想 </小見出し>
<段落> 私はAがBだったことにびっくりしました。</段落>
<段落> 帰り道で読んだ<出典>「雑誌名」</出典>には
『<引用> AがBなのはCの演出において失敗だった </引用>』って
書いてあったけど、私はいいと思います。 </段落>

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  6. マークアップします。記事全体の見出しがh2 なので、見出しはh3からです。 
    <h2> 「○×」の感想 </h2>
<div class="text">

<p>▲月■日に友達と、先日放映開始した「<dfn>○×</dfn>」を見に行きました。</p>
<p><em>ネタバレしてる</em>ので、内容を知りたくない人は気をつけてください。</p>

<h3>あらすじ</h3>
<ol>
 <li>ある嵐の日に助けた王子に恋をした人魚姫<li>
 <li>失恋すると泡になるという条件で、人魚姫は人間の足を手に入れる</li>
 <li>しかし王子は隣国の姫との結婚が決まっていて、人魚姫は泡になって消える</li>
</ol>

<h3>原作との相違点</h3>
<ul>
 <li>AがBだった</li>
 <li>BがCじゃなかった</li>
</ul>

<h3>感想</h3>
<p>私はAがBだったことにびっくりしました。</p>
<p>帰り道で読んだ<cite>雑誌名</cite>には
『<q>AがBなのはCの演出において失敗だった</q>』って
書いてあったけど、私はいいと思います。 </p>

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
  7. まだ見出しが決まっていなかった場合は、出来上がった記事内容から最適な見出しを考えて書きます
  8. もう一つ記事を書く場合は、2項目目からリピートします。挿入箇所は<hr>の直後です。 
    って書いてあったけど、私はいいと思います。 </p>

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>

<h2></h2>
<div class="text">

<ul class="modori">
 <li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>