エディタソフトの使い方は、それぞれのソフトの説明書や参考書を見ていただくとして、ここでは、参考書でもあまり触れていない、より基本的な「考え方」初心者が失敗しやすい「ポイント」を説明していこうと思います。 まず、HTMLによるレイアウトですが、HTMLは、ワープロのように画面の左上から右へ、そして順に下へとデータを詰め込んでいくものです。 画面の好きなところへポンと画像を置くということが基本的にできないのです。GoLiveにはレイアウトグリッドといって好きな場所に文字や画像を置けるものが用意されていて、それを売りにしているのですが、これを多用してしまうと小さいモニタではスクロールしないと見れない、という硬直した画面になってしまいます。 ホームページはそれぞれの訪問者がそれぞれのマシンで、様々なブラウザを使って閲覧しますので、ブラウザウィンドウの大きさによって伸び縮みするのが理想的です。 これは、テーブルの設定を利用して作ります。テーブルというのは表のことで参考書では、実際一覧表などを作って見せているものが多いのですが、いわゆる表だけではなく、テーブルの中には画像でも文字でもなんでも入れられるので、レイアウトはテーブルで調整するようにした方が見やすいページになります。一見、テーブルに見えないのはテーブルの枠の幅を0にしたりして表示しないようにしているからです。 テーブル全体の大きさをパーセントで指定します。例えば、テーブルの幅を８０％、高さを自動と指定して中心揃えにすれば、ウィンドウの大きさを変えても、そのウィンドウの８０％の大きさの幅のテーブルになり、文字はそのテーブル内で折り返されます。 高さを自動にしておくのは、ブラウザによって文字の大きさが違うからです。同じ種類のブラウザでも、ユーザは自分で好きな大きさに文字サイズを変えることができるので、大きな文字で表示していると１行の字数が少なくなり、その分行数が必要になります。それに応じてテーブルも下の方に伸びなくては文章が途中で消えてしまうことになります。 テーブルの中のセルが１つなら、なにもテーブルにする必要はないので、いくつかのセルに分けることになります。左右に３つのセルがあれば３列で、それが下に４段あれば４行です。つまり４行３列のテーブルになります。 画像の大きさは伸び縮みしないので、画像を横にたくさん並べるとあまり伸び縮みができませんので、％指定をする意味は減少してきますが、バナーのようにリンクがついているものを横に並べるためには、テーブルを作って並べていった方が確実です。改行しないとリンクエラーが起きやすいのです。 HTMLを直接書く場合、もちろん熟練している人は別ですが、初心者には上記のような設定はだいぶ難しくなります。そのため、どうしても中心揃えなどで、上から下へ文字や画像を並べるというレイアウトが多くなってしまうのです。これは機能的で美しいレイアウトなのですが、ちょっと違うものを作りたい、という場合にはエディタを利用してテーブルの設定をするのがよいでしょう。 また、大きな画像がたくさん掲載されていて、ダウンロードに時間がかかるのも困りものです。できる限り軽く仕上げる、言い換えればデータのメモリ量を減らすことも、とても大切です。 そこで、次回は画像処理について説明します。 　 **本日のポイント** 　レイアウトはテーブルの設定を中心に考える。 　テーブルやセルの設定は幅を「％」、高さを「自動」にして伸び縮みさせよう。

参考書の紹介 ブログをもっと楽しく活用する本―カスタマイズのための基礎知識&カスタマイズのためのHTML・CSS入門 板垣 朝子 (著) 秀和システム (2005/03) ひとこと 簡単に作れて、コミュニケーションができて、普通のホームページよりアクセスが多い‥‥と去年あたりから話題と人気急上昇のブログですが、下手をすると、単なる日記サイト。 でも、ちょっとした知識と工夫で短所はカバーし、長所は生かし、有効に利用できます。まずはこの1冊から。

