魅力的なホームページの作り方

 前へ→ Part1:パソコンとインターネットの使い方へ 

 ■私はなぜホームページを作ったのか 


きっかけは入院でした。
5年前人間ドックで胃にガンができたことが分かり23日間入院しました。
早期がんで、切除もEMRという内視鏡(胃カメラ)を使って取る方法だっ
たのでおなかを割かれることもなく、したがって痛みもなく、体調も全然
悪くなることもなく、手術後は自分自身も全く不安を感じることなく退院
できました。
せっかくガンになったのだから、この経験をホームページに出せば、役に
立つこともあるのではないかと考えたのです。
もっとも、仕事の面でもシステム部門に長くいたので、インターネットに
興味もありました。会社でもイントラネットが立ち上がり、社内メールも
使われ始めましたが、回りの連中でホームページを作っている人は全くい
なかったことも理由のひとつです。
この世界、30分でも早く勉強すれば、分かったような顔をして先輩風を
吹かせられるくらい底が浅いというか変化がすさまじいというか、それ程
ベテランがいない世界です。
とにかく、会社で誰も知らない知識を最初に習得するというのは気持ちが
いいものです。良く分からないときが一番面白いと思います。
教わる先生がいないという状況は、入社以来コンピュータを始めたときも
そうでしたので、気になりませんでした。
お金をかけずに全部自力でやると決めましたが、これは当時子供たち3人
が全員私立の学校に行っていたこともあり、お金をかけず自力でやるしか
なかったという事情もあります。
ホームページを作ってみると、意外なことに色々な人から反響があり、段
々色気が出てデザインに凝ったものを作るようになりました。
こんな経験から、このページではHTMLの解説ではない、作っていると
き感じた疑問や、中々理解できなかったことなどをその状況を交えながら
解説してみたいと思います。

     目   次

 Part2:魅力的なホームページの作り方 


■ ホームページを作るとどんなことが起きるか?

  ・老若男女幅広い人からの反応
とにかく、思いがけない所、思いがけない人からいろいろな反応があります。
やはり中高年からのメールが多いのですが、若い女性やかなりのご老人まで実に様々な
方からの反応があります。
卒業以来、音信不通だった先輩や後輩からも連絡が入り、旧交を温めることができたり、
全く見ず知らずの方とお付き合いができたりします。
また、本を書きませんかとか、テレビに出ませんかと言った誘いや、映画の試写会への
招待もありました。
滅多にありませんが、中には敵意丸出しのメールを送ってくる人もいますが、その場合
は受け流して無視することにしており、今のところ実害はありません。
下記は、私のホームページを見た方からのお便りの一部です。
2001年01月18日
香港のJudy Manさんより 
Subarashii-shiryou-arigato-gozaimashita! ani (45sai)-ha-98nen-ni-igan-ni-natta. Zanende-saikin-saihatsu-desuta. ishasen-ni-yoruto-ato-han-toshi-no-inoshi-nokota. Dakara,iroirona-gen-no-chiryou-houhou-ha-shiritaidesu.
2001年01月18日
埼玉県三郷市の男性より 


4,5日前になりますが、絵とエッセイを訪ねていまして
吉田さんのページを発見しました。
意外にも癌の記事があり、私も少々気になる部分をぶら下げて
おりました。痛みはありませんが、どんどん肥大化しています。
医者に「貴方は癌です」と言われたとき、対応が出来ないだろ
うという不安を持っていました。
貴方の記事に接し、早速医者を訪ねまして、ただ単に水をぶら
下げていたことが判りました。
有難うございました、ページを忘れません。

 
2001年01月17日
カナダのTim Craigさんより

I like your artistic home page.
 Good paintings, good music...
2001年01月11日
石川県河北郡の男性より 

昨年の12月20日に受けた人間ドック(40歳以降年・1回)
で胃癌と診断されて、昨日から入院・検査中です
悪性リンパ腫の疑いがあったのですが4層にすこしかかる癌が
2箇所あったとのことです
まったく自覚症状が無かったのが、発見できたことは奇蹟に近
いかもしれません
今週末も自宅にいったん帰っても良いとのことです
40歳、まだまだこれからですから、頑張って直そうと思います
2000年12月14日
大分県佐伯市の男性より 

個人のホームページでこんな充実したのは、はじめてです。
インターネットはじめて1年未満ですが、情報を受けるだ
けから、発信したいと思っている58歳の自営業です。
ワープロはそこそこできます。
自分でホームページ作れるのでしょうか?

