HOME
          ホームページ作成について
2000年7月からパソコンを始めた初心者が、なんとか頑張ってHPを作りました。 作成ソフトを使わないでタグを書き込んだ、その作成記です。 これからHPを作りたい人にとって何か参考になることがあるかもしれないと思い、 あれこれ書いてみることにしました。
 最初の予定では、まず作成ソフトを使って基本的な ところを作り、それから細かい部分をタグの書き込みで修正していくつもりでした。
そして、Windows 98には「 FrontPage Express 」という作成ソフトが入っているというのを本で知って それで作ろうと思ったけれど、いくら探しても見つからない。 おかしなと思っていたらWidows98 のSE(セカンド・エディション)には入って無いとか。 でもインターネットで簡単に手に入るということなので、[スタート]→[Windows Update]でインターネットに接続 し、マイクロソフトのサイトで[製品の更新]のリストの中からなんとか無事にダウンロードしてインストール完了。

ところが、それからまもなく「 Outlook Express 」が起動しなくなるという トラブルが発生してしまい、メーカーのサポートセンターに電話をして、あれこれやってみたけど解決しない。 それでしかたなく、付属のリカバリーCDを使って初めての初期化を実行。 当然、データはすべて消えてしまったから「 FrontPage Express 」のダウンロードは、やり直さなければならない。 ところが、今度はマイクロソフトのサイトを、いくら探しても見つからない。 どうやらダウンロードによる配布は中止になったようです。
そこで今度は書店で『ホームページの作成と公開』(青木恵美著・技術評論社) を買ってきて、その付属 CD-ROM からやっと手に入れることができた。 やれやれ。
この本には、出来上がったファイルをアップロードする際に必要なFTPソフト「FFFTP」も入っていたのであとで役立ったけれど、 フリーソフトなので雑誌の付録などにもよく収録されているようです。
HP作成用フリーソフトとしては「Homepage Manager」があります。 ダウンロードや使い方などかなり詳しいサポートサイトは
その他にも「HTML忠太」や「alphaEDIT」があります。

 それまでにあちこちのホームページを見てまわりながら、 自分が作る時の注意点をチェックしておいた。
画面をシンプルに、特にトップページは、初めて見てもすぐ理解できるようにする。 いろんなものがいっぱいあって "これはどうなってるんだろう?"と考えてしまうようなサイトは、 あまり入って行く気にならないから。
逆に、シンプルな表紙だけというのも考えもので、時間をかけて重いページをやっと表示したと思ったら、「ENTER」の 入口リンクだけだとガッカリして、"もういいよ" となってしまう。
リンクを深くすると、自分が今どこにいるのかわからくなって、迷って しまいそうだから、2段かせいぜい3段くらいまでにする。
バックの壁紙は、あくまでも引き立て役だから、なるべくあっさりしたものを選ぶ。 壁紙が派手だと、バックが主役のように目立ってしまって、肝心の内容のほうが負けてしまうから。
壁紙を使わないで単色にする場合、原色にすると派手過ぎるし、黒だと文字が読みにくい。 白にするとまぶしい感じで目が疲れてしまうから、なるべく淡い色合いにしたほうがいい。 ま、それぞれの好みかもしれませんが ‥。
壁紙については、最初はインターネットの素材屋さんをあちこち探しまわって、なんとか見付けて使っていたけれど、 しばらくするうちに、もっとシンプルでソフトなものにしたくなったので、自分で工夫して作ってみました。
色や明るさをいろいろ変えたものを、素材として持ち帰れます。こちら
 いよいよ作成にかかってから、最初のうちは順調だったけど、 細かいところがなかなか思うようにならない。それはあとで修正することにしてもいいけど、どうも気持ち悪くてすっきりしない。 それで今度は、タグのことを解説している本を買ってきて、それを参考にしながらソースに書き込んで 表示してみると、エッと思うような変な画面になっていたり、キャンセルされてしまったりで、なかなかうまくいかない。 これは、ソフトの設定に合わないものはダメ、ということなのかもしれない。どうしようか ‥。