ホームページで画像を見せるためには、通常、画像のファイル形式をジェイペグ形式（JPEG）かジフ形式（GIF）にします。 拡張子を.jpg .gifという形式にするのですが、通常これはグラフィック処理をするためのソフトで行います。 フォトショップやフォトショップLEなどがあれば、それが一番ですが、エディタソフトでもかなりできるはずです。また、スキャナで取り込むときの設定でもある程度はできます。デジカメで撮った写真はジェイペグなので、縮小だけできればそれで使えます。 ただ、画像はホームページの見栄えの重要な要素ですから、解像度の変更や明るさ、トリミングなどが自由にできる、という点から考えるとシェアウェアでもよいので、なにかしらの画像処理ソフトが必要になってくると思います。 こういう場合、自分は何かソフトを持っていないか、探してみることをおすすめします。周辺機器を買ったときについてきたソフト、雑誌のおまけでついてきたCD-ROMなどに案外便利なものがあったりするものです。関心がなくて気付かないままになっていたり、入手したときは、よくわからなくて、そのままになっていたりすることもあります。 でも、ここまでフォトショップの使い方などの説明をしてきたメルマガなので、まあ、一応フォトショップが使えるという前提で話を進めます。 フォトショップの画像は何もしなければフォトショップ形式（.psd）ですので別名で保存、または複製を保存するときにファイル形式を選択できます。 ジェイペグ形式は不可逆圧縮なので、ジェイペグ形式にしたら元には戻せませんから、もとのフォトショップ形式は別に残しておきます。また、レイヤーがあると別名で保存するときにジェイペグにできませんので、一旦保存したあとレイヤーを統合しておきます。複製を保存なら、保存するものだけをレイヤー統合できるので、こちらの方がオススメです。 しかし、ジェイペグにする前にやるべきことが、沢山あります。まず、明るさですが、Webサイト用の画像は印刷用より多少明るめにした方がきれいなようです。モードはRGBです。 写真の日付けはスタンプツールなどで消します。他にもゴミがあれば消します。背景を消したい場合もあるでしょうし、きれいにトリミングをする必要があるときもあるでしょう。 しかし、この辺のことは制作者の自由というか、見栄えの問題で、一番問題なのはファイルサイズです。フォトショップやジェイペグなど、ドットでできている画像のファイルサイズは大きさと解像度で決まります。 今まで紙にプリントするためのデータを作る場合には、解像度を200ppiとか300ppiにしてきました。このppiというのは「ピクセル　パー　インチ」の意味で１インチに何ピクセル入るか、という数値です。スクリーン解像度は通常72とか96ですから、それ以上細かくしても変わりません。 大きさは表示されるものと、同じ大きさの画像を用意します。大きな画像でも、HTMLでピクセル数を指定すると小さく表示することができますが、ダウンロード（表示）するのは、HTMLにリンクされている画像なので、その画像のデータサイズが大きいと、やはり表示に時間がかかるのです。 画像が増えてくればそれだけサーバの容量も使いますので、５メガバイトとか１０メガバイトなどと契約しているホームページの容量を圧迫してきます。 また、通常のモニタのピクセル数は、１５インチの場合、580ppi、１７インチで780ですが、インターネットはノートブックなどで見ている人も多いので、580を基準に考えた方がいいと思います。文字だけなら、伸び縮みできるのでいいのですが、画像の横幅が580ppi以上あると、スクロールしないと見れなくなってしまいます。横に並べる場合も同じです。 よく使われる小さなバナーは88x32といったサイズですので、そんなところから大きさの見当をつけてみてください。 また、エディタソフトがあるなら、エディタのレイアウト画面で画像の大きさを作ってみて、そのピクセル数をメモしておき、フォトショップの画像解像度でそれに近いサイズに縮小するのも、わかりやすいでしょう。 結局、画像の大きさは最大でも横400ピクセルくらいでしょうか。左右にのびるテープ状ならともかく、普通の長方形だと面積として考えますからイラストの展示などの画像でも250x350くらいがいいところではないでしょうか。 　 まだ、アナログ電話回線（56kbps）で見ている人も多いことを考慮すると、ストレスのない速度で表示するためには、あまり大きな画像は避けましょう。 また、途中で大きく解像度を変更すると、エッジにアンチエイリアスがかかって　ぼやけてしまったりすることもあるので、スキャナなどで取り込むときから解像度は72でずっと72ppiで加工していくのが、一番無難です。 そして、ときどき、ツールボックスのルーペをダブルクリックして１００％で見てみれば、それがホームページで見るのと同じ大きさになる分けです。 　 **本日のポイント** 　Webサイト用画像 　 　　　　画像の単位はピクセルで考える。 　　　　解像度72ppi、RGBモード、表示と同じ大きさで、JPEGかGIF形式にする。 　　　　小さなモニタで見ている人のことを考慮すると最大でも横400ピクセル

参考書の紹介 ホームページ・ビルダー Version8パーフェクトマスター―Version8/7/6.5完全対応����PERFECT MASTER SERIES 高見 有希 (著) 秀和システム(2004/03) 初級者から上級者までを対象にしたホームページ作成ソフト、ホームページ・ビルダーの解説書。最新バージョンに対応し、2003年刊「ホームページビルダー7 with HotMedia」を一新したもの。 ひとこと ウィンドウズユーザーでは、一番ユーザーが多い、ホームページビルダー。ただ、個人サイトでは、作るのが精一杯で、Macでは表示がおかしい、せっかくの機能を正しく活用していない、といったサイトが多いのもビルダーによるページのような気がします。頑張ってネ！

プリン島案内板へ

シルクスクリーンの製版・印刷は磯写真製版へ