「無謀者の挑戦」開設記念!

〜実録  ホームページの作り方・素人風味〜

さて、わが「〜無謀者の挑戦〜」開設記念として、
つい先日(2001年8月24日ごろ)までHTMLのことなどさっぱりだった私が、
いかにしてホームページ(以下HP)を作ったか?についてお話しましょう。
・・・と、思いましたが、書いてるうちになんだかHPの作り方講座のようになってしまいました(笑)
別にいいや、と思う人はブラウザの「戻る」を使って戻ってください。

1.無料でいくか?有料にするか?
2.最初はとりあえず予習
3.おうち探し
4.必要なものを集めておく
5.HTMLを書いてみる
6.後は根気強く作業
7.仕上げ


1.無料でいくか?有料にするか?

まず、HPを作るのに「金をかけずにがんばる」か、「金をかけて楽をする」かを決めましょう(笑)
私はお金がないので楽できません(泣き笑い)自力でがんばることにします。
無料でHPを作るには、HTMLの知識が必須のようです(他にもあるのかな?)。簡単なページならば特に知識がなくても作れる場合もありますが、その方法ではこのページのメインコンテンツ「メックウェポンファクトリー」の作成不可能・・・というわけで、HTMLを使ってHPを作っていくことにします。

ホントは、無料でしかも扱いが簡単なHP作成ソフトとかも有るらしいですが・・・あいにくとたいしたものは発見できず。
でもHTMLに慣れてきたころに「Super tag 32 Pro」というソフト(無料)を使ってみたところ、これがなかなか便利。
ただ、これをいきなり使いこなすのは無理でしょう。タグを理解してないとさっぱりだし、ヘルプ機能が弱いし(笑)


2.最初はとりあえず予習

まずはHTMLを知らなきゃ話になりません。
幸い、ネット上にはHTML初心者用のページがたくさん転がっています。
とりあえず、Yahoo!JAPANの検索条件にHTML等を入れて探してみます。
引っかかったページをいろいろ見て回って、自分の気に入ったページをいつでも参照できるようお気に入りに追加しておきます。

ちなみに私のおススメは「初級者のための初級者によるホームページ講座」と「Academic HTML」というHPです。
前者はオフライン学習用の圧縮ファイルもダウンロードでき、HP作成に役立つリンクもいろいろあってお得です。
後者はHTMLについて、段階を追って詳しく書かれています。
それと、自分の作ろうとしているHPと構造が似ているページも参考になります。
そのページの上でマウスを右クリックし、「ソースの表示」を選択すればそのページのHTMLが表示されます。


3.おうち探し

HTMLについて、ある程度目を通したら、HP作り開始です。
HPを作るためには、ネット上にHPを置くための場所が必要です。
これもいろいろキーワードを入れて検索してみたり、前述のページのリンク等を活用します。
キーワードを入れる際に、「無料」と入れるのを忘れないように(笑)ただ、「無料体験版」とかも引っかかるのがネックですが(笑)

私はYahoo!のジオシティーズに住む事にしました。


4.必要なものを集めておく

HPにある物と言えば、本文テキストやイラストを除けば後はやはりアクセスカウンタと掲示板でしょうか。(無論他にもいろいろありますが)
こういった機能を使うには、CGIを使って自作するか、どこかから借りてこなければなりません。
自作するのは面倒ですし、HPを置いているサーバーのサービスで無料で借りられる場合も多いのでそちらをお奨めします。
ジオシティーズにもいろいろツールがあるので探してみましょう。
・・・掲示板のほうが、ちょっと使いづらいものばかりですね。(^^;

製作中、他の所で良い掲示板を見つけました。
ログの全件保持が可能でカスタマイズも簡単、
しかも一人で複数の掲示板が持てるということで、さっそく設置します。
思う存分試し書きをして、後でちゃんとカウンタごと初期化しておきましょう。
後日、この掲示板は「魂狩オフ会打ち合わせ掲示板」にも使用することとなります。


5.HTMLを書いてみる

準備が済んだらさっそくHTMLを書いてみます。
ジオシティーズの場合、サイト上でも製作作業はできますが、常時接続でもない限りオフラインで作業するべきです。
なんせ、すごく時間のかかる作業ですから。(作ろうとする規模にもよりますが)
スタートメニューの「プログラム」の「アクセサリ」から「メモ帳」を開きます。
HTMLの書き方は一見すると難しそうですが、慣れてしまえば(よほど高度なことをしようとしない限り)結構簡単です。例えば、<BR>と入力すると改行します。このぐらいなら簡単ですね。
気をつけるべきことは、

といったところでしょうか。
わからないことが有ったらすぐに資料を参照できるようにしておきます。
また、何度も使うタグはコピーするなどして手間を省きましょう。
とりあえず、 といった辺りを覚えておけば、大体作れます。

予習もそこそこに、さっそくメモ帳やジオシティーズの「アドヴァンスドHTML」で編集を始める私。この辺、やっぱり私って無謀だなぁと思います(苦笑)


6.後は根気強く作業

自分の目指す形になるまで、ときおり「上書き保存→ブラウザで確認」を繰り返しつつ、編集していきます。
表示がおかしい個所はタグの閉じ忘れや、タグに全角文字が使われている等の原因が考えられます。
適宜修正していきましょう。

さて、ここで失敗談を一つ。
表を作る際、項目名となる枠ごとに<TH>〜</TH>、表の中身となる枠ごとに<TD>〜</TD>というタグで囲むのですが、一度これを間違えて逆にしてしまいました。
しかも間違えた表というのが、「メックウェポンファクトリー」のエンジン表です。
この表、やたらでっかい上に、すでに表の中身の入力は終わっています。
・・・・・・一つ一つ、手作業で直していくしかありません(涙)
皆さんはこうならないように気をつけてください。


7.仕上げ

作ったファイルをアップロードし、実際にネット上のページを見て不備がないか確認します。
問題なければカウンター等をいったんリセットし、完成です。
後はみんなに自分のHPができたことを宣伝して回りましょう。(笑)

さて、いろいろ真面目ぶって書いてみましたが、いかがだったでしょう?
これからHPを作ろうと思っている方の役に立ってくれればうれしいです。


上に戻る
目次に戻る
書斎に戻る
母屋(TOPページ)に戻る