基礎知識

どうやって作る？

書く方法はいろいろある

「ホームページを作ろう」という謳い文句の踊っている本はめちゃくちゃたくさんあるし、この講座も含めて世界中の WWW には作り方を説明したページが、それこそ星の数ほどあります。（質はそれこそ天地以上の差がありますが。）それぞれのページはその作者の得意とする書き方で説明されていることがほとんどで、意外とそれぞれの作者は、似てはいても違う方法を採っていることが多いものです。

はじめに断っておきますが、「ホームページを作る方法なんていくらでもある」のです。これが絶対という方法はありません。予算（たぶんこれがいちばんの理由）や掛けられる時間、目指すホームページの完成度、その中に採用する技術、伝えたい情報、ソフトの好ききらい（これも相当大きい）によって、作り方はいくらでも変化します。

具体的には大きく３つに分けて

1. 外注する
2. インターネット上で素材を選ぶだけでホームページが作れるサービスを利用して自分で作る
3. 手元のソフトを使って自分で作る

とかですかね。３の自分で作る場合でも、

• ホームページも作れるワープロなど
• ホームページ専用だけどワープロのような感覚で見たままに作れる高度なソフト*1
• タグの入力を補助するテキストエディタ
• 普通のテキストエディタ（HTMLタグには色がつくなどの機能はほしい）

くらいに分けることができます。自分で作らないならともかく、自分で作る場合は、どんな高いソフトを使おうが、ホームページがどんな要素から成り立っているかを知らずに完成させることは難しいです。ホームページはワープロでＡ４ １枚のチラシを作るのとはやっぱり違います。（もちろんそういう作り方だけでいく方法もありますが。）

[ ↑ content ↑ ]

基本手順

ごく単純に書くと、ページ作りの手順はこんな感じです。

• ページのアイディアを練る
• ページを作る場所を決める
  （リンクなどの関係で場所がころころ変わると困る）
• 必要なパーツを揃える
  （画像やリンク先のページが存在していないとリンクを張ることができない）
• 作成ソフトでページを作り、ブラウザで見た目を確認する、のくり返し

残念ながら説教講座では具体的なアイディアの練り方は説明していませんし、画像の作り方なんかもほとんど扱っていません。本当はこういう前段階が大事なのだと思うのですが、こういうものの解説にはかなり気力が必要なのでやめておきます。*2ひとつだけ、「アウトラインプロセッサで書け！」を読んでみて、アウトラインプロセッサやアイディアプロセッサなどのソフトを使ってみてください。アイディアを練るときにはその手のソフトの力を借りると、案外簡単にできたりするもんです。

特にページやその中で使う画像や音などのデータを格納するフォルダは最初に決めてしまってください。あとで動かすといろんなリンクが切れてしまいます。また、ファイルとして存在していない画像やページにはリンクを張れませんので、これも気をつけてください。ない画像は貼れないし、ないページにもリンクできません。

また、表示の確認は絶対にブラウザで行ってください。作成ソフトとの見た目の違いにがっくりきたりしますから。できれば普段自分の使わないブラウザでもどう表示されるかに注意してください。

[ ↑ content ↑ ]

ホームページ＝ファイルがいっぱい

（「ホームページ」という呼び方はあまり好きではないのですが、まぁ、この呼び方で通そうと思います。）

本文とオブジェクト

ホームページというのはワープロの文書とは違います。ワープロの文章は、文字も図形もすべて１つのファイルに収められていますが、

ホームページでは、ホームページのファイルには基本となる文書だけが収められていて、写真やムービーなどは別なファイルで保存されています。

そして図を表示したい場合は図のファイル、音楽をならしたい場合は音のファイル、ムービーを見せたい場合にはムービーのファイルに「リンクを張る」ことで文書を作っていきます。