また、リクルートが出版しているインターネット入門雑誌「あちゃら」99年7月号に紹介されました。

さらに、ウォールストリートジャーナル(アジア版)の取材も受けました。2002-4-17

■ どうやって勉強すれば良いか?

取っ付き難さの解消法はないか?
 結論から言うとありません。
 私も長いことコンピュータに付き合っていますが、マア、カタカナ語
 がやたら出てくるのにはウンザリします。日本語が無いのだから仕方
 ない面もありますが、気になる人はそれだけで禁断症状を起こします。
 ですからまず、ホームページの作り方を全然知らない人が本を買って
 作ろうとしたら読むだけでイヤになる確率は宝くじに当たらない確率
 と同じくらいではないかと思います。
 「サルでも分かる」から最近は「猫でも分かる」と宣伝しているのに
 分からなかったらそれこそ自己嫌悪に陥ります。
 一々わからないことを気にしないでどんなことが書いてあったくらい
 をうっすらと覚える程度で読み飛ばせればまだいいのですが・・・
 そんなことは私の気性に合わない。大事なところにはアンダーライン
  を引いてノートもとってひとつずつ理解していくのが私の勉強法なん
  だと言う人はそのようにされるとよいでしょう。
 ほとんどの本は分からない人には分からないようにしか書いてありま
  せん。
 少し評判のよい本は分かる人には分かるか、分かっている人には分か
  るというのが一般的だと私は思いますが、「艱難辛苦汝を玉にす」の
  信条を放擲しろとは恐れ多くて言うことはできません。

変な記号も困り者
カタカナ語に加えて気に食わないのは変な記号です。
_アンダースコア _
何で素直にハイフンを使わないんだろう・・
私のメールアドレスや、ホームページのURLにもこのアンダースコア
なるものが付いてます。corge_yoshida
_はShift + ろ(右下のキー)で入力します。
(「Shift」キーを押しながら「ろ」キーを押す動作をShift + ろと表します)

~ニョロニョロマーク ~これの読み方はチルダー
私の最初のホームページはhttp://asahi-net.or.jp/~im7k-ysdでした。
このニョロニョロマークが付いているおかげで、沢山の人から見ることが
できないとクレームを頂きました。
~はShift + ∧(右上のキー)で入力します。
どうしてこんなへんてこな人を困らせるような記号をあえて使うのか理解
できません。これ以外の記号で読み方がわからないものがある場合はここ
を見てください。
まあ、コンピュータ屋という種族は人より機械が好きという奇人・変人の
集団だと思ってください。

習うより慣れろ ホームページ作成ソフトなんか使わない。
 マジメな勉強家の人は取っ付き難さもやり甲斐のうちでしょうがあまり
 真面目でない、どちらかというと楽をしたい方にとって一番いいのは身
 近な人に教えてもらうことです。
 分からないことは人によって違うのですから、その人の疑問に答えてく
 れる人が身近にいれば一番理想的です。
 でもそんな人はいないとか一々聞くのは気が引けるという人はお金を出
 して学校に行くか、先生に来てもらうかしかありません。
 まさに知識は金なりです。そんな訳で金もない、少しは有るけどもった
 いないという人は途方に暮れてしまうことになります。
 ここは自己投資ということで2万円くらいなら出してもいいという人は
 ホームページビルダー(IBM製のホームページ作成ソフト\14,800)
 で作ればチョー簡単・・かも
 でも私はホームページ作成ソフトなんか使いません。
 確かにこういうソフトを使えばHTMLなどという判じ物が分からなく
 ても結構見栄えのいい作品ができます。
 見栄えのいいのができれば余は満足じゃという人はこれから先は読んで
 も無駄ですからご退散ください。
 作るからにはホームページはどんな仕組みで動くのか、プログラムのど
 こをどう変えるとどんな画面ができるのかといったことに興味があり、
 ある程度理解したい。それにしても金も出さず、人にも聞かず、本も読
 まずそれでいて楽にホームページを作りたいというケチで、欲張りで、
 ノー天気な人はお付き合いください。
