私のホームページ事始め


目　次

制作ノート
　1. はじめに
　2. 自分でホームページを作ろう
　3. 表のタグの不思議
　4. フレームの組込み
　5. 色の指定
　6. ブラウザセーフ色
　7. まとめ
　参考文献

付録 1 使用パソコン・周辺機器
付録 2 ホームページ制作用ソフトウェア


　　制作ノート


1.　はじめに

　1995年の春、パソコン通の知人の紹介で DOS/V パソコン（IBM Aptiva 720)を購入、おそるおそるさわりはじめたのが、私のパソコンライフの始まりでした。それ以来パソコンと付き合うはめになり、その年の11月25日のウィンドウズデーには、夜中に名古屋の大須まで出かけていき、Windows 95 を手に入れたのであります。
　あれから３年半、いまではパソコンなしの生活は考えられなくなりました。

　パソコンは発売して半年過ぎると価格が半額になるとよくいわれ、業界の常識となっています。実際、名古屋の大須近辺のパソコン街を歩いていると、まさにそのとおり。これで売っている人は儲かっているのだろうかと思いながらも、まだまだ高い！、と心のなかで叫んでいます。

　それにしても、パソコンは日進月歩、私の買ったパソコンはだんだん古くなっていきます。Aptiva 720 のように、Pentium CPU （および同等の他社製 CPU） を搭載していないDOS/Vパソコンは、いまや一般のパソコンショップではほとんど見かけなくなり、リサイクルショップでお目にかかるていどです。

　それでも愛機は愛機とわが Aptiva に向かっているうちに、ある日、ホームページ制作の大作戦が始まっていたのでした。

　昨1997年春、いまをときめく西川和久氏が紹介していたノートパソコン IBM ThinkPad 535 を遅まきながら入手したものの、ハードディスク容量や CPU 処理速度のさらに大きいものが次々発売されています。

　今年（1998年）になって、ソニー VAIO シリーズに代表される、スマートで機能的なノートパソコンが各社から続々投入され、店頭を賑わすようになりました。
　さる7月25日には Windows 98 が発売となり、私も早速入手、インストールしました。
　また8月29日にはマックの新機種 iMac が発売され、ブームとなっています。

　このようにパソコン業界は相変わらず新製品情報がにぎやかに飛び交い、衣替えも素早いようです。


2.　自分でホームページを作ろう

　ホームページ作成のための参考書やソフトは、書店やパソコンショップに出かければ容易に見つかにります。ホームページに興味のある人は、懐具合と相談の上で、とりあえず参考書やソフトを購入して、実際にホームページを作ってみることをおすすめします。

　自分自身でホームページを作ることから、われわれ一人一人にとってのホームページ大作戦は始まるように思います。

　ホームページは通常 HTML (Hypertext Markup Language; ハイパーテキスト・マークアップ・ランゲージ) という言語で記述されたテキストファイルで、ホームページ作成の参考書やソフトは沢山発行されています。 （注１）
　またパソコン誌でもHTML言語の説明がなされていたり、ホームページ作成用ソフトウエアの特集をよく見かけるようになりました。

　ホームページ作成ソフトについていえば価格差もずいぶんあり、たとえば、こざいく WebDesigner のように他のものとは一桁以上ちがう高い価格がつけられているものもあります。もちろんお金を出してそれに見合う結果が得られれば、ユーザとしては文句のつけようがないとは思いますが。
　私は「こざいく」までは手が届かず、一太郎７キャンペーンのおまけで手に入れたホームページ・ビルダーと、ＷＺ Editor をおもに使い、コザイクしながらホームページを作りはじめました。
　このホームページ・ビルダーや ＷＺ Editor も、バージョンが上がるにつれ、徐々に進化しています。

　とはいえホームページを作るわざには、上には上があります。見栄えをよくしアクセス回数を増やすためには、ホームページ制作のわざをみがくことが望まれます。
　ホームページ作成ソフトもバージョンアップが頻繁に行われ、使い勝手も徐々に良くなっています。市販されているソフトの種類は多いので、なるべく自分に合ったソフトを見つけることを心がけたいものです。

　と同時に、アクセスが多く人気のあるホームページをブラウズして、ホームページの構成・組立て、フレームや画像・イラストなどの使い方を学ぶことが、自分のホームページを作る上でとても役立ちます。

　ホームページ作成に用いるHTML言語の特徴は、"<" と ">" で囲んだタグと呼ばれる記号を使用することです。このHTML言語の基本となるタグの詳細は参考書にゆずるとして、私の気のついた点、関心のある事柄を以下に記します。


3.　表のタグの不思議