このままソフトに慣れてくれば、それなりに作れるのかもしれないけど、 おなじ慣れるなら、ソフトよりタグに慣れたほうが、自分の思い通りに作れていいだろう。 よぉし、 こうなったら自分でタグを覚えて作ってやる。覚えてしまえばこっちのもんだ‥。 ということで、HTMLをひとつひとつ覚えていって、自分で作る覚悟を決めました。

さあ、それからが大変。
さっそく、もっと詳しい『タグ辞典』を買ってきて、暗号のようなアルファベットとの格闘が始まった。 ところが、長いこと生きてくると頭の中の空き容量が少なくなってるみたいで、 さっき覚えたはずなのに、「あれ? これは何だったかな」で調べて「あ、そうそう」。 「これはどうするんだったかなぁ」でまた調べて「あ、そうだった」のくり返し。
そんなふうにしながらでも、少しずつ自分の思い通りに作れていく画面を見ていると、けっこう面白くて、 その楽しさで何とか頑張ってこれたようです。
それに、覚えるといってもテストと違って、カンニングはいくらでもOKだから、何度もカンニングしているうちに いつのまにか覚えてしまう、という感じです。

 そんな中でひとつ気づいたのは、ソフトで作っていた時にたまにソースを 開いて見て、"あぁ、こうするにはこのタグをこういうふうに使うのか" と思ったことがいくらか頭に残っていたから、 そのぶん楽だったということ。 HTMLを文字から覚えようとすると、イメージが湧かないからなかなか覚えられないけど、 先に見本を見てからタグを見ると、かなり覚えやすい。
だからたとえば、自分が作りたいものをソフトでおおまかに作って、それからソースを開いてそのタグを見て本で調べる。 それで基本的なところを覚えてから、あとは細かく調整するタグを少しずつ覚えていけばいい。
いってみれば、作成ソフトをHTMLを覚える道具として活用する ということ。 これはひとつのアイデアかもしれない。
   ‥ ソースの開き方 ‥
( FrontPage Express の場合) : [表示]→[html]をクリック。
( ホームページなどのhtmlファイルの場合) : メニューバーの [表示]→[ソース]。または、画像の無いところで画面を右クリック→[ソースの表示] を選択。 キー操作なら[Alt]を押しながら[V]→[C] 。

 参考書は数冊使っていて、その中でも HTMLタグ辞典・( 古旗一浩著・技術評論社 ) は最新の情報も多くて詳しいけど、「スタイルシート」という別の記述方法も一緒に載っているので、初心者には かえってわかりにくい感じもありました。
その「スタイルシート」にはいいところがいろいろあって、そのひとつは文章の行間のスペースを自由に設定できる ということ。
普通の場合は、スペースが狭いからなんとなく読みにくいし、かといって1行空けると文字通り 間抜けな感じになってしまって、これも読みにくい。せっかくの内容も読みにくければ、それだけ伝わりにくいわけだから、 読みやすくするというのは大切なことで、行間を自由に調整できるというメリットは大きい。
私は最初のうちは普通のタグで書いていたけど、途中からスタイルシートを使って少しずつ書き直しました。 ただ、スタイルシートはレイアウトなどの見た目の設定をする方法なので、最初は基本的なタグから覚えていったほうが いいでしょう。

行間の設定の方法のひとつは、<div>・<p>・<table>などのタグの中に
style="line-height:**"と記入するだけです。** のところは pxpt の単位や %(パーセント) などで数値を記入します。文字の大きさを100%として、このページの本文では140%で設定しています。
全体の行間をまとめて設定するには、<head></head>の中に書き込む方法も ありますから、解説書やソースなどを参考にしてください。
それから「カラーコード一覧」、これは便利です。
これを見ながら数字やアルファベットを少しずつ変えていけば、自分の欲しい色が自由に作り出せる。ただし、印刷だから 色が必ずしも正確ではないけれど。
正確な色が分かるように【カラーサンブル】を作りました。
 タイトル ロゴやボタン・ライン・バナーの作成には、 グラフィックソフト「Happy Paint 98」を使っています。
