タイトル
内容の説明
このファイルについて
- 検索から直接ここへ来た場合、まずは配布サイトへ。
このファイル（content.html）は本文を記述するページのサンプルである。用意するページ数に応じた数作成する。内容が長くなる場合は以下のように見出しリストを作る。適当な見出し（「h4」「h5」など）ごとにアンカーを作成し、見出しリストからリンクを張っておく。
順序がはっきりした内容の場合には、以下のような番号付きリストを使ってもよい。
ファイルの編集
解凍したファイル（今見ているファイル、ファイル名「content.html」）をエディタで編集し、コンテンツを記述してゆく。ファイルを解凍したフォルダとは別に作業用フォルダを作成し、そこにファイル一式をコピーして作業した方がやりやすいであろう。
ブラウザで表示を見ながら、作業用フォルダにコピーしたファイルをエディタで開いて確認するとわかりやすいであろう。エディタで開いた状態でいったんプリントアウトして、赤ペンでメモっていくのが結局一番確実だと思う。
ナビゲーション部分
ページ上部のナビゲーション部分は作成するファイルに応じて内容、リンク先を書き換える必要がある。このファイル（content.html）だけでなく、表紙となるページ（index.html）を含めすべてのファイルについて書き換えが必要になる。
ナビゲーション部分がいちいち記述されていることはこのサンプルの特徴であるが、章や節が多いコンテンツでは鬱陶しく思われる。全部で2行、10項目程度に収めるべきであろう。10項目、すなわち10ページあればかなりの字数を収録できるが...。
添付の画像
「test.png」はファイル名どおり配置テスト用の画像である。実際にページを作成する際には、用意した写真やイラストなどと入れ替える。幅（width）と高さ（height）、代替テキスト（alt）もそれぞれ書き換えるべし。
画像形式について
特許問題に抵触することの無きよう、このサンプルに付属する画像は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とする。同じテスト画像を使い回すなと怒られそうだが。
するとこのように、右にも左にもテキストは配置されない。そして次の要素は画像の下から開始される。このページよりも幅の狭い画像の場合、センタリングされる。
いずれの配置をするにしても、画像の高さには特に制限はない。しかし、このサンプルで最大幅として想定しているのは右寄せ、左寄せの場合は610ピクセルまで、回り込みなしの場合は630ピクセルまでである。回り込みなしの場合の幅は標準的なバナーの最大幅であるから、まず不自由することはないであろう。
下のようなことをやりたいケースもあるかな。この例の場合、合計の幅が630ピクセルまで。画像の間に隙間を入れたいときは やスペーサ画像を作成して挟むが、画像自体に使える幅はその分目減りする。
いろいろなサンプル
本文は読みやすいよう200字前後で段落を区切る。ソースでは「<p>〜</p>」で囲んでゆくことになる。この段落もそのように記述されている。
段落の始まりは1字分インデント（字下げ）されるよう設定されている。また、行間は通常の168%に、字間は通常より1ピクセル余分に取り、読みやすくしている。しかし、字間の方はMacを中心に反映されないブラウザもある。既出だけど最強調strongや強調emはこんな感じ。日本語フォントだと最強調、そして強調。
このページの上部には見出しリスト「ul」、番号付きリスト「ol」のサンプルがあるが、以下の例のような用語と説明のリスト「dl」も定義してある。用語<dt>〜</dt>や説明<dd>〜</dd>を使って記述してゆく。
- 用語その1
- 説明を入れる。長い説明も書けるが、「<p>〜</p>」とは異なり行間の設定は狭めだから、あまりだらだら書くと読みにくい。
- 用語その2
- こうして複数の用語を説明することができる。
見出しは以下のように...
これは既出h1
「h1」の見出し。明朝系のフォントで、ページ上部にぴったりくっつく。
これは既出h2
「h2」の見出し。これもフォントは明朝系にしている。
これは既出h3
「h3」の見出し。これもフォントは明朝系にしている。h1〜h3までは微妙に時間が空くよう、letter-spacingを設定してある。
これも既出h4
「h4」の見出し。ここからはフォントが変わる。
これは初出h5
「h5」の見出し。
これも初出だなh6
「h6」の見出し。border（左側の飾り）は付けていない。
上の横棒は区切り線<hr>。一応色（#999999）を付けてある。ブラウザによって表示がいろいろだね。
▲
class「rt」はページトップへ戻るリンクなどに使う。上の「▲」のように右寄せに配置される。<p class="rt">〜</p>のように記述する。
ココだけのハナシ...
上の行のようにclass「cm」は薄めの色（#999999）に設定してある。<p class="cm">〜</p>のように記述する。ちょろっと追記をしたり、あまり目立たせたくない場合用に定義してみた。<em>の反対に当たる「マイナスの強調」になる。
段組
一応、ページ幅を等分する2段組を定義してある。左側の段は<div class="lf">〜</div>のように、右側の段は<div class="rg">〜</div>のように記述する。
右側の段はこのように。段組を終了させるときは、「画像の配置」のところに記述した回り込み解除を設定した改行を<br class="cl">のように記述する。
CSSファイル
解凍してできるファイルのうち、「style.css」はブラウザでの表示を定義するスタイルシートを記述したファイルである。「hehehe.css」のようにファイル名を変更することもできるが、HTMLファイル（index.html、content.htmlなど）上部の記述も同時に変更すること。
「style.css」を使って表示を変更できることがこのサンプルの便利な点である。「style.css」の内容を書き換えるだけで、すべてのHTMLファイルの「見栄え」を変更できる。
しかし、完全に使いこなすにはそれなりに勉強する必要がある。CSSの参考書を1冊ぐらいは手元に用意した方が便利。まずは手始めとして、比較的簡単にできる色の変更からやってみよう。
「style.css」をエディタで開くと、「#」のあとに6ケタの数字、あるいはアルファベットが並んでいる部分がたくさん見つかるはずだ。この部分をいじると色を変更できる。HTMLファイルもエディタで開き、記述されている要素やclassを確認しながら「style.css」の記述を変更しよう。
無難に使える色の値は以下の表を参照。まあ、タイトル画像と配色を変えるだけでずいぶん雰囲気が変わる。
基本16色
216色と重なってるのもある。
|
■#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 |