　ホームページをとりあえず作ってみようというわけで、最初はフレーム（枠）を使用せず、テキストと表ベースの構成としました。

　基本的な表のタグは次のとおりです。

表１　基本的な表のタグ
<TABLE>…</TABLE> 表の初めと終わりを示します。
<TR>…</TR> これらは TABLE タグに組み込んで、
行と列のセルの構成に使われます。
TR は表の行、TH は見出しセル、
TD はデータセルに対応します。
<TH>…</TH>
<TD>…</TD>

　ご使用中のブラウザでこのホームページのソースを見ると、この表１ に対応する部分は次のようになっていることがわかります。

・表１のソース
<TABLE border="2" cellspacing="2" cellpadding="3" bgcolor="#ccff66">
　<TR>
　　<TH colspan="2" align="center">表１　基本的な表のタグ</TH></TR>
　<TR>
　　<TD align="center">&lt;TABLE&gt;…&lt;/TABLE&gt;</TD>
　　<TD>表の初めと終わりを示します。</TD></TR>
　<TR>
　　<TD align="center">&lt;TR&gt;…&lt;/TR&gt;</TD>
　　<TD rowspan="3">これらは &lt;TABLE&gt; タグと組み合わせ、<BR>
行と列のセルの構成に使われます。</TD></TR>
　<TR>
　　<TD align="center">&lt;TH&gt;…&lt;/TH&gt;</TD></TR>
　<TR>
　　<TD align="center">&lt;TD&gt;…&lt;/TD&gt;</TD></TR>
</TABLE>

　これをみると、それぞれのタグは、スタート・タグとエンド・タグのペアになっていることがわかります。
　スタート・タグとエンド・タグを組み合わせて、ひとつのタグが構成されます。
　たとえば TABLE タグをみると、表は <TABLE> で始まり、</TABLE> タグで終了します。
　表のセルを構成する TH タグと TD タグは同じように使われていますが、<TH>…</TH> で囲まれた部分は、太字の見出しとなっています。