つまり、絵を２つ貼った文書をホームページで作るには、文書のファイル１つ、絵のファイル２つの、合計３つのファイルが必要になります。（SVGとかは今のところ考えていません。）今読んでもらっているこのページにはよくあるボタン画像などは使っていませんが、ボタンやアイコンをたくさん使えば使うだけ、ファイルの数はうなぎのぼりに増えていくのです。

また、「リンク」は、お互い（本文と画像など）のファイルの「位置」が重要です。「どこのなんというファイル」にリンクを張ったのかという情報が間違っていたらその画像や音にたどり着くことができなくなります。

だから大事なのはちゃんとファイルの場所を確定させることです。作りながらファイルをあちこちに移動させるとわけが分からなくなってしまいます。 相対ディレクトリ、絶対ディレクトリ、URLを使ってたくさんのファイルの管理をする必要が出てきます。ファイルというのは目に見える「物」とは違い、適切な分類にしたがってフォルダに収めていかないと、あっという間に何がどこにあったか分からなくってしまいます。

[ ↑ content ↑ ]

ファイル名の制限

ホームページというのはたくさんのファイルでできていますが、このたくさんのファイルの一つ一つをリソース（resource）と呼びます。そしてこの一つ一つの resource を特定するための方法を URL（Uniform Resource Locator = 統一的なリソース位置特定方法、うーん無理矢理。）と呼びます。

で、この URL に使える文字は基本的に英数字と一部の記号に限られます。つまり、日本語のファイル名は全然ダメなのです。

また、アルファベットの大文字小文字は、フツー区別されます。つまり、大文字と小文字が違えば完全に別なファイルです。この二つの大きな制限はフツーのパソコンユーザーにはかなり大きな落とし穴だと思います。Windows や MacOS では日本語は使えるし、ファイル名の大文字小文字は区別されないからです。

肝に銘じてください。

[ ↑ content ↑ ]

相対ディレクトリ、絶対ディレクトリ

ファイルとフォルダそのものについては「ファイルとフォルダ」を参照してもらうこととして、ここでは相対、絶対について説明します。相対、絶対なんて理科系の言葉はいやだと思うかもしれませんが、それほど難しいことではありません。なお、ここでは「フォルダ」も「ディレクトリ」も同じ意味を表すものとします。

さて、これを書いている時点ではもうちょっとしたら春かな、だいたい気温は５度〜10度くらいですか。ここで例えば「今日の最高気温は10度です。」というのが絶対的な温度、「昨日に比べて3度低いです。」が相対的な温度です。「基準が変わると相対的な温度は変わってしまう」のです。昨日より3度低いけど、平年より1度高い、などのように基準次第でプラスにもマイナスにも変化します。こんなことは絶対的な温度ではあり得ません。

もう一つ例を出しましょうか。相対、絶対についてよく説明に出てくるのは四角いブロックを使ったものでして、こんな感じです。

ここで、オレンジの人が205号室、緑の人が401号室にいますね。この部屋の番号は、この建物の作りをまったく知らない人にでも確実に説明できます。これが普通に言う住所ですが、別な言い方をすると絶対的な表現です。上から見ようが下から見ようが部屋番号は一緒ですから。 （オレンジの人が上から４番目、右から１番目、と言ってしまいがちですが、そりゃ基準が屋上と右の壁になっただけで、「相対」です。「原点」のある座標とは違いますからね。）

