〜マンガの為のHTML入門〜

Step10.0:INDEXページについて…。

さて、いよいよ“INDEX”ページの作成に入る所までやってきました。
“INDEX”とは“目次”の事です。…が
ホームページの場合の“INDEX”とはTOPページを示す場合が多いのです。
つまり、貴方のHPを訪れた人が最初に目にするページであり
雑誌や単行本で言うなら『表紙』になるページです。

勿論、INDEXページとは別にTOPページ設定する事も可能ですが
ここではそういった例外的な作り方は説明をひかえさせていただきます。

さらに、ここで説明するINDEXページは、
本来の意味通りの“目次”の役割も果たすモノを紹介・説明します。
つまりここではとりあえず
INDEXページと漫画の本編ページを完成させて
まんが用HPとしては公開に最低限必要な状態にしようと言う事な訳です。


ここでも漫画のページの時の様に、幾つかのサンプルページを用意しますので
貴方はその中から貴方のイメージに近いモノを選んで下さい。
後は、漫画のページの時と同様にタグをコピーして必要な部分を書き替え
必要なイメージファイルと一緒にHP用のフォルダ内に収めれば良いわけです。

---

〜TABLE(テーブル)というHTMLタグ〜

INDEXページを作成するにあたって使用するのが
<table>〜</table>“テーブル”と呼ばれるこのタグです。

“テーブル”とは言いますが、その作用は「表の枠を区切る」というモノです。
例えば、今この文字の下には6つの色が並んでいると思います。


この色が綺麗に並んでいる様に見えるのは
HTMLタグの上では表のマス目に色を配色したからです。
下はそれがわかりやすいように表の枠を実線にしたものです。



表の枠のサイズは
タグの設定値を替える事で自由に変化させられます。
例えば、下図のように…。

	ここでは試しにこの様に変形させてみました。 設定はすべてピクセル値で入力します。 まず、表全体のピクセル数は《横幅800：縦200》 左上の赤いマスは《横150：縦40》 中央上の青いマスは《横530(縦は横隣のサイズに準ずる)》 右上黄色のマスは《横120(縦は横隣のサイズに準ずる)》 当然下の段のマスは上の段に準じてサイズが決まります。 更に段を下に続ける事も、もちろん可能です。

更に、この表の枠を消し背景色を白にして
表全体の縦幅を広く(仮に530)してみます。
すると、こうなります。

	例えば、ここに “HPのタイトル”を入れましょう。
ここには貴方の作品の タイトルと、その作品の 一ページ目につながる リンクを張るのは どうでしょうか？ *それを仮に “INDEX(目次)” としましょう。	一番面積の広いここには、当然 貴方のHPの表紙を飾る “表紙イラスト” を入れるべきでしょう。	そうなると、 ここには 貴方の私信や 更新情報が 入るスペースと するのが 適当かも しれません。 つまり “Information”です。

これに、実際にイメージファイルを貼ったものが
次のページのサンプル“INDEX-01”となります。

次のページのサンプル“INDEX-01”



なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。

*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。

Step0.1(INDEX)に戻る