本ホームページは、プロバイダである、IIJ（インターネットイニシアティブジャパン）の利用者に提供されている、わずか5MBのホームページスペースで運用されています。もちろん、CGIやPHPなどは利用できません。画像とHTML、CSSのテクニックを駆使して、いかに華やかなホームページを運用できるかということになります。
ブロードバンド時代になり、ホームページの容量など気にする人はほとんどいないかもしれませんが、私が実践してきた容量節約テクニックをご紹介します。
なぜここで敢えてホームページの基礎を・・・なんて思うかもしれませんが、仕組みをしっかり理解することで、容量節約のポイントが見えてきます。
ホームページは、基本的にHTMLといわれる言語で書かれています。HTML自体は文字のデータであるため、ワープロやテキストエディタでHTMLファイルを開くと、ホームページではなく、中のソースコードが見えるわけです。
実際は、ブラウザがHTMLを解釈し、画面を表示しています。
このように、HTMLのソースに頼ることによって、使用容量を大幅に減らすことができるわけです。
HTMLは、プログラム言語などと比べ、比較的人間でも理解しやすいようになっています。基本的なタグを覚えてしまえば、ワープロを打つのと同じようにホームページを作成することができます。
手打ちに必要なソフトは「テキストエディタ」です。「メモ帳」でも構いませんが、容量の制限がありますので、フリーウェアか商用ソフトを導入すると良いでしょう。商用ワープロソフトの中には、テキストエディタモードがあるものもあるので、新たに導入する前に確かめてみましょう。
写真を掲載するとき、飾り枠があると、より一層映えます。ホームページ作成ソフトなどで枠を選択すると、大抵は枠の画像が当てはめられますが、ある程度の枠ならば、HTMLだけで作成可能です。いくつか例を紹介します。
HTMLで指定できる文字の装飾は、思いのほかたくさんあります。ロゴを画像で用意しなくても、飾り文字を駆使してある程度のことはできます。いくつか例を紹介します。
スタイルシートと呼ばれるこの方法は、標準で定義されているHTMLタグに独自の属性を設定することができます。HTMLファイル内に書くこともできますが、別のファイルで作成し、その都度読み込むことができるので、サイト全体で共通する設定などは、１つのファイルで定義しておくと、容量の節約になります。
このホームページのメニューは、マウスカーソルを上に置くと背景が変わるようになっています。このような効果は、最近ではFLASHアニメーションを利用して作られることが多いですが、CSSで設定を行うことで、簡単にかつ小容量で実現できてしまいます。
CSSでは、カーソルが上に来た時に呼び出す文字の属性を規定することができます。（文字の属性については、「飾り文字」のところを参照下さい。）これまで説明してきた、飾り文字や飾り枠を組み合わせることで、かなりのことはできると思います。
例えば、集合写真で顔をクリックするとそれぞれの自己紹介に飛ぶようにするにはどうしたら良いでしょうか？ Adobe Illustratorなどの高度なソフトを使用して「スライス」で画像を分割することで実現できますが、HTMLを使ってもある程度の機能は実現することができます。
画像１枚の容量は、HTMLのような文書に比べると遥かに大きいものです。HTMLでちまちまやるよりは、画像を工夫して容量を減らす方が、一気に節約が実現できます。