見る人に優しいウエブ作成


Directory

まず最初に
作成する前に
作成時の注意事項
やさしいウエブ作成
テキスト入力
画像表示
フレーム
Web Pageを登録
カウンタアップ
新しい技術


Contents

優しいウエブ作成
HTML入門
画像処理入門
ページレイアウト入門
スタイルシート入門
用語集
サポートタグ

+++ 第4.2章 画像表示 +++

戻る
次へ



■ ファイルの種類

ウエブページ上で表示できる画像ファイルは、GIF(ギフ又はジフ)とJPEG(ジェイペグ)の2種類です。 他にも色々種類がありますが、 今はこの2つで作成されるのが一般的です。2つの画像の使い分けは、以下のとおりです。

ロゴなどの文字 - GIF 色数が、256色以下
写真等 - JPEG フルカラー表示

じわじわっと画像がクリアになっていくインターレスの詳細をこちらにに記載してます。



■ トリミング

画像データの取り扱いは、大変扱いが難しいです。テキストだけですと味気ないですし、バンバン画像を張り付けると重くなってしまいます。 なるべく、工夫して画像サイズを小さくする努力をしましょう。HEIGHT、WIDTH属性で画像を小さくする事ができますが、 ファイル自体は変わっていないので、効果全然はありません。 画像サイズを小さくするには、画像自体を小さくしたり、いらない部分をカットしたりしてサイズを小さくしましょう。 又、我慢できるレベルまで減色、圧縮する事も重要です。減色の例はこちら

GIF image GIF image
0.42K
0.35K


■ ALT属性

ウエブページでは、文字以外に多くの画像データが使われています。これは、ウエブページを効果的に見せる良い手ではありますが、 ブラウザの設定で『画像を自動的に読まない』に設定している方もいます。 画像を読むと時間がかかる為です。 ALT属性を設定していないと、画像なのかナビゲーションボタンなのか、わかりません。 ページ内のどこかにテキストリンクがあればいいのですが、無い場合は完全に迷子です。画像を中心にナビゲーションするサイトを目指している方は、 テキストリンクをどっかに必ず用意しましょう。 関連タグは、こちら

画像リンクテキストリンク
GIF image Home


■ HEIGHT,WIDTH属性

ブラウザではページ内の画像サイズが判るまでページ内のテキスト等を表示できないと言う特徴を持ってます。 これらを指定していれば先に画像の分のスペースを空けてテキストが先に表示されナビゲーションができる事になります。 よく、画像が張ってあるところが枠線だけで、表示される場合がありますがこれです。 これは、画像の大きさを自分で勝手に見やすい様に指定する為の属性ではありません。微調程度に留めましょう。 関連タグは、こちら



■ 背景色に馴染ませよう

画像を張り付けた場合、背景色との間に境ができて画像をいかにも張ったと判る場合があります。 画像の背景を透明化にする機能がソフトにありますので、利用しましょう。透過GIFと呼ばれてます。

GIF image GIF image


■ 継ぎ目の無い背景画像にしよう

背景は、色の指定だけでなく小さな背景画像を作り、画面全体に広がるように設定する事もできますが以下の点について注意しましょう。

大きなイメージを使うと、読み込みに時間がかかります。
継ぎ目が見えるとかえって読みにくくなります。

関連タグは、こちら




Prev | Home | Next




Copyright(C) 1999-2000, ken_yuu All Right Reserved.

Back to top