フリーソフトもいろいろあるようだけど使い方がよくわからないし、 たまたま書店で「魅せる ロゴデザイン」(みはらさくら 著・インプレス発行 \2980) という本を見つけたので、その付属のソフトを使いました。 ただし、使用した日本語フォントは市販のグラフィックソフト「DRAW7」と「ジャストホーム」に付属していたもの。

実は最初は「DRAW7」で作ろうと考えて思い切って買ったものの、そこが初心者の悲しさ、 間違って『アップグレード』版を買ってしまった。 「アップクレード」の意味が解ってなくて、"グレードが高くなって、しかも値段が安いんだからこれはお買い得!!" てな感じで。その間違いに気がついたのはパッケージを開けて説明書を読み始めた時。
そこには『この製品は、Windows DRAW 5 および 6をお持ちの方のみご利用になれます・・・』 ふぇ〜 そぉかぁ、古いバージョンをグレードアップするからアップグレードなのかぁ‥ やってしまったよ〜 と天井を見上げてタメ息をついてもももう遅い。 改めてパッケージをよく見ると、確かに下の方に小さくその通り書いてある。
お〜い 初心者も買うんだからもっと分かりやすく大きく書いといてくれ〜 (ちゃんと見てないオマエが悪いんじゃ〜)。
あらためて買い直すのも悔しいから、せめて付属のフォントだけでも使ってやれ、というお粗末な一席でした。

トップタイトルの「 Misma 」のようなボリュームのあるロゴは、 とても私にはソフトで作れないから、自分でデザインしたものを木目模様の本物の壁紙に書いて、それを小さい カッターで切り抜き、紙に貼り付けたものをスキャナーで取り込んで縮小しました。
最初は版画で作ろうと思って板に彫って刷ってみたけれど、文字のエッジラインがはっきりしなくて、これはあえなく失敗。
サイト内のボタン・ライン・画像などで使えそうなものがあれば自由に使って下さい。 著作権を主張するつもりはありませんから。(右クリック→名前を付けて画像を保存)

 最後に、私が編集や画像加工に使っているフリーソフトを紹介しておきます。
1) TeraPad ‥「使い勝手のいいテキストエディター」で、 タグの色分け表示や、上書き保存とプレビューがワンクリックで出来たりと、「メモ帳」で編集するよりかなり便利です。 作者サイトからダウンロード出来ます。
2) Crescent Eve ‥ これも優秀なテキストエディターで、タグの文法チェックや各種ブラウザでの確認もできて、今はこれを使っています。作者サイト
3) JTrim ‥「動作が軽く、初心者でも手軽に扱えるフォトレタッチソフト」ということで、 いろんな画像加工機能が備わっていてオススメ。 作者サイト
4) SmaHey ‥「読み込んだ画像をできるだけ元のイメージに近い状態で拡大・縮小するソフト」で、 操作がシンプルで使いやすい。作者サイト
5) チビすな!! ‥ 画像を縮小するソフト。 画質を指定することが出来るし、複数画像の一括変換もOK。 作者サイト
6) Resize ‥ 画像を縮小するソフト。 画質だけでなくシャープネスも指定できるし、プログレッシブJPEGも可能。 作者サイト
 そのほかにもいろいろ便利なフリーソフトがありますから、 Vector 窓の杜 で、 自分の使いやすいものを探してみるといいでしょう。

 だいたいこんなところですけど、よくわからないことがあれば いつでも質問して下さい。ごく初歩的なことでかまいません。私のわかる範囲でしたら‥。 メール
TOPページへ