|
|
|
|
|
| ジェイペグと並んでインターネットでよく使われる画像形式がジフ形式です。.gif という拡張子がつきます。これは電話回線などでの送信に最適化された圧縮形式で、軽く転送が楽です。ホームページで言えば、表示が早い、ということになります。 JPEGとGIFの違いがよくわからない、という声を聞きますが、小さい画像の場合、見た目に変わりがないのなら、GIFにするといいでしょう。 しかし基本的にGIFは平面的な図、JPEGはグラデーションのある写真などに使います。GIF形式では、インデックスカラーの２５６色で表現されるため、滑らかなグラデーションやぼかしの足などはきれいに表示できないことがあります。 大きな画像でそういうものを表示したいときにはJPEGにするしかありません。 ところで、GIF形式はその他にも、いろいろな特長があります。特にGIF89aでは透明部分を設定できる、インターレース表示ができるといった利点があります。 インターレースというのは、最初は低解像度でモザイク状に表示され、だんだんはっきりしてくる、という表示方法で、何もない画面で待たせるよりは、はるかに閲覧者に楽な表示方法です。 さて、どうやってGIF形式のファイルを作るかですが、フォトショップでJPEGのファイルを作る場合は複製を保存すればよかったのですが、GIFの場合は、データ書き出しというのを使います。 イラストレーターでも同じですが、メニューバーの「ファイル」の中にある「データ書き出し」を選び、その中のGIF89aを選び、ダイアログボックスの設定をすれば、GIF89aのファイルが保存されます。 この書き出しコマンドでは、現在表示されているレイヤーだけが書き出されますので、背景を透明にしたい場合は、背景レイヤーを非表示にした状態で書き出します。JPEGでは、レイヤーを統合しなければなりませんが、GIFの場合は不定形なものでも、その形で表示できるわけです。 複雑な形のものも、その形に切り抜かれますので、ボタンなどの様にあちこちのページで使われるものでも、ページの背景色が生きますので、たいへん便利なのですが、濃い色の背景色においたら、エッジが白くギザギザが出てしまった、ということが、よくあります。 これは、りんかくに、アンチエイリアスがかかっているとき、エッジが白っぽく残っているせいです。りんかく部分のアンチエイリアスをなくせばよいのですが簡単な方法として考えられるのは、自動選択ツールのオプションでアンチエイリアスのチェックははずしてから透明部分を選択します。オプションの選択する範囲を変えてみて、ちょうどいい大きさにします。透明部分を選択しても絵柄よりひとまわり離れて選択されることと思います。この隙間がへんに白いぎざぎざの犯人です。必要なら選択範囲の変更で拡張したり縮小したりします。 透明なところは完全に透明にしたいので、デリートキーで削除して完全に透明にします。 次に選択範囲を反転し、ブラシツールオプションを背景にして、今ある色と同じ色を塗ります。（編集の塗りつぶしで背景に色を塗ってもいいです）つまり、透明なところは完全な透明に、色のあるところは、１００％に塗るということです。 これでアンチエイリアスがなくなり、ぴっちりと切り抜かれるはずです。 輪郭附近にぼかしを出したいときは、ページの背景と同じ色で画像の背景を塗りつぶしておけば、GIF画像でもけっこういけます。この場合は、Web用のカラーパレットから色を選択する必要があります。 この形式、ソフトウェア関係の問題があり、将来使えなくなる、という話も聞くのですが、まだしばらくは大丈夫だと思います。 次回は Web用画像についてのまとめ かな？ |
HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る? エクスナレッジ 実際にインターネット上に公開できるレベルのWebサイトを作る解説書。HTMLとスタイルシートの両方を学び、表現力があり、より見栄えのするページをつくる最新のテクニックを伝授する。 目次 ひとこと ホームページを作って、仕事を増やしたい、とか、友だちを増やしたい、とか、世界を広げたい、とか‥‥いろいろ漠然とホームページの必要性は分かっていて、作りたいとは考えているんだけど、何を載せていいのか、何を書けばいいのか分らない、どう表現すればいいのか、と困っている人が多いですよね。 こういう場合、急がば回れです。じっくりと、まずは最初の一歩から始めてみましょう。 |
| 前回は**本日のポイント**を書き忘れてしまいましたので、今日はWeb用画像のまとめから述べたいと思います。 普通の絵や写真を表示させるには、JPEG か GIF という形式にしてHTMLと一緒にFTPサーバにアップロードしておく、というところまで勉強しましたね。 そして、GIF形式は軽くて表示が早く、透明指定もできるが、色数が少なくなってしまう。一方 JPEG は見た目には変わらないので、写真やなめらかなグラデーションのある絵などに適しているということも分かっていただけたと思います。 一番問題となるのは、画像の大きさと表示の速度ですが、解像度を７２ピクセル/インチ（ppi）で１００％の大きさで表示させます。HTMLで画像の大きさを小さくしても、画像自体が大きければサーバから自分のパソコンに画像データが届くためにかかる時間は同じなのです。 具体的にいえば、解像度７２で、２００×３００ピクセルの画像を用意したとします。それをうっかり忘れてしまって、HTMLのレイアウトで１００×１５０ピクセルで表示するように設定したとします。 レイアウト上では、小さな画像として表示されるため、制作者は「画像は小さいからすぐに表示できるだろう」と思い込んでしまうことがあるのです。 閲覧者は「こんな小さな画像なのに、なかなか表示できない」と思うわけです。 また、１ページに表示させる画像の枚数も大切なポイントです。 先ほどの２００×３００ピクセルの画像の表示には、そんなに時間はかからないでしょうが、それを１ページに５枚も１０枚も並べてしまうと、たいへんなことになります。 上から順に表示されるなら、上から順に見ていけばいいのですが、データの転送はそういう具合にはなっていません。コンピュータはなるべく時間を節約しようと、送信の隙間をねらいながら、あちこち表示しようとします。 その結果、どの画像も上部４分の１だけ表示されていて、何が写っているかわからない画像が並んでいる、という事態が起こります。 そして「随分大きな画像だ」と思いながらも待っているのですが、それでもちっとも表示が進まないので、ふと気付いてウィンドウをスクロールしてみると、ずずず〜と下の方まで大きな画像が並んでいたりすると、もうあきらめて別のページへジャンプしてしまいます。 左右最大でも４００ピクセル、これは横長の長方形の場合ですが、これぐらいの画像は１ページに１枚にしておくのがベストでしょう。 大きな画像を表示したいときは、小さく分割して並べると意外と早く表示できます。４００×４００でも、１枚の画像を５０×５０の６４枚の画像に分割し８×８のテーブルに並べて、全部表示されると１枚の絵になるようにレイアウトすれば、パタパタと開いて結構待っていられる時間内に表示されます。 また、同じ画像は同じファイルを使うというのも、表示を早くするコツです。いったん、転送されてきたファイルは自分のパソコンにキャッシュとして保存されているので、ページが変わっても同じファイルなら、すぐに表示できます。 **本日のポイント** JPEG グラデーションのある写真など GIF 軽くて表示が早く、透明指定もできるが、色数が少なくなる。 小さいもので見た目に違いが感じられなければ大丈夫 表示する大きさと同じ大きさのサイズで画像を作っておく。 大きな画像は１ページに１枚くらいにしておく。 大きな画像は分割して並べると割りと早く表示できる。 |
坪沼 真理 (著) 成美堂出版 (2002/08) ホームページをカッコよくデザインするために色、文字、レイアウトなどの上手な使い方を紹介。プロが制作したサイトの具体例を多数収録。また、知っておきたいWebの基礎知識Q&Aも掲載する。 目次 ひとこと 商用サイトの制作や、プロのウェブデザイナー向け。または、ホームページは作れるけど、なんとなく、デザインが野暮ったいとか、逆に、デザインは慣れているけど、コンピュータが苦手、という人には取り付きやすいかも。 |
| 画像が用意できたら、それをHTMLファイルに並べていく事になります。エディタソフトがあれば、画像を置くいうタグのマークなどがあって、それと用意した画像をリンクしていきます。 この作業がHTMLを作るという作業にあたります。エディタソフトでもソースを見ることができると思いますので、たまにはソースを表示して、ソフトでやった作業がどういうHTMLになっていて、それがブラウザではどう表示されるか、確認していくと、だんだん分るようになります。 なぜ、HTMLを分る必要があるかというと、ホームページを運営していくと、他サイトとリンクしたり、他サイトの画像（バナー）などを張り付けるという作業が必要になってきて、その時全くHTMLが分らないというのでは、困ってしまうからです。 画像を配置するという指令はHTMLでは <img height="50" width="80" src="(http ://www.chiisanae.com/titl.gif）" border="0" alt="小さな絵">といった感じになります。 これは、http://www.chiisanae.com/にあるtitl.gifという画像を高さ50ピクセル幅80ピクセル、境界線は0にしてここに配置せよ、という意味です。 プログラムでは、よく使われる言葉は略語になっていることが多く、それが初心者には分かりにくい原因なのですが、略されるのは母音（aoeiu）が多いので、その辺を補って類推すると覚えやすいです。 最後のaltという部分がありますが、ここが今日特に説明を加えたい部分です。エディタソフトの方でも、「altテキスト」を入力する場所があるはずなんですが、このaltテキストというのは、画像が表示されるまで、画像のスペースに文字を表示しておく機能です。 ホームページを閲覧するとき、一番最後に出てくるのは画像ですので、それを待っている間、何の画像が表示される予定なのか分かっていれば、待てるというものです。また、いつも来るサイトで、そこから早く次のページへ行きたいという場合なら、文字を読んでわかれば十分かもしれません。 実は、ブラウザの環境設定などで、閲覧者は何を表示するか自分で選択することができます。グラフィックに興味のない人だと、文字だけでいいから、さくさく見てまわりたい、という人もいるでしょう。そういう人が画像だらけのサイトにきて、altテキストもないと、何がなんだかさっぱり分らないということになります。 さらに、ロボット検索などでは、本文の文字も検索対象としてピックアップしてくれるのですが、そのときも文字が全くないサイトは検索のしようがありません。 そういうわけで、画像を配置したら必ずaltテキストも入力するという習慣をつける必要があるのです。 デザインを重視すると、文字なども画像として配置することも多く、どうしても画像の多いページになってしまいます。紙媒体ですと、文字も写真も同時に目に飛び込むのですが、インターネットでは、まだまだそういう具合にはなりませんので、このような工夫が必要になります。 **本日のポイント** 画像を配置したら必ずaltテキストを入れるようにしよう！ |
最新HTML&CGI入門―ワンランク上のホームページのための 笹木 望 (著) エーアイ出版(2002/04) ホームページを楽しく気軽に作成・公開する上で役立つ情報を満載したHTMLとCGIの入門書。96年刊の内容を改訂し、携帯電話にも対応させた改訂新版。 目次 ひとこと CGIのないホームページはつまらない。思うようなCGIがあれば、あれもできる、これもできる。でも、どこから手をつけていいのかわからない。そんなアナタへのCGI入門書 |