Word、Excelからwebページを作らない
 WordやExcelなどは『webページとして保存』をクリックすれ
 ば簡単にhtmlに変換してくれますが、後のことを考えると考えもの
 です。
 ある文章をhtmlにしたいとき、メモ帳で自分でhtmlを作るのとWord
 の『webページとして保存』で作るのとでは大きな違いが有ります。
 ソースを見比べてみてください。
 どうしてプログラムの大きさがこんなに違うのかびっくりすると思いま
 す。
 
 上段のmajime.htmlこれはメモ帳で作ったもの、<body>と</body>で囲ま
 れた部分が本文です。
 下段のmajime.htmこれはWordの『webページとして保存』で作った
 ものです。
 『webページとして保存』で作ると本文がどこにあるのか分からないぐら
 いタグが一杯付いてきます。
 メモ帳で作ると31行(本文が22行)でできますがWordの『webペー
 ジとして保存』で作ると、なんと270行近くになってしまいます。
 これでは後からちょっと直そうと思っても大変なので、結局Wordを
 直して『webページとして保存』で作り直しということになります。
 見栄えはまったく変わりません。

タグなんて覚えないでOK
 ホームページを作るためにはHTML(Hiper Text Markup Language)という
 言葉を使う必要があります。
 HTMLは、ホームページを実現するために考えられた言語であり、見出し
 や箇条書きなどの基本的な文章構造や、別の文章などへのリンクの設定
 などを行うことができます。
 HTML ではこれらの制御を、 <  や  > で囲まれた「タグ」という命
 令で行います。
 タグは通常2つが対になっており、開始タグである<tagname>から終了
 タグである</tagname>の2つで囲まれた部分が、tagnameで指定された
 意味を持つことになります。
 たとえば<table>と</table>で囲まれた部分は、表の部分であるとい
 うことを表します。(tableがtagnameです。)
  ホームページを作るのが職業の人なら毎日やっていればいやでもタグを
 覚えてしまうでしょう。でも週のうち1〜2回ホームページをいじって
 いる程度ではなかなか覚えられません。団塊の世代ともなると3歩歩け
 ばもう忘れるのですから始末に負えません。
 タグの使い方を覚えてからホームページを作ろうなどと考えたら挫折す
 るだけです。ざっと眺めて、どんな使い方のできるタグがあるのか、お
 ぼろげに気に留める程度で十分です。
 何しろあなたが今使っているパソコンで、巨大な百科事典と辞書がすぐ
 使えるのですから、あまり性能の良くない脳ミソに頼ることはありませ
 ん。

真似るが勝ち
 物まねの利点はたくさんあります。そしてインターネットの世界は物ま
 ねするには最適な環境なのです。
 何をやるにも物まねからというのは日本の専売特許ではありません。
 アメリカだって何年か前は日本にやられて、なぜやられたかを勉強して
 まねしたのです。尤も真似したと言うとみっともないのでベンチマーク
 という言葉を使っていますが、要するに一番うまくやっているところを
 お手本に自分たちのやり方を変えていったのです。
 猿真似と違うのはお手本を見て自分に合った方法を見つけ出した点です
 がホームページもまさにこの精神でやるのが一番だと思います。
 何かアイディアが浮かんで、こんなホームページを作りたいなと思った
 らそのイメージに近いホームページを探し、先ずは「名前をつけて保存」
 を選びディスクトップにでも置いてみましょう。
 逆に何の気なしに覗いたホームページがすごく気に入って、こんな風に
 作れればいいなと思ったらこれもまた自分のパソコンに保存してしまい
 ましょう。
 そして自分のパソコンに保存した他人のホームページの画面ファイルや
 文章を変え色彩も自分好みにしてみます。
 音楽なんかも変えてみるといいですね。
 私のホームページのトップページはこうやって作ったものがたくさんあ
 ります。

お手本を探そう(ベンチマーク)
 たとえばこの作品ですがこれは雑誌にすば
らしいページとして紹介され
 ていたmalevoleという会社のHPとそれより前ネットサーフィンで見つ
 けた会社のHPを合成し、真似たものです。
 このmalevole社のHPは中々凝っていてちょっとコピーして使うという
 訳にはいきませんでしたが、色々いじくりまわしているうちに仕掛けが
 だんだん分かって取り込むことができました。
 商用でこんなことをしたら法律に触れるのかもしれませんが個人のHP
 なら多分許してくれるでしょう。
 自慢じゃありませんが私はjavaなんて殆ど分かりません。タグもあ
 まり覚えていません。絵心は有っても絵の才能も有りません。
 ただひたすら他人様のスキルを拝借して何とか自分の世界を作っている
 つもりになっています。
 私はつい最近までCSSというものも知りませんでした。
 CSSを知ったきっかけも参考にしようと思ったページで使っていたか
 らです。そこでgoogleを使ってCSSってなんだろうと調べてみました。
 その結果、これは勉強してみる価値があるなと思い本屋へ行って参考書
 とかCSSを使った事例を紹介している雑誌を購入しました。
 そこでmalevoleをみつけたわけです。
  同じ本にイギリスの女優Kate Haywardのホームページもありました。
 このページもなかなか洗練された粋な味が出ているページです。