　なお、タグのなかにいくつかの設定項目がありますが、意味は次のとおりです。
border … 枠の幅 (単位 ピクセル）
cellspacing … 罫線の幅 (単位 ピクセル）
cellpadding … セル内の余白 (単位 ピクセル）
bgcolor … 背景色 (RGB各成分値の16進数の組合せ）
colspan … セルを結合する列数
rowspan … セルを結合する行数
align … セル内の水平位置揃え
（セル内の垂直位置揃えは valign ）


　これらのタグや設定項目を使いこなすことで、表の作成のほか、レイアウトの工夫が可能です。　

　ふつう表といえば、枠を表示するように設定します。すなわち、TABLE タグの border="　" のところに 1 以上の数値（単位ピクセル）が入っています。
　これに対し、表の枠を消し、つまり border="0" とし、レイアウト用に表のタグを上手に使っているホームページにしばしばめぐりあいます。
　そのソースを見ると、TABLE タグを使用し、枠を表示しないように設定してあって、こんなふうにして TABLE タグをレイアウトに使用できるんだなと納得します。

　パノラマ的光景と称して画面の横にどんどん広がるホームページ、あるいは画面のあちこちに文字や絵が飛んでいるホームページなど、表のタグをレイアウトに活用して、これはすごいと思うホームページも少なくありません。

　このホームページでも表のタグを、ところどころでレイアウトに使用しています。表のタグとブラウザでの表示との関係は、 「ブラウザ・チェックリスト」 でも触れておきましたので、ご参照下さい。


4.　フレームの組込み

　そうこうしているうちに、フレームを使用したホームページがふえてきたのでこれはいけないと思い、おおいそぎでフレーム対応版も作りました。
　フレーム対応版は、行と列それぞれのフレーム数および各フレームの大きさを決めて大まかな枠組みをつくります。そうしておいて各フレームに埋め込む（取り込む）文書を作成します。タグの概略は次のとおりです。

・ FRAMESET (フレームセット) タグ

　フレームの構成を定義。このタグのなかに、FRAME、FRAMESET（フレームセットの中のフレームセットを定義する場合)、NOFRAMES タグをそれぞれ挿入し、指定します。

・ FRAME (フレーム) タグ

　フレームセットの中の各フレームについて定義します。
　通常タグは、スタート・タグとエンド・タグを含みますが、<FRAME> は単独で使用し、エンドタグ </FRAME> はつけません。

・ NOFRAMES (ノーフレーム) タグ

　フレームをサポートしていないブラウザ向けの表示内容です。
　フレームをサポートしているブラウザの場合は、このタグに　記述された内容は表示されません。


5.　色の指定

　どのホームページを見てもそうですが、このホームページでも、背景やイラストや文字に様々な色を使用しています。

　パソコンのディスプレイに表示される色は、光の三原色、すなわち赤（R）、緑（G）、青（B）から成っています。RGB成分の光の強さをそれぞれ 0〜255 の範囲の数値（10進数）で表わし、それら三つを組み合わせることにより、色が決まります。
　これから色の数は、全部で 256×256×256＝16,777,216 色 （約1677万色） あることになります。このうち何種類の色が表示できるかは、ディスプレイの仕様、および画面のプロパティ「ディスプレイの詳細」にある「カラーパレット」の設定（Windows の場合）に依存します。

　このRGB値の10進数をそれぞれ16進数に置き換え、RGBの順に一列に並べ、先頭に # をつけた記号列が、ホームページの色指定に使われます。ここでアルファベットは大文字、小文字のいずれを使用してもＯＫです。

　たとえば黒 (10進数、16進数ともに R値=G値=B値=0) は "#000000"、白 (10進数で R値=G値=B値=255、16進数で R値=G値=B値=FF) は "#FFFFFF" でそれぞれ色指定ができます。

　たとえば、次の表では、 TABLE タグに草色 (#CCFF66) の背景色の指定が含まれています。

表２　背景色の例─草色 (#CCFF66)
光の三原色 RGB成分の値 換算16進数
赤 (R) 204 CC
緑 (G) 255 FF
青 (B) 102 66


　希望の色の16進数表記を求めるには、たとえば次のようにします。

1) Windows 95 付属の描画ソフト、ペイントなどについている [色の設定─色の作成] ツールを用い、希望の色に対するRGB値（0〜255、10進数）を求める。

2) そのRGB値をそれぞれ16進数に換算する。
　　得られた16進数が１桁の場合は、先頭（左側）に 0(ゼロ) をつけ、２桁の英数字とする。

3) 求められた16進数を、RGBの順に並べ、６桁英数字とする。

このようにして、希望する色に対応する16進数換算の６桁表記が求まります。

　ここで上記 2) の16進数換算は、「0〜255までの数字と16進数との対応表」などを利用すると容易にできます。この対応表は、下記の参考文献 "HTML for the World Wide Web" の巻末付録にも収録されています。

　また、このホームページに収録した「色の選択プログラム−16進数変換 Java スクリプト」を利用すれば、RGB値の10進数をそれぞれ16進数に変換し、さらに、得られた色を画面に表示して、色調を確認することができます。


6.　ブラウザセーフ色

　ホームページに埋め込むボタンやイラストを素材集で探したり、作っているうちに、ブラウザセーフ色 (browser-safe colors) に関心をもつようになりました。
　ブラウザセーフ色とは、256色ディスプレイで表示可能な、ブラウザに依存しない「安全な」色のことで、全部で216色あります。（注２）

　このホームページでは、写真のようなJPEG画像ファイルを除き、背景やイラストや文字などは基本的にブラウザセーフ色を使用するように心がけています。（もちろん、ブラウザセーフ色でないところもまだありますが。）
　ブラウザセーフ色を使いはじめてから、色に対する見方がこれまでと変わり、以前より色を細かく見ることが多くなりました。

　市販の素材集などに含まれる GIF画像ファイルの色数は256色以下ですが、ブラウザセーフ色以外の色を含んでいる例をよくみかけます。その場合には、画像処理ソフト Paint Shop Pro でいったん 1677万色に増色してから、256色の標準カラーパレットに近似的に減色し、GIF画像ファイルとして利用しています。
　Paint Shop Pro の場合、標準カラーパレット 256色には、ブラウザセーフ 216色が含まれ、残りはすべて黒色（#000000）となっています。したがって、標準カラーパレットで近似的に画像処理すれば、結果的にブラウザセーフ色で画像を表示できることになります。

　ほとんどの画像ファイルは、Paint Shop Pro でこのような [1677万色に増色→256色標準カラーパレット／ブラウザセーフ 216色に減色] の処理を施すと、見映え・色調が変化します。
　ただし、ブラウザセーフ 216色に減色してから、部分的に色の修正をし、手直しすれば、それなりに利用できるものがかなりあります。このホームページでも、このような画像処理を施したボタンやイラストを使用しています。
　なお Photoshop も、 Paint Shop Pro と同様に、ブラウザセーフ色で近似処理することが可能です。

　近頃は新発売されるパソコンのディスプレイは、256色より多い、 65536色あるいは 1677万色（全色）表示できるものが一般的になってきました。したがって、ブラウザセーフ色にこだわる必要はないのかもしれません。
　しかし、従来の 256色表示のパソコンはいまも使用されていますし、Windows CE2.0 搭載のカラー携帯端末＝ハンドヘルドPC などは256色表示が一般的です (Mobile Gear II MC-R500, PERSONA HPW-200JC, HP 620LX など）。
　また、インターネットのホームページは世界中の人々が日夜アクセスし、閲覧しています。

　とすれば、ブラウザセーフ色でホームページを作成しておけば、256色以上表示できるパソコンであれば、色の不都合を感じることなく、だれでもホームページをブラウズできることになります。

　写真や芸術作品などのように、ブラウザセーフ 216色だけでは、微妙な色合いの変化を表現できない画像ファイルも多いので、一概に言えませんが、ブラウザセーフ 216色の利用は、ホームページの背景、テキスト、リンク、図案・イラストの色を選択する際の目安になると思われます （注３）。


7.　まとめ

　ホームページを自分で納得の行くまで作ろうとすると、とにかく時間がかかります。ホームページ制作の専用ソフトを使用した場合でも多少時間は節約できますが、細かい修正を繰り返しているとどんどん時間が過ぎていきます。

　一方、最近ではアニメーションGIF画像、JavaスクリプトやJavaアプレットをはじめ、Shockwave、StreamWorks、QuickTime Movie、MPEG などのサウンド付き動画、それからリアルタイムのサウンド・実況放送ができる RealPlayer、VDOLive Player など、新しいソフトやツールが次々と登場し、ホームページに取り入れられるようになりました。

　このようなめまぐるしい展開を背景に、ホームページ制作のアドバイスをひもとくと、どのあたりで妥協するか、ということがよく話題になっています。ビジネスの場で作る場合と個人的に作る場合とでも違ってきます。ビジネスの場ではホームページ制作に時間をかければかけるほど経費にはねかえります。個人的な場合でもホームページ制作に時間をかけすぎると、その他の大切な時間が削られてしまいます。いずれにせよ注意が必要です。

　英語でハッピー・ミーディアム（happy medium）という言葉がよく使われます。ハッピー・ミーディアムとは、相対するもののそれぞれの長所をとったやり方、中庸、を意味します。ホームページ制作においても似たようなことが言えると思います。自分の必要もしくは望みに応じたホームページの仕上がり具合・水準をなるべく早く見極め、それに合わせてホームページ制作の対策を練ることだと思います。
　かくいう私も自分にとってのハッピー・ミーディアムを見出すべく、現在奮闘中です。

　なお 付録１・付録２ に、ホームページ制作にあたり私の使用しているパソコン・周辺機器、ソフトウエアをまとめておきました。ホームページ制作の一助になればさいわいです。

　ホームページ制作は手間ひまがかかります。また多くの人に見てもらうためには、コンテンツの工夫と共に、あれこれ手段を利用してうまくホームページを宣伝しなくてはなりません。

　しかし、作ったホームページはいつか世界中に届く可能性があり、それだけでも何となく心うきうき、気力がわいてきます。それがホームページ制作によりもたらされる精神的な贈り物かもしれません。

　それでは皆さん、ホームページ大作戦を成功させ、インターネットのワールドワイドウェブでまたお会いしましょう。

以上　(堀場康一 記)　

参考文献

(注１)
　日本語の参考文献はあまりに多いのでここでは割愛し、米国の出版社発行の英語で書かれた本を一冊挙げておきます。

Elizabeth Castro, "HTML for the World Wide Web"（ワールドワイドウェブのためのHTML）, 第２版, Peachpit Press, 1997.

　この本は、実際のブラウザ画面などのイラストをほぼ全ページに配置し、視覚に訴えながら、ホームページ作成をわかりやすく丁寧に説明しています。この本の対象範囲には、HTML 3.2、 さらに Netscape Communicator や Internet Explorer のエクステンション（拡張タグ）も含まれています。
　HTMLの解説書は多いですが、この本のように、ブラウザ画面と対比しながら体系的に順序立てて書かれた本は、わが国でもそれほど多くないように見受けます。

(注２)
　「ブラウザセーフ216色のチャート」を別途作成し、このホームページに収録しましたので、合わせて参照ください。

(注３)
Lynda Weinman and William E. Weinman, "Creative HTML Design"（創造的なHTMLデザイン）, New Riders Publishing, 1998, Chapter 4: Web Color, 参照。

このなかで著者は、Web デザインに使用するブラウザセーフ色の解説とともに、その重要性についても触れています。
このページのトップへ戻る

　私のホームページ事始め　【制作ノート】（この頁）　【付録１】　【付録２】　





(Ver. 3.04 2007/05/25)
Copyright (c) Koichi Horiba, 1998