本文を記載するページ
説明
- 検索から直接ここへ来た場合、まずは配布サイトへ。
このファイル（content.html）は本文を記述するページのサンプルである。用意するページ数に応じた数作成する。内容が長くなる場合は以下のように見出しリストを作る。適当な見出し（「h4」「h5」など）ごとにアンカーを作成し、見出しリストからリンクを張っておく。
順序がはっきりした内容の場合には、以下のような番号付きリストを使ってもよい。
ファイルの編集
解凍したファイル（今見ているファイル、ファイル名「content.html」）をエディタで編集し、コンテンツを記述してゆく。ファイルを解凍したフォルダとは別に作業用フォルダを作成し、そこにファイル一式をコピーして作業した方がやりやすいであろう。
メモ帳でもファイルの編集は可能である。しかし、WWW上ではより便利なエディタが配布されている。
- TeraPad（Vector）
- HTML Project2（Vector）
ブラウザで表示を見ながら、作業用フォルダにコピーしたファイルをエディタで開いて確認するとわかりやすいであろう。エディタで開いた状態でいったんプリントアウトして、赤ペンでメモっていくのが結局一番確実だと思う。
一括置換ソフト
更新などの際、ファイル内容を一括して置換するソフトを利用すると作業を省力化できる。
- MultiRep（窓の杜）
ナビゲーション部分
右側のナビゲーション部分は作成するファイルに応じて内容、リンク先を書き換える必要がある。このファイル（content.html）だけでなく、表紙となるページ（index.html）を含めすべてのファイルについて書き換えが必要になる。
ナビゲーション部分がいちいち記述されていることはこのサンプルの特徴であるが、章や節が多いコンテンツでは鬱陶しく思われる。全部で20項目程度に収めるべきであろう。20項目、すなわち20ページあればかなりの字数を収録できるが...。
なお、ナビゲーション部分はjavascriptやSSIを利用して書き換えの手間を無くしたり、位置を制御したりしてもよいが、方法は各自研究して欲しい。
添付の画像
「test.png」はファイル名どおり配置テスト用の画像である。実際にページを作成する際には、用意した写真やイラストなどと入れ替える。幅（width）や高さ（height）の値、代替テキスト（alt）の内容も適宜書き換えられたし。
bg.pngはページ左側とナビゲーション部分左側のギザギザ。いらない場合は後述するCSSファイルから記述を削除しておいてね（2箇所あるよ）。
画像形式について
特許問題に抵触することの無きよう、このサンプルに付属する画像はPNG形式としているが、JPEG形式の画像を使うこともできる。また、ライセンスを持っているソフトウェアが対応していればGIF形式に変換しても構わない。
画像の作成、加工
ペイントでも簡単な加工はできるが、より使いやすいソフトはいろいろ出回っている。
画像の配置
画像の配置パターンは3とおり定義してある。ひとつは右寄せのパターンだ。<img src="パス+ファイル名" width="幅" height="高さ" alt="代替テキスト">のような画像指定を<div class="imr">〜</div>で囲んでいただきたい。
このとき、<div class="imr">〜</div>を<p>〜</p>など、他のボックス要素の中に配置するとネットスケープの古いブラウザで表示が崩れる。<p>〜</p>などの前、または後ろに独立させて配置する必要がある。
左寄せで画像を表示する場合にはdivのclassを置き換え、class="iml"のようにする。
回り込みを解除したい場合、その箇所の要素のclassをclとする。例えば<p class="cl">〜</p>のようにだ。そうするとこうして回り込みを解除して次の要素が開始される。
回り込みをせずに画像を配置する場合には画像を囲むdivのclassをimnとする。同じテスト画像を使い回すなと怒られそうだが。
するとこのように、右にも左にもテキストは配置されない。そして次の要素は画像の下から開始される。下のようなことをやりたいケースもあるかな。
いろいろなサンプル
本文は読みやすいよう200字前後で段落を区切る。ソースでは「<p>〜</p>」で囲んでゆくことになる。この段落もそのように記述されている。
段落の始まりは1字分インデント（字下げ）されるよう設定されている。また、行間は通常の168%に、字間は通常より1ピクセル余分に取り、読みやすくしている。しかし、字間の方はMacを中心に反映されないブラウザもある。既出だけど最強調strongや強調emはこんな感じ。日本語フォントだと最強調、そして強調。
このページの上部には見出しリスト「ul」、番号付きリスト「ol」のサンプルがあるが、以下の例のような用語と説明のリスト「dl」も定義してある。用語<dt>〜</dt>や説明<dd>〜</dd>を使って記述してゆく。
- 用語その1
- 説明を入れる。長い説明も書けるが、「<p>〜</p>」とは異なり行間や字間の設定を行っていないから、あまりだらだら書くと読みにくい。
- 用語その2
- こうして複数の用語を説明することができる。
見出しは以下のように...
これは既出h2
「h2」の見出し。
これは既出h3
「h3」の見出し。
これも既出h4
「h4」の見出し。これ以下の見出しのフォントは本文と同じ。
これも既出h5
「h5」の見出し。
これは初出だなh6
「h6」の見出し。
上の横棒は区切り線<hr>。ブラウザによって表示がいろいろだね。
なお、本文を記載する部分では左右にマージンを設定している。
▲
class「return」はページトップへ戻るリンクなどに使う。上の「▲」のように右寄せに配置される。<p class="return">〜</p>のように記述する。
ココだけのハナシ...
上の行のようにclass「de-em」はいくぶんフォントサイズが小さめ（90%）で、かつ薄めの色（#666666）に設定してある。<p class="de-em">〜</p>のように記述する。ちょろっと追記をしたり、あまり目立たせたくない場合用に定義してみた。<em>の反対に当たる「マイナスの強調」になる。
盗作はいけません。著作権法により罰せられます。また、民事上の責任を求められ、損害賠償を請求されるかもしれません。
上のサンプル、<blockquote> は文章を引用する場合に使う。blockquoteの中はフォントサイズを90%に設定してある。段落（<p>）の行間は通常の140%に設定。
それから、このサンプルでは出典表記に用いるためのclassを定義してある。
- イケてるサイト
- クソサイト
- くだらねえ本
- 面白い本
上のサンプルのように、上下に点線が着く。出典の表記に使いたい部分を<div class="source">〜</div>で囲んでやる。
CSSファイル
解凍してできるファイルのうち、「style.css」はブラウザでの表示を定義するスタイルシートを記述したファイルである。「hehehe.css」のようにファイル名を変更することもできるが、HTMLファイル（index.html、content.htmlなど）上部の記述も同時に変更すること。
「style.css」を使って表示を変更できることがこのサンプルの便利な点である。「style.css」の内容を書き換えるだけで、すべてのHTMLファイルの「見栄え」を変更できる。
しかし、完全に使いこなすにはそれなりに勉強する必要がある。CSSの参考書を1冊ぐらいは手元に用意した方が便利。まずは手始めとして、比較的簡単にできる色の変更からやってみよう。
「style.css」をエディタで開くと、「#」のあとに6ケタの数字、あるいはアルファベットが並んでいる部分がたくさん見つかるはずだ。この部分をいじると色を変更できる。HTMLファイルもエディタで開き、記述されている要素やclassを確認しながら「style.css」の記述を変更しよう。
無難に使える色の値は以下の表を参照。まあ、タイトル画像と配色を変えるだけでずいぶん雰囲気が変わる。ついでにこれは「表」（table）のサンプルも兼ねている。
カラーパレット
| 無彩色 | |||
|---|---|---|---|
|
■#000000 ■#808080 ■#C0C0C0 ■#ffffff |
■#ff0000 ■#ffff00 ■#00ff00 ■#00ffff |
■#0000ff ■#ff00ff ■#800000 ■#808000 |
■#008000 ■#008080 ■#000080 ■#800080 |
216色と重なってるのもある。
| 暗い | 明るい | ||||
|---|---|---|---|---|---|
|
■#000000 ■#000033 ■#000066 ■#000099 ■#0000cc ■#0000ff |
■#003300 ■#003333 ■#003366 ■#003399 ■#0033cc ■#0033ff |
■#006600 ■#006633 ■#006666 ■#006699 ■#0066cc ■#0066ff |
■#009900 ■#009933 ■#009966 ■#009999 ■#0099cc ■#0099ff |
■#00cc00 ■#00cc33 ■#00cc66 ■#00cc99 ■#00cccc ■#00ccff |
■#00ff00 ■#00ff33 ■#00ff66 ■#00ff99 ■#00ffcc ■#00ffff |
|
■#330000 ■#330033 ■#330066 ■#330099 ■#3300cc ■#3300ff |
■#333300 ■#333333 ■#333366 ■#333399 ■#3333cc ■#3333ff |
■#336600 ■#336633 ■#336666 ■#336699 ■#3366cc ■#3366ff |
■#339900 ■#339933 ■#339966 ■#339999 ■#3399cc ■#3399ff |
■#33cc00 ■#33cc33 ■#33cc66 ■#33cc99 ■#33cccc ■#33ccff |
■#33ff00 ■#33ff33 ■#33ff66 ■#33ff99 ■#33ffcc ■#33ffff |
|
■#660000 ■#660033 ■#660066 ■#660099 ■#6600cc ■#6600ff |
■#663300 ■#663333 ■#663366 ■#663399 ■#6633cc ■#6633ff |
■#666600 ■#666633 ■#666666 ■#666699 ■#6666cc ■#6666ff |
■#669900 ■#669933 ■#669966 ■#669999 ■#6699cc ■#6699ff |
■#66cc00 ■#66cc33 ■#66cc66 ■#66cc99 ■#66cccc ■#66ccff |
■#66ff00 ■#66ff33 ■#66ff66 ■#66ff99 ■#66ffcc ■#66ffff |
|
■#990000 ■#990033 ■#990066 ■#990099 ■#9900cc ■#9900ff |
■#993300 ■#993333 ■#993366 ■#993399 ■#9933cc ■#9933ff |
■#996600 ■#996633 ■#996666 ■#996699 ■#9966cc ■#9966ff |
■#999900 ■#999933 ■#999966 ■#999999 ■#9999cc ■#9999ff |
■#99cc00 ■#99cc33 ■#99cc66 ■#99cc99 ■#99cccc ■#99ccff |
■#99ff00 ■#99ff33 ■#99ff66 ■#99ff99 ■#99ffcc ■#99ffff |
|
■#cc0000 ■#cc0033 ■#cc0066 ■#cc0099 ■#cc00cc ■#cc00ff |
■#cc3300 ■#cc3333 ■#cc3366 ■#cc3399 ■#cc33cc ■#cc33ff |
■#cc6600 ■#cc6633 ■#cc6666 ■#cc6699 ■#cc66cc ■#cc66ff |
■#cc9900 ■#cc9933 ■#cc9966 ■#cc9999 ■#cc99cc ■#cc99ff |
■#cccc00 ■#cccc33 ■#cccc66 ■#cccc99 ■#cccccc ■#ccccff |
■#ccff00 ■#ccff33 ■#ccff66 ■#ccff99 ■#ccffcc ■#ccffff |
|
■#ff0000 ■#ff0033 ■#ff0066 ■#ff0099 ■#ff00cc ■#ff00ff |
■#ff3300 ■#ff3333 ■#ff3366 ■#ff3399 ■#ff33cc ■#ff33ff |
■#ff6600 ■#ff6633 ■#ff6666 ■#ff6699 ■#ff66cc ■#ff66ff |
■#ff9900 ■#ff9933 ■#ff9966 ■#ff9999 ■#ff99cc ■#ff99ff |
■#ffcc00 ■#ffcc33 ■#ffcc66 ■#ffcc99 ■#ffcccc ■#ffccff |
■#ffff00 ■#ffff33 ■#ffff66 ■#ffff99 ■#ffffcc ■#ffffff |