ところが、そうだな、あなたがルパン三世かスパイダーマンで、緑の人の部屋にいるとします。これからオレンジの人の部屋に、ベランダから壁づたいで忍び込もうと思います。そうなると部屋番号を知らずに移動しなきゃいけないわけです。（すっげー無理な設定だ(^^;）このとき、「ここから右に３軒、下に２軒移動したところだよ」と言うしかないですが、これが相対的な表現です。

さて、話をフォルダに戻すと、下のような具合になります。

/ ce contents club toast rice tips faster larger

フォルダってのは住所とかマンションのような作りとは違って、階層構造になっていますのでもう少し簡単です。自分より上位の階層、自分と同じ階層、自分より下位の階層ですね。あとはその組み合わせ、くり返しです。基本は

相対ディレクトリの指定方法

自分の上位の階層	../フォルダ名 or ファイル名
自分と同じ階層	./フォルダ名 or ファイル名
自分の下位の階層	フォルダ名 or ファイル名/フォルダ名 or ファイル名

こうなってまして、例えば club というフォルダの中の文書からリンクを張るとしたら、それぞれのフォルダは上のように書きます。図を参照する場合は青い文字を、テキストの箇条書きを参照する場合は title 属性をチェックしてください。さっきから何気なく使っている /（スラッシュ）はフォルダの区切り文字です。Windwos では \ と、MacOS では : と同じ意味です。WWW ではその発祥の地である UNIX の / を区切り文字として使います。

ちょっと面倒なのは、自分の隣のフォルダに行くにも、一度上の階層に上ってから降りてこなきゃいけないということです。マンションと違って同じ階を行ったり来たりする廊下やベランダはないのです。

[ ↑ content ↑ ]

ハイパーリンク

さっきから説明もせずになにげな〜く使っていたリンクという言葉ですが、今さら説明要らないっしょ(笑) って、それはあんまりなので「インターネットする」って？のWWWの項をとりあえず参照してください。なんとなく分かりました？ それでオッケーです(笑)

簡単に言うと、図のように文と文、文と写真や音など、いろんなものが区別なく関連付けられているってことです。しかも自分の作ったものだけでなく、およそインターネット上に「公開」されているすべてのもの（文章だろうが映画だろうがすべて）に関連付けることができる。これがハイパーリンクです。

リンク（link）ってのは”連結”とか”連接”っていう意味で、「何かと何かを結びつけること」なのですが、普通は何かと何かって言ったって、限度があるでしょ？ ネジの大きさが合わないとか、どうしても形が合わないとか。奈良の大仏とイギリスの片田舎の駅とか。でも、そんな無茶が通ってしまうのがハイパーなリンクです。

これはあとで基本要素編の中でもう一度触れます。

[ ↑ content ↑ ]

違う！

けっこう、ワープロで文章を書く、お絵描きソフトで絵を描くのとは違います。

いちばん意識してほしいのは、「今自分が見ている通りにみんなが見えるわけじゃない」ってことです。なぜって、世の中にある、WWW をブラウズする環境はみんな違うんです。テレビや映画のようには規格が決まっているわけではないのです。

作るソフトと見るソフトは違う

みんながそのホームページを見るときには、あなたが作るために使っているソフトでは見ていません。ホームページビルダーや PageMill では見ていないのです。Internet Explorer や Netscape で、あるいは PDA で見ている、音声ソフトで聞いているのです。

そこで、作るときも同じ要領で確認した方がよいということになります。できあがりはブラウザで確認しましょう。ホームページ作成ソフトでできあがりを確認してはいけません。これは本当に基本中の基本です。

ホームページ作成ソフトもどんどん改良されているので、ブラウザで見たときと同じように作ることができるようになっていますが、別なソフトであることには変わりありません。やっぱり見るソフトで見ないと、本当の確認にはなりません。

[ ↑ content ↑ ]

見る環境も人によって違う

幸か不幸か WWW のブラウズ環境はみんな違います。ワープロで印刷した A4 のプリントは拡大コピーをしない限り A4 のままですが、ホームページの場合はそれにどうやってアクセスするのか、ユーザーが自由に選べるのです。

これは大きさだけでなく、ディスプレイの色あいや明るさにも当てはまることでして、早い話、まったく同じパソコンでまったく同じ設定でない限り、少なからず作り手の意図とは違う見え方をしてしまうのです。そのため、こんなことに気をつける必要があります。

• あんまり大きく作らない

  大きな画面で小さいページを表示するのは問題なくできますが、小さい画面で大きいページを表示するには何度もスクロールさせなければならず、かなり見にくいです。

  本当はどんな大きさで見ても問題なく閲覧できるように作るのが理想的ですが、画像を使うとどうしても大きさに制限ができてしまいますし、レイアウトによって情報の伝わりやすさも変わりますので、完全に大きさを無視するのはなかなか難しい話です。

• 明るさ、暗さに気をつける

  自分のディスプレイと相手のディスプレイの明るさ、暗さはまず違います。つぶれそうでつぶれない黒やとびそうでとばない白などのシビアな明るさを使うと、相手のディスプレイではあっけなくつぶれたりとんだりしますので、こうしたものは避けましょう。

• 色合いに気をつける

  全般的に Windows は Mac に比べて発色が派手で赤みが強くなっています。また、CRT（ブラウン管）の方が液晶よりも鮮やかさが強いですね。ということは、例えばデスクトップ型の Windows パソコンで作ったページは、ノートパソコンや Mac ではもう少し穏やかな色で見えることになります。このとき、作り手が自分の画面ですごく微妙な色あいを使って、例えば地の文とリンクの文字の色を決めた場合、読み手はどこが地の文でどこがリンクなのか分からなくなったりします。できるだけこうした色使いは避けましょう。

  さらに言えば、モノクロの環境では色の情報は意味がありません。色に頼ったナビゲーション（例：「青い文字をクリックしてください。」）などは意味がないので注意しましょう。

• 特殊なフォントは使わない

  ホームページに限らないのですが、自分の使っているフォントと相手の用意しているフォントが合わないと、正しく意図どおりに文書を表示することができません。幸い、ホームページ作りではそういう文字を画像にして貼り付けるというテクニックが定着しているので、こうした方法を利用するようにしましょう。（画像を使った場合は代替テキストを忘れずに。）

• 見た目に頼らない

  もう究極ですね(^^; これは例えば画像が表示できないブラウザ、あるいはわざとオフにしてある場合、モノクロの環境、ページを音声で聞いている場合などに対する配慮です。これが完全に実現できた場合は上の工夫ははっきり言って全部不要です。

  方法はまず、見た目に関する情報をすべて HTML から追い出して、見た目をスタイルシートで指定する。こうするとスタイルシートに対応していない環境でも肝心の情報を入手するのに支障が出ません。で、HTML で記述している本文の部分でも見た目に依存した情報を用いない。例えば「赤い文字をクリックしてください。」という表現は「赤」が色に依存しているのでモノクロ環境、音声環境では無意味ですし、私もよく使いますが、顔文字もそうです。音声環境では無意味です。こういう表現は使わないようにします。

  ただ、これを完全に実現するとめちゃくちゃ素っ気ないページができあがります。果たして魅力的なサイトなのかというと、疑問と言わざるを得ません。どれだけ有用な情報が様々な環境に配慮して公開されていても、そのページを見たい、読みたいと思わせる雰囲気作りは外せませんから、完全に見た目に頼らないサイト作りは現実にはかなり難しいです。

• マウスに頼らない

  「クリック」はマウスを使っていない環境では無意味なのでこうした表現を避ける、ということです。パソコンではなく PDA などの携帯端末にはマウスはありませんし、もちろん携帯電話でもマウスは使いません。「ポインタを合わせると文字がポップアップ」なんてのもそうですね。

この辺は「よくチェックしろ編」の「アクセシビリティチェック」も参考にしてみてください。

[ ↑ content ↑ ]

画像形式

画像形式は「画像形式について」の「Webに使える形式」を参照してください。

オーディオ形式

しばらく待ってくださいm(..;m mp3, wav, aiff, au とかですね。

ストリーミング

ムービー形式

しばらく待ってくださいm(..;m（あーなんかこのページって、かなりむちゃくちゃ。）mpeg, real, quicktime などです。

ストリーミング

[ ↑ content ↑ ]

Web サーバと FTP

ホームページという形のものを作ることは、別にそれほど特別なことではなくて、作るだけならけっこう簡単にできるんです。ところが、これを「みんなに見せる」にはちょっと特別な仕掛けが必要です。

「『インターネットする』って？」にも書きましたが、インターネットは基本的にクライアント／サーバシステムというやつになってまして、見せたい情報は WWW サーバというものの上に載せておかないと、世界に向けて発信はできないのです。

そのサーバにデータを送るには FTP という方法を使います。図にするとこうですね。

サーバが FTP という方法であなたのパソコンとデータのやりとりをし、WWW（正確には HTTP）という方法でみんなにデータを配ります。

あなたのパソコンのデータは、サーバに送らないと、みんなに見せることができないんです。実は作っておしまいじゃないんです。

FTP についての詳細は「FTPの話。」を参照してください。

[ ↑ content ↑ ]

脚注

*1

こうした見たまま作れる Web 作成ソフトには HTML の本質をまったく理解していないひどいソフトが多かったのですが、それでも使いやすさ、作りやすさという点においてこうしたソフトは無視できません。個人的には初心者でも安心して作れるソフトが増えることはいいことだと思います。ただ、手軽に全世界に発信できる WWW だからこそ、こうした初心者向けソフトのレベルアップは非常に切実に期待します。（2001.現在の最新版ではそこそこよくなってきている様子。まだまだな感じですが。）

例えば、

• 見た目の指定は何も考えずにスタイルシートを使うようにする
• 似たような効果を指定する場合はその意図を問う仕掛けを用意し、適切に HTML の要素をクラス分けできるようにする
• スタイルシートを利用した”魅力的な”テンプレートを充実させる

なんかの改善が必要でしょうか。画像とか使うのがメインになったりしている場合はスタイルシートの恩恵もずいぶん薄れてしまいますが…。あとはそうだな、ページデザイン、サイト管理の機能のほかにサイト設計などのいやでも構造を意識する機能が充実したら、少しは文書構造を意識してもらえるようになるかもしれない。

まーたいていのワープロユーザーが長文なんか書かないのと同じように、HTML が文書構造を起点としている段階で初心者には向かないのかもしれませんし、だいたい伝統的な日本語では文書構造を明確にする書き方ってのがそもそも馴染みがないですよね。箇条書きすら否定するドアホな縦書き社会も確実に存在するわけですから :-P

*2

本当は小手先だけの HTML 講座だの JavaScript 講座だの、そして本当に正しい HTML を自分で書けるようになることよりも、どういう内容にするのか、それをどのように伝えるのか、こういう、アイディアやコンセプトに関する部分の方が大事だと思うのですが、それはすでにホームページ作成講座の範疇を超えてしまうのですよね。うむむ。難しいですな。

個人的にはただの猿真似サイトもきらいですが、HTML やらホームページ作成しか内容のないサイトもなんだか本末転倒な感じがして寂しさを覚えます。もちろん、本当に参考になるサイトもあるんで、そういうサイトは寂しさどころか感謝と感動を覚えているのですが…。

具体的なアイディアの練り方はツールの利用もありますが、KJ法とかブレインストーミングとか、そういった単語を扱っている本や Web を探すといいと思います。あとはレポートの書き方系とか。最近では超発想法でしたっけ？ 古本屋で新書やハードカバーを漁るとこの手の本がけっこうあると思います。分野としてはビジネスや学術関係にこういうものが多いと思います。資料や情報をどう整理し、そこからどうやって発想を生み出すか、発想を整理するか、ということですね。

もちろん、ただ日常を連ねる Web 日記もあるにはありますが、さすがに最近（2002.01.）それは流行らないでしょう。雑文祭なんかもあり、素人でも文章のレベルはどんどん上がっていますしね。

[ ↑ content ↑ ]