自分のパソコンへ取り込もう
 気に入ったHPが見つかったら、画面左上の『ファイル』をクリックして
 『名前をつけて保存』で先ずはディスクトップに保存します。 
 そうすると、ディスクトップ上にgifなどが入ったフォルダー
 とhtmlファイルが作られます。
 このKate Haywardのホームページはかなり凝った作りになって
 いて、コピーしたプログラムを動かしてもオリジナル通りに動
 きません。(初心者向きではありません。)
 最初はもっとシンプルなページを選ぶ方が良いでしょう。
 通常はここで作成されたhtmlファイルをダブルクリックするとオリジナルと
  同じ画面を見ることができます。
 もし、htmlを開いても画像が一部かけていたり、オリジナルと違う場合は
 ローカル ディスクのDocuments and Settings Local Settings
 Temporary Internet Filesを開き該当するファイルのgifやjpgなどを先ほ
 どのフォルダーにコピーするとオリジナルと同じ画面が出てきます。
 このとき「インターネットアドレス」をクリックして、アドレス順にして
 おくと必要なものがすぐ探せて便利です。
 ただ、コピーするとファイルネームの後に[1]という余計なものがついてく
 るのでこれを削除する必要があります。

好みに合うよう、いじくりまわそう
 さて、自分のパソコンへ目指す作品を取り組んだら、ソースリストを表示し
 て下さい。左上の『表示』→『ソース』をクリックします。
 画面の半分にソースを表示し、ソースのタグやgif、jpgなどのファイルを変
 えてみたり削ってみたりして、上書き保存します。


 この後HPの更新ボタン  を押すと、変更した結果がすぐ反映されます。
 タグの意味が分からなかったら、とほほさんのHTMLリファレンスがお勧め
 です。それでも分からない時は、googleにその分からない言葉**を入れ
 て**とはで検索すると、多分すぐ分かると思います。
 
 こうやって<B>と言うタグを削ったらとか、入れてみたらとか、いった具
 合に試すと実感としてタグの意味がつかめてきます。

CDの付いたパソコン雑誌を時々買う
 新しい知識や情報を入れるにはネットサーフィンだけでなく時々CDの
 付いたパソコン雑誌を買うことも必要です。CDの中には最新のブラウ
 ザとか結構役に立つフリーソフトなどが入っています。
 フリーソフトを手にいれる方法としては
 「窓の杜」http://www.forest.impress.co.jp/とか
 「vector」http://www.vector.co.jp/などで探すこともできます。
 ウエブには無数のソフトが登録されているので色々使ってみて気に入っ
 たものを残すようにすればよいと思います。
目次へ
■ ホームページを作るための準備作業(環境を整える)
何事をはじめるにも段取り作業をやっておくのと、やっておかないのでは実際に
仕事をやり始めてみると、大きな効率の差となって現れてきます。
良く使うものは、すぐ使えるように手元に整備しておくのが一番です。
パソコンの基本的な環境を作る。
さて、自分で作ったホームページのプログラム(html file)や画像などはどこかに
保存しておく必要があります。
保存するフォルダーの名前は、通常自由につけられますが、プロバイダーにアップ
ロードする時、フォルダー名が決められているケースがありますので、そうであれ
ばその名前にしておく方が良いでしょう。ここでは「homepage」という名前のフォ
ルダを作ることにします。
・「homepage」という名前のフォルダを作る

