最初の一歩を踏み出そう
表紙ページには、通常２種類があります。
ひとつは、表紙ページの中に各コンテンツの目次を含んだもの。通常このページはｉｎｄｅｘ．ｈｔｍｌ（またはｈｔｍ）というファイル名が付けられます。ジオの場合は必ず表紙ページの拡張子をｈｔｍｌにしなくてはなりません。
もうひとつは、表紙ページは文字通り表紙だけで、おおよそ何を扱ったページかを紹介したり、挨拶の文章を簡単に掲載するにとどめます。タイトルだけをおく場合もありますし、イメージ写真やイラストを配することもあるでしょう。いずれにしても、各コンテンツへの目次は配置しません。目次は別のページにおくのです。訪問者は全て「表紙ページ」→「目次ページ」の順路を辿ります。
目次ページには、ｍｅｎｕというファイル名がよく使われます。ファイル名に特に決まりはありません。
なお、本来はファイル名は半角で書かねばなりませんが、見やすさを考慮して、ここでは全角文字を使います。また、タグも本来半角で記述するところを、ここでは全角で記述しますので、注意して下さい。
ところで、とらおは表紙ページの中に目次を含めています。その方が内容を訪問者により早くわかってもらえますし、クリックして次のページ（目次ページ）の表示を待つという時間が節約できるからです。一方、表紙ページと目次ページを分割すると、よりイメージ的で美しい表紙ページが出来ます。どちらがいいとは一概に言えません。
拡張子：ファイル名の後、ピリオドを付けて、その次に続く何もじかのアルファベットのこと。ファイルの種類を表す。ｗｅｂページの拡張子はｈｔｍまたはｈｔｍｌ。どちらの拡張子でもブラウザはwebページと判断してモニターに表示してくれるが、ファイル名が同じでも拡張子が違うと別のファイルと判断されるので注意が必要。この他に、画像ファイルの拡張子ｊｐｇやｇｉｆ、音楽の拡張子ｍｉｄｉなどがよく使われる。
タグ：ブラウザにどのように表現するかを指示する記号。例えば、文字サイズをひとつ大きくするには＜ｆｏｎｔ ｓｉｚｅ＝＋１＞と記述する。タグには終了タグがあり、この場合は＜／ｆｏｎｔ＞というふうにスラッシュを付ける。タグの中にタグをなんそうにも入れ子状にすることが出来る。
気軽に作る表紙ページ
表紙ページは出来るだけ早くアップしましょう。出来映えなんて気にしない。だって、どうせ表紙ページは何度も作り替えるものですから。技術が向上すれば作り直したくなるものですし、コンテンツが増えれば表紙ページの作り替えに迫られます。とらおも５回以上作り直しています。
だったら多少稚拙でいいから、さっさとアップしてしまえ、というのがとらおの持論です。
自分のＰＣの上でだけ、ああでもないこうでもないと悩むよりも、さっさとアップして、そして自分のwebページをわざわざ回線をつないで見るのです。表紙ページたったひとつでも、実際に回線を通じて自分が作ったページを見るというのは、とても感動します。新人作家が処女作を出版したようなものです。
親しい人がいれば、早速アドレスを教えて批評してもらいましょう。もっとも検索エンジンに登録したりして、不特定多数に見せる必要は、この段階ではありません。
では、表紙ページはどうやって作ればいいのでしょう。
嘘でもいいから、とにかく完成させることです。これで、ホームページ作りのおおよその感覚をつかめます。中身はきわめて簡単でよろしい。これから作ろうとするホームページの全体構想が出来上がっていて、それに則して作成できれば言うことはないのですが、構想だけで行き詰まっては何にもなりませんし、表紙だけでもできれば勢いがつきます。ページの作り直しは決して難しいことではありません。
個人ページの典型的な例をひとつ提示します。ここでは、表紙ページに目次を含めてみました。その方が雰囲気がつかめると思ったからです。
タイトル、あいさつ、カウンター、自己紹介、日記、いくつかのコンテンツ、リンク集、ゲストブック、（チャット）、メールの宛先、著作権者の表示、といったところでしょうか。
模擬ページとして、「カエルちゃんのホームページ」を作ってみました。
自己紹介は、訪問者がそのページに興味を持ったときに見てもらうページであると同時に、自己ＰＲのページでもあります。「自己紹介なんぞ見たくもない」と毒づく方もありますが、それは本編のコンテンツが弱いからで、いいものであれば作者に興味を抱くのはごく普通のことでしょう。
日記。日記とカエルは関係ないような気がしますが、やはり人気のあるコンテンツのひとつです。気になる人の日記をこっそり覗き見してみたい、そんな気持ちを抱いたことはありませんか？
日記ならば基本的に毎日更新できるので、常連さんを確保できるかも知れません。毎日書けなくてもかまいません。日付が飛んでしまっていても、続けることのほうが大切です。人に読んでもらう、という前提に立ち、「今日は特に書くにあたいすることがない」と判断したら書かなくて結構。エキセントリックになる必要はありませんが、それなりの視点とテーマで書きつづけることが、長続き＆人気の秘訣でしょう。
チャットや伝言版はあってもなくてもかまいません。あると楽しいことは事実ですが、あなたがそれを望むかどうか、あるいは、あなたの性格にそういうものがフィットするかどうかがポイントでしょう。
著作権については、All Right Reserved, (C) Copyright kaeruchan 1998 というふうに表示します。
さて、コンテンツについては、ここでは「ぼくのカエル飼育記録」と「野外観察記録」のふたつを用意してみました。この他におまけとして、「カエルに固執する理由」というタイトルの、まあ蛙を好きになった個人的な理由を説明するコーナーも設けます。
するとこんな具合でしょうか。
カエルちゃんのホームページ
カエル大好きのボクが、カエルに関する思い入れを書きました。
ここを読めばあなたもきっとかえるが好きになる。
だって、かわいいじゃない。
あなたは １２３ 番目のカエル仲間です。
All Right Reserved, (C) Copyright kaeruchan 1998
と、まあこんな具合に、ここではカエルに注目したページを想定してみました。カエルに関するコンテンツみっつと、個人ページにありきたりなコンテンツ、そしてリンク集をささやかに配しただけですが、目次だけを見る限り、結構立派な姿になったではありませんか。
実際には各ページが出来ていないのですから、薄っぺらな表紙ではあります。でも、これからこういうのを作っていくんだと思うと、夢が広がるような気がしませんか？ なんだかやる気が出てくるじゃないですか。実はボクは、あまり先のことを考えずに、こんな具合に表紙ページを作ってしまいました。そのおかげで、自分で作った表紙ページに触発され、各論のページをアップしていくことが出来たわけですが、一方では、未だに工事中のページが残ってしまっています。（出来ないのなら出来ないで、撤去すればいいのですが）
ですからみなさんも、是非がんばって、表紙ページだけでも急いでアップしましょうよ。まだ、不特定多数に見てもらうことを前提にする必要はありません。だから格好いいページとか、テクニカルなページとか、そんなことは意識しなくていいと思います。とらおは４００００ＨＩＴを越えてもそんなことは意識してませんし。
ジオシティーズでは登録から２週間以内にホームページを作らなくてはならないそうですが、とてもできそうにありません。
これも代表的な質問のひとつですが、完成させようとするから２週間ではできないなどと焦るのであって、とりあえず表紙だけでも作ってしまいましょう。あとは気長にのんびりとやりませんか？ 締め切りもノルマもないのですから。
ホームページ作りは「作家な活動」
「インターネットをすれば膨大な情報が手にはいる」とは、僕がまるでインターネットに興味を持っていなかったときに、よく言われていた言葉です。
本当にそうでしょうか？ もちろん、そういう使い方をしている人はいます。また、ショッピングやブラウザバンキングなど、なんらかの形のある結果を求めている人もいるでしょう。しかし、いわゆる「はまっている」状態の人がそうなのか、というと疑問です。ハマルほどの情報収集や用事があるとは思えません。
なぜハマルのでしょうか？
楽しいからです。その世界そのものに魅力があるからです。
では、ホームページの作り手は、それらを意識して作ることになります。日記とは本来自分だけのために書くものですが、ホームページでは「読んでもらう」ために書きます。ビジュアルなもの（写真やイラスト）は観てもらうために描きます。音楽は聴いてもらうために創ります。つまり、作家的な活動をしているのです。
「作品」というほど意識していなくとも、言いたいことを言ってる訳です。そこに人が集まってきて、意見や情報を交換したり雑談をしたり、ときには批評をしあったりすることが楽しいわけですから、その目的のためには、自分なりにきちんとした思いなどを伝えなくてはなりません。この「自分なりの」がなくては、そこには魅力がありません。つまり、人が集まってこないのです。
しかし、難しく考える必要はありません。日常生活の中で言いたいことを好き勝手にバーンと言ってのける機会が少ないだけに、自分のホームページはその貴重な機会を与えてくれます。この初期の段階を「自己満足」といい、「自己主張」をへて、最終的な段階を「自己実現」へと成長していくそうです。
僕は常日頃から言っているのですが、「確かにたくさんの人が来てくれた方が嬉しいには違いないものの、商業ベースでやっているわけではないのですから、自分の思いを曲げてまで読者に媚びる必要はない。理解してもらえる人とだけ楽しい交流をするのもひとつの方法だし、理解してもらえる人が少数であっても、理解してくれる人がいるということが重要なのです」
大切なのは、自分なりの何かが底にあるということです。「作家な活動」とは、そういう意味です。
ホームページつくりは「記者な活動」
「要するに、あなたの好きなことをアップすりゃいいのよ」的なことを書きましたけれど、本当にそれだけでいいのか、ということをここでは述べます。
あなたが超人的な記憶力を持ち、それを系統立てたり整理したりする能力も人並みはずれていたとしましょう。ならば、それも可能です。でも、実際そんな人はいないのでは？
いかに自分の好きなことであっても、そのことに関する知識や情報となると、限られていたり、はっきりしなかったり。そしてそのことに関して、ただ「好き」と書いただけでは、誰も付いてきてはくれませんから、その裏付けとか理由なども説明しなくてはなりません。このことに気づいた時点から、取材が始まります。
資料を探したり取り寄せたりする事も必要かも知れません。手元にあるはずの資料を探し出すのだって一苦労でしょう。
個人ページらしさを出すにはさらに、記憶や感情が必要です。それらを整理してその中に混乱や誤解がないかを確認しなくてはなりませんし、自分の感情や感想をどのように表現していくかも大切です。これを僕は自分に対する取材と呼んでいます。
このようにして、何をアップしていくか、その材料をそろえていくわけですね。材料には、テキスト（文章）、画像（写真や絵）、そして音楽などがあります。この他に、プログラムなどを用意して、自由にダウンロードできるようにしてる方もいらっしゃいます。
僕は文章中心なので、この講座でも画像や音楽に関する記述が少なくなりがちなのですが、自分で制作したり加工したり、あるいはどこかから借りてきたりなどで、題材をそろえていくことでは、本質的には同じだと理解しています。
さあ、みなさん、納得のいく材料が集まりましたか？
ホームページつくりは「編集者な活動」
そしていよいよ、ページ作り。材料さえそろえば、後は見栄えのいいように並べるだけです。
ｗｅｂページのありがたいところは、何の疑問も持たずに、最初っからカラーグラビアだという点です。僕は今まで同人誌やミニコミ誌をいくつか作ったことがあるのですが、何しろビンボー集団が悲壮な想いで自己主張をする場を確保するわけですから、カラーなんて夢のまた夢。おまけに、出来上がった本をどうやって販売するかというのも大きな問題です。「販売」といっても別にお金を儲けることが目的なのではなく、どうやって読者の手に届けるかということです。
それはともかく、集まった題材をページに構成するということは、単純に「福笑いのように素材をページに張り付ければいい」というのではない、ということはもちろんお分かりだと思います。
見栄えの良いように、また、効果的に自己主張するために、並べ方を工夫しなくてはなりませんね。
まず、画面全体として、背景色や背景画像、ＢＧＭの指定が出来ます。テキストは、文字の色や大きさや字体の指定が出来ますし、箇条書き、表組、などもできますね。表組には、枠線の有り無し、有りの場合はその太さ、表全体の色、枠線の色、枠線以外の部分の色または背景画像など、様々な指定が出来ます。位置についても、右寄せ、センタリング、左寄せなど指定できます。画像とテキストの組み合わせ方法や画像の位置や大きさなどにも気を配らなくてはいけません。何でも好きなように出来るからといって、背景を白、文字色を白にしたのでは読めませんから、注意が必要です。
この他に細かいところがまだ色々ありますが、ここまでになると、まさに「雑誌編集」の世界です。編集者な活動とはそういうことです。できの良いホームページほど、デザインに気を使っています。テクニカルな手法で目を引くものも、できるだけすっきりとシンプルにわかりやすくしたものも、出来がよければそれだけ第一印象がよくなり、本文コンテンツへと進んでもらえます。逆に、重厚なイメージを与えて読者を選別してしまうページもあります。
ただし、困ったことに、これがなかなか思い通りになりません。ブラウザやｗｅｂ作成ソフトのクセを把握するのに一通り時間がかかりますし、もともとｈｔｍｌでは出来ないことをしようとしているのかも知れません。根本的にｈｔｍｌタグの文法を誤って使っているかも知れません。ブラウザの種類やディスプレイの大きさにより、出来たり出来なかったりする場合もあります。
どうして、こういう風にならないの？
これも代表的な質問のひとつですが、もともと出来ないことをしようとしていたら、いくらがんばっても出来ないのです。
ｗｅｂ作成ソフトではとうとう作りきれないとわかって、参考書を見たり他人のソースを参考にしたりして、直接メモ帳で編集しても、ブラウザに呼び出すと思い通りの画面にならないなんてこともしょっちゅうです。ぼくなど、一度他人のソースをまるまるコピー＆ペースとしてみたのですが、それでもうまくいかなかったりしたことがあり、これにはさすがに頭に来ました。！
とりあえず、こういうのは誰もが通る道でありますから、これでめげたりせずに、でもある程度の格好の付いたところで妥協もして、ひとつの完成形を作って見ましょう。ホームページを通じて知人が増えれば、そういうことをアドバイスして下さる人も現れて、思わぬところで解決するなんて事もあります。
ま、そんなこんなで、最初は思い通りにならないことが多くて、イヤになっちゃうかも知れませんが、この段階ではページに載せる材料は既にそろっているわけですから、あとは楽しくレイアウトする作業だけなんです。楽しくやりましょう。ホームページの完成は目の前です。
そしてこのレイアウトも、「こんなことができるんだ」というのがおおよそわかってくれば、頭の中や紙の上で構想を練る段階からブラウザの実力に応じた形、つまり実現可能な構想を練れるようになります。すると後は作業を残すのみ、ということになります。
つまり、構想が練れたら、後はページにまとめて、アップロードをするだけ。「構想が出来たら完成したも同然」とは、つまりそういうことなのね。
おまけ１ 超基本タグ講座
それでは、ページを創るための簡単なタグ講座をお送りします。
ｈｔｍｌ形式の文章が始まりますよと言う宣言です。通常これが一番最初に来ます。
＜ｈｔｍｌ＞
ヘッド、つまり、頭の部分です。ここに書き込む内容は決まっています。
＜ｈｅａｄ＞
タイトルタグがあり、その次にテキストでタイトルを書き込みます。そしてタイトル終了タグで閉じます。ここに書かれたタイトルは、ｗｅｂページ左上のところに表示されます。
＜ｔiｔｌｅ＞カエルちゃんのホームページ＜/ｔiｔｌｅ＞ タイトルを書き終わったら、ヘッド終了タグで、ヘッドが終わったことを示します。
＜/ｈｅａｄ＞
＜ｂｏｄｙ ｂｇｃｏｌｏｒ="#d3feee" ｔｅｘｔ="#400040" ｌｉｎｋ="#0080ff" ａｌｉｎｋ="#ff0080" ｖｌｉｎｋ="#0000a0"＞ ボディタグで本文が始まることを宣言し、その後に、基本的な設定をします。
ｂｇｃｏｌｏｒで背景の色を、ｔｅｘｔで地の文の文字色を、ｌｉｎｋでリンクを設定した文字の色を、ａｌｉｎｋで現在リンク呼び出し中の文字の色を、ｖｌｉｎｋで既にリンク済みの文字の色を指定します。
色はここでは００００００からｆｆｆｆｆｆまでの数字およびアルファべットで示します。
左から順に二桁ごとに「赤」「緑」「青」の光の三原色で構成され、００ならその色の要素が全くない、ＦＦならいちばん明るい、ということです。０，１，２……８，９，ａ，ｂ……ｅ，ｆの１６進数です。
例えば、いちばん左の二桁「赤」で説明しますと、ｆｆがいちばん明るい赤、ということになります。
では、００００００はどんな色かといいますと、全ての色の要素がないわけですから、黒です。ｆｆｆｆｆｆは全ての色がもっとも明るい状態ですから、白です。
また、背景には、ｂｇｃｏｌｒ（背景色）のかわりに、ｂａｃｋｇｒｏｕｎｄで背景画像を指定することも、両方を指定することもできます。両方を指定しますと、背景画像が読み込まれて表示されるまでの間、背景色が表示されます。
＜ｂａｓｅｆｏｎｔ ｓｉｚｅ=３＞ 基本となる文字サイズを指定します。文字サイズは１〜７まであり、数字が大きくなるほど文字も大きくなります。これを指定しておけば、今後特に指定がない限りこのサイズの文字になります。
ここまで基本設定をしたら、後は本文になります。
よく使う、本当に代表的なタグを少しだけ紹介します。
改行。このタグのある位置で改行します。このタグがなければ、画面の大きさをブラウザが判断して画面のはしで折り返してくれます。
＜ｂｒ＞ 段落。行間をあけ、段落を作るときに使います。
＜ｐ＞ 横罫線。太さや長さ、色なども指定できます。
＜ｈｒ＞ リンク指定。ダブルクオーテーションマークの間に、リンク先のアドレスを入力。○○のページの部分が画面上に表示され、アンダーライン及び地の文とは違う文字色で（この色はｂｏｄｙタグに「ｌｉｎｋ=」で指定した文字色）表示され、リンクが設定されていることがわかります。その部分をクリックすると、リンク先ページへ飛びます。
＜ａ ｈｒｅｆ="リンク先アドレス"＞○○のページ＜/ａ＞ このようにリンク指定をしておくと、ここをクリックするとメーラーが自動起動して、しかも宛先が記入済みとなります。メールを送る人にとってはとても便利ですので、是非この設定をしておきましょう。
＜ａ ｈｒｅｆ="ｍａｉｌｔｏ：メールアドレス"＞メール下さい＜/ａ＞ フォントの色やサイズを変更します。変更部分が終わったら＜/ｆｏｎｔ＞終了タグで閉じます。
＜ｆｏｎｔ ｃｏｌｏｒ=＃１２３４５６ ｓｉｚｅ=６＞テキスト＜/ｆｏｎｔ＞
例文では、色とサイズを同時に変更していますが、どちらか片方だけでももちろんオッケーです。本文が終わったら、ボディーの終了タグを書きます。
＜/ｂｏｄｙ＞ そして、一番最後に、ｈｔｍｌの終了タグを書いて、おわりです。
＜/ｈｔｍｌ＞
おまけ２ もの書きさんご用達、邪道なタグの使い方。
それでは、ものかきさん御用達、ずらずらダラダラとテキストを並べるときに、ちょっとでも画面を見やすく感じさせるタグの紹介です。
行間をあけたいときにつかうタグです。例文では２５ピクセルです。この項目では、２３ピクセルで設定しています。この例では＜ｐ＞の中で指定していますから、「この段落は、こうですよ」と指示していることになります。例えば＜ｆｏｎｔ＞の中に指定をすれば、＜／ｆｏｎｔ＞まで指定が有効になるわけですね。この項目以外のこのページは、行間１３０％で、＜ｄｉｖ＞（章）で指定しています。＜ｄｉｖ＞タグは「章」なので、＜ｐ＞（段落）をも越えて指定できるわけですね。
＜ｐ ｓｔｙｌｅ="ｌｉｎｅ−ｈｅｉｇｈｔ： 25ｐｘ"＞
ちなみに、ピクセル（ｐｘ）で指定するよりも、パーセント（％）で指定した方が良いという人もいます。文字の大きさは見る人の環境によって変える事が出来るからです。ピクセル数で固定してしまうと、文字を小さくすると行間が開きすぎてしまいますし、文字を大きくすると文字同士が重なってしまうからです。
左端と右端に空白を作ります。これを使うと文章が右端から左端まで埋め尽くす、という感じが無くなり、すっきりします。このページで実際に使っています。本来は「引用」を意味していますから、これも邪道な使い方ではあります。
＜ｂｌｏｃｋｑｕｏｔｅ＞ 本文 ＜／ｂｌｏｃｋｑｕｏｔｅ＞
これも、本来違う目的で使うタグですが、このタグを使うと、画面の左端に少し空白が出来て、文章が始まります。
＜ｕｌ＞ 本文 ＜／ｕｌ＞ これも、本来とは違う使い方です。表を組むためのタグです。ここでは、一行一段しかない表を作り、その中に本文をズラリと書く手法です。
＜ｔａｂｌｅ ｗｉｄｔｈ＝＊＊＊＞＜ｔｒ＞＜ｔｄ＞ 本文 ＜／ｔａｂｌｅ＞
表組みをすると、左右の大きさを「ｗｉｄｔｈ＝」で指定できますから、見る人のブラウザの大きさに左右されません。
ディスプレイがどんどん大型化していますが、かといって右から左まで強烈にでかい画面で、ズラリと文字が並んでいると読みにくいため、この手法を使うのです。
但しこれにも欠点があります。ブラウザよりも大きい横幅を指定されていれば、画面を左右にスクロールしないと読めなくなってしまうからです。ここでは、一部そういう人がいるのを覚悟の上で、６００ピクセルの左右幅の表の中に記述しています。
また、テーブルタグは、開始から終了まで全てを読み込んでからでないと、画面表示をしてくれませんから、見かけ上表示に時間がかかります。ですから、テーブルタグは本文があまり長くならないよう、適当に区切って使うことが肝要です。[「第３章」に進む]
[僕たち初心者ホームページ作成講座目次へ] [とらおランドホームへ]