『マイコンピュータ』→『フォルダ』をクリック 『ローカルディスク』(C)を選択 『ファイル』→『新規作成』→『フォルダ』を クリック 『新しいフォルダ』の名前をhomepageにする。
・拡張子を表示できるように設定を変える 拡張子とはファイルの種類を示す役目を持ったものです。index.htmlやgazo.gifなど赤 い字の部分が拡張子です。 ファイルの種類を示す拡張子が表示されないと、そのファイルがhtmlなのか画像なのか、 はたまた音楽なのかが分からないので後々大変不便です。 [WindowsXP の場合] 「マイコンピュータ」を開き、「表示」→ 「詳細」を選ぶ。 「マイコンピューター」→「表示」→ 「ツール」→「フォルダオプション」で 「表示」タブの「詳細設定」で「登録され ているファイルの拡張子は表示しない」の チェックを外し、「すべ てのファイルと フォルダを表示」をチェックする。 WindowsXPではフォルダーの内容はデフォルトでアイコンで表示するようになっていますが 私はこれに馴染めないのでFasieというフリーソフトを使って 表示がいつも「詳細」にな るように設定しています。 ・良く使うソフトをすぐ使えるようにしておく ホームページを作る時、頻繁に行う作業、良く使うものをあげてみます。 1.タグの使い方を調べる 2.他のHPや資料を探す 3.どんな色を使うか検討する 4.画像を使う、作る(写真を含む) 5.バックグラウンドミュージックを選ぶ 6.プロバイダーのサーバーへアップロードする ざっと上げてみると上記のようになりますが、良く使うソフトは画面の一番左下、スタート ボタンの右横のタスクバーの中にアイコンとして入れておくと便利です。 例えばGoogleを入れるにはグーグルの画面を表示し、左上のアイコンを左クリックしたまま 画面一番下のタスクバーまでもって行き、指を離せばそこにグーグルのアイコンができます。 私のパソコンのタスクバー 《作業手順例》 1.『フォルダー表示』をクリックすると[homepage]フォルダーが開きます。 2.htmlのヘッダー部分や最後の部分だけのテンプレートのようなファイルを読み込み、   ソースを表示させます。(このような雛形をいくつか作っておくと便利です。) 3.名前を変えて保存で、*****.htmlとして保存します。この後htmlの中身を作成します。 4.画像を使いたいとき、以前のものを利用するなら、[homepage]フォルダーをドラッグし   て[Linar]のところへ持っていき画像を表示させて選択します。 5.新規に作るのなら『ペイント』か『パワーポイント』を開いて画像を作ります。 6.ディスクトップ上にある資料やソフトを使いたい時は一番左の表示ボタンを押します。 7.htmlが完成したらFTPソフトを起動してアップロードします。 ざっとこのような作業を、このタスクバーを使って効率的に行います。 1.タグの使い方を調べる 一体どのくらいの種類のタグがあるのか分かりませんが、100種類有るとしてもその使い 方を全部覚えるのは至難の技ですし、そんなことより中身に精力を使う方が合理的です。 本を買ってくるのも良いですが、とほほのWWW入門は、とても分かりやすくて使い勝手が 良いと思います。タグの使い方だけをすぐ見たい場合はその中のHTMLリファレンスが良いで しょう。 このほかACESSRというページもあります。 2.他のHPや資料を探す ホームページを作っていると、前に作ったものの一部が利用できる場合が意外と多い ものです。また作っている最中にこれで良かったかなとか、記憶があいまいなものを 確かめる必要を感じることが多いものです。 こんな時、Googleや目的のフォルダーがさっと出てくるようにしておくと便利です。 3.どんな色を使うか検討する ホームページのバックグラウンドに使う色や、テーブルのセルに使う色など16進数 やRGBで指定するのはかなりの違和感と言うか、官能的にも馴染むことはできませ ん。やはり、色は目で見て感じるものであって、数字で表現するものではありません。 こんな時表現したい色を探す道具として、C_MakerというフリーソフトはRGBのバー を動かすことで色調の変化を体感できるので、私は良く使っています。 それ以外では、色見本の館というページも、色の分類がうまく、欲しい色を探すのに 重宝しています。 4.画像を使う、作る(写真を含む)  例えば「VIX」というフリーソフトは溜め込んだ画像データを探すときに大変便利な  ソフトです。  フォルダーを「VIX」のアイコンに重ねるだけで一覧性があるし、スライドショーも  できるので自分のイメージに合った画像を選ぶとき大変重宝しています。  同じようなソフトに「Linar」というものもあります。 「VIX」はjpgやgifにも対応していて便利ですが_CATALOG.VIXという結構大きなファイ  ルを作るのが欠点です。  GIMPは、写真の編集や画像の構成、そして画像の作成に適した、フリーで配布されて  いるプログラムです。  GIFアニメーションを作ったり、背景を透明にしたい場合はGIXがお勧めです。  このソフトはシェアウエアですが1ライセンス ¥2,730(税込)と安いので気楽  に購入できます。価格以上の価値が有ると思います。  そのほか、ペイントやパワーポイントも、すぐ使えるようにアイコンを作っておくと  便利です。 5.バックグラウンドミュージックを選ぶ 私のHPを見て、音楽が耳障りだからやめるようにとメールをくれた人がいます。・・ うるさければミュートにするなり、そもそも見なければいいと思います。 会社では音を出しながら見ることはできませんが、自宅で見るときは音無しより音楽が流 れている方が楽しいと、作者である私は思うのです。 BGMに使う音楽は通常midi形式のものを使います。ネット上には数多くのmidiファイル が公開されています。著作権の問題を確認してこれらの作品を使うことをお勧めします。 midiファイルは音の高低、強弱、長短、などの情報を数値化して入れているので、ほかの 音楽ファイルに比べると、サイズを小さくすることができるのだそうです。 最近はやりの通信カラオケなども、このmidiを使っているのが多いそうです。 ヤマハのHPを覗くと、MIDIに関する知識を得ることができ、MIDI Dataを買うこともで きます。またヤマハ以外でもショパンのMIDI全集とか有名な作曲家の曲もたくさんMIDI化 されています。ここのサイトもショパン漬けです。 その他、クラシックのMIDIを探すのならこのサイトを覗いてみてください。 6.プロバイダーのサーバーへアップロードする ホームページを作って、公開しようと思うと、htmlをプロバイダーのサーバーへアップロ ードする必要があります。 サーバに登録して、自分専用の保管場所を作ってそこに、ファイルや画像、音楽データな どを置くことによって沢山の人が見られるようになるわけです。 アップロードするためには、FTP と呼ばれる種類のソフトを使います。 このソフトも、多くの種類がありますが、私はFFFTPというフリーソフトを使っています。 日本語が使え操作も分かりやすいソフトです。 アップロードについて詳しく知りたい場合はここをクリックしてください。
目次へ
■ 作るためにあったら便利な機器
・デジカメ
ホームページで使うだけなら35万画素で十分です。最近は200万画素以上が普通に
なっていますが、ホームページで使う場合、容量が大きくなりすぎかえって不都合です。
カメラからのデータをそのまま使わず、サイズを小さくして使うようにしてください。

・スキャナー
これもホームページで使うだけなら、一番安いもので十分です。
使う頻度もそれほど高くはないので、コストパフォーマンスを重視する方が合理的です。
スキャナーをOCRとして使い、新聞原稿などをテキストに変換するための道具とする
こともできます。
目次へ
■ 最低限理解する必要があること
ハイパーリンクについて
HTMLの一番の特徴は情報のある所へすぐ飛んで行けることだと思います。
【ここ】を押してみて下さい。(飛んだら左上のを押してすぐ戻ってきて下さい)
【ここ】を押したら画面がKennedy Libraryに変わりましたが、これはその文字のところ
に飛び先を埋め込んで指定しているからです。
この飛び先に他の人が作ったデータのあり場所を指定するとそこへ行きますし、ネットワ
ークにつながっているところなら、世界中どこへでも飛んでいけます。
また文字だけでなく画像(写真)や音声や動画へも飛ぶことができます。
このようにHTMLでは、文書のある部分から、関連するほかの文書や場所へ直接ジャンプし、
次々に渡り歩いていくことができます。
この機能を持つ文書をハイパーテキストと呼び、関連づけをすることを「リンクを貼る」
と言います。
情報伝達の手段として、この特徴をどのように活用できるかが、訴求力に大きな差をもた
らすことになります。ハイパーリンク機能を駆使するには、紙ベースのメディアにはない
柔軟な発想が必要となります。
特に、距離の壁、時間の壁を無くしたメリットを積極的に活用すると、その応用範囲は無
限に広がります。
紙と画面の違いについて

発想の転換 情報をホームページに公開するとき、画面の大きさを考えず紙で出されているものと同じ 様式で出そうとすると、プリントアウトしないと分からない、非常に見にくいものになっ てしまいます。 特にA3横で作った資料をそのままの形で出すと、縦も横も1画面に入りきれなくて、と ても分かりにくい画面になります。 これを避けるには   1)パソコンの画面は小さいこと。   2)目次などから目的のところへすぐ飛べること。      という特性を意識して作る必要が有ります。 《画面を設計するときのポイント》   1)パソコンの画面に入りきれる範囲で、ひとまとまりの内容を表示する。   2)横スクロールせずに表示できるようにする。   3)関連する情報へはリンクを貼って飛んでいき、また戻れるようにする。   4)データ(情報)をツリー構造にして次々ドリルダウンできるようにする。 このようなことを常に念頭に置き、情報を一番理解しやすい形にするにはどのように表せ ば良いかを意識しながら作ることが大事だと思います。 マルチメディアについて 紙の本では、音を埋め込むことはできません。写真は載せられても動画は扱えませんし、 ほかの本とリンクするなどということは考えることもできません。 しかし、ホームページでは、これらのすばらしい特性を活かした作品を創ることができる わけですから、これまで考えられなかったような著作物ができるはずです。 ちょっと前までは、通信回線のスピードやパソコンの性能という制約条件があり、マルチ メディアを自在に使えませんでしたが、本格的なブロードバンド環境が整ってきた今、多 彩な表現が可能となってきました。 また、有機ELディスプレイがようやく実用化の段階を迎えたようですが、このような技 術が実用化されてくると、紙と同じような使い勝手のディスプレイに表現した作品から、 世界中のメディアにリンクできる日もそう遠くないことだと思います。 ブラウザの違いについて デファクトスタンダードはIE(2002年12月調査) オランダ企業 OneStat.comが世界100カ国200万人のインターネットユーザーからサンプル 収集した調査によるとInternet Explorer(IE)がWebブラウザにおけるシェアの95%を占め ているそうです。 調査結果は、次の通りです。
Webブラウザの種類別シェア
1. Microsoft IE  95.0%
2. Netscape Navigator   3.0%
3. Mozilla   1.1%
ホームページの作り方に関する本にはこのブラウザの違いについて、どんなブラウザでも 見ることができる配慮をすべきだと書いています。 しかし、パレートの原則から言えば95%に対応できれば、残りの5%は無視しても大勢 に影響がないと判断できます。 バージョンやブラウザが違うことによる不具合に神経質になって手間隙かける必要がある か、大いに疑問があるところです。 5%以下のシェアしか持っていないブラウザを使っている人は、95%のシェアがあるブ ラウザも用意していると考えても的外れではないでしょう。 マイナーなブラウザに対応していないホームページは怪しからんとおっしゃるなら、それ はそれでご覧にならなくても結構と割り切りましょう。 ブラウザの違いにこだわるより、あくまでも中身とその見易さ、分かりやすさにこだわる べきだと私は思います。 新しくホームページを作る時、常にデファクトスタンダードのブラウザの最新バージョン を使って作るのが、秒進分歩の世界に対応できる唯一の方法だと思います。

目次へ
■ ホームページを作るための言葉HTML
ホームページを作るための言葉HTML
HTMLとは、HyperText Markup Languageの頭文字をとったものです。
HyperText:
 Hyperを辞書で引くと『異常に興奮した、異常に敏感な、テンションが非常に高い、
 せわしい、熱狂的な、最高の』といった意味が出てきます。
 ハイパーテキストとは、普通の文書では持つことのできない機能を備えた最高のテキ
 ストという意味です。 
 ハイパーテキストでは、ページの途中で出てきた、ある語句について関連する資料を
 見たいと思ったとき、その語句から直接関連文献や絵や音を呼び出すという機能を持
 っています。
 このように文書のある部分と、別のメディアを「関連づける」ことをハイパーリンク
 といい、その機能を持つ文書のことを「ハイパーテキスト」と呼んでいます。
Markup:
 マークアップとは、普通の文書に、目印になるものを書き加え、「ここからここまで
 がこの要素だ」とマークアップすることで、その部分が文書の中で「見出し」「段落」
 「箇条書き」など、どんな役割なのか区別し、その要素(部品)の組合せとしてコン
 ピュータにも判断できるようにしたものです。
Language:
 HTMLは、プログラミング言語などというよりも、決め事の言葉という程度の意味で、
 実際HTMLはCOBOLやJAVA等のプログラミング言語に比べると普通の文章に少し変なもの
 が付け加わった程度の  やさしい言葉です。

HTML文書は次の2つの部分から構成されます。
1)そのHTMLの使用言語(日本語か英語かなど)、タイトル、などの基本情報 
2)本文 (中身)
1番目の部分をHTMLのhead要素といい、2番目の部分をbody要素といいます。
この2つをあわせたもの、つまりHTMLの本体をhtml要素といいます。
また、文書を構成する「見出し」「段落」「箇条書き」なども「要素」と呼びます。
HTMLは、文書を要素の組合せとして構成し、ページを作り上げていきます。
目次へ
■ ホームページをとにかく作ってみよう

先ずお手本にするホームページを表示してみます。
私が勤務している会社のホームページの最初の部分のソースを表示すると下記の
ようになります。
ここをクリックして下さい。

なんだ最初から取っ付きにくいじゃないか ブツブツ言うな

先ず最初に<HTML>と書いてありますがこれはパソコンにホームページを作るための
文書ですよと宣言しているのです。終わるときは</HTML>と書きます。
<HTML></HTML>の間に書かれているものがホームページを作るためのプログラムと
いうことになります。ですからプログラムの頭に<HTML>と書いて、終わりに</HTML>と
書いてけじめをつけているのです。<と>で囲まれたものをタグと言いますが<HTML>
タグと</HTML>のようにスラッシュ/を付けたタグを対にして使います。対にしないで
も良い<br>のようなタグもありますが、対にして使うと覚えておきましょう。

次に<HEAD>というのがでてきます。これはこれから見出し部ですよという宣言をして
いるのです。</HEAD>がでてきたらそこで見出しは終わりだということがわかります。

その次に<TITLE>index</TITLE>というのがでてきます。

その次に<META>というのがでてきます。METAとはすべての、全部の、そうなべする、
網羅するといった意味ですが、メタブックといえば本の本というような意味になります。
要するに、ここでこのプログラムの氏素性を明らかにしているのです。

1番目の<META>はこのプログラムの言語は日本語ですと宣言しています。HTMLはアメリ
カで生まれたので何も宣言しなければ英語で作られていると解釈してしまいます。
何も宣言せずそのまま日本語で書いていると意味不明の暗号みたいになってしまいます。
この部分は何だか良くわからないけどこのままコピーしておけば良いと考えてください。

2番目の<META>はこのプログラムのdescription(解説、概要、詳細、内容といった意味)
で自分が作ったホームページの内容を要約したものを記入します。

3番目の<META>はこのホームページを誰かが探したい時どんなキーワードで探すか,想像力
を働かして、色々な言葉から自分のホームページが探せるようにしている所です。
ここのキーワードを使ってgoogleなどで検索すると、このホームページに行き着くという
わけです。
2番目、3番目の<META>は自分が作るホームページの一番最初のものだけに書いておけば
良く、そのほかのホームページでは特に必要はありません。

次に<BODY>が出てきますが、この部分にホームページの中身(本体)を書きます。
この例では上下をフレームで分け、画面の上の方に全体のメニュー、下の部分にトピック
スを表示するようにしています。(フレームの中身は別のhtmlになっています。)

ここまでの説明を読むとなんだか難しいと思うかも知れませんが、単純化すると次のように
なります。

<HTML>
<HEAD>
<TITLE>****</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
********************
********************
********************
</BODY>
</HTML>
この***部分を変えればすぐホームページができます。
一番簡単なのは<BODY>のところに<pre>と書いてから、文章を1行35文字以内くらい
で書いてみます。文章の終わりは</pre>と書きます。
この中に写真や画像を入れたければ<img src="****.jpg">とすると、写真や画像付き
の文章が出来上がります。
サンプルはここをクリックしてください。
《作り方》
1)上の画面の<HTML>から</HTML>を左クリックしたままなぞって反転させ、コピーし
 てメモ帳に貼り付けます。(コピーはctrキー+Cキーでしたね)
2)次に***の部分を書き換えます。<BODY>の部分の最初に<pre>と書いて、文章を
 書きます。(pre:Preformatted(整形済み)要素 )
 <pre>を使うと自分が書いたとおり、画面に表示されます。改行位置もそのまま反映
 されます。
 改行タグの<br>や<p>も必要ありません。最後に</pre>で締めくくります。
3)書き終わったら「ファイル」→「名前をつけて保存」で準備作業のところで作った
 [homepage]フォルダーにmyfirst.html という名前で登録してください。
 ファイルの種類は『すべてのファイル』にして、名前は自分の好みで結構です。
 拡張子は.htmlとして下さい。

4)エクスプローラで[homepage]フォルダーを開きmyfirst.htmlをダブルクリック
 すると見事?!ホームページの出来上がりです。


目次へ

 ■魅力的なホームページを作るテクニック