HP相談室 > HP作成講座 > 基本的なテクニックを使おう〜画像編〜

►基本的なテクニックを使おう 〜画像編〜
ココでは画像に関することを説明します。

-目次-
■ 画像を用意する
■ 画像フォーマット
■ 画像を貼り付ける
■ 画像の大きさを調節する
■ 背景に画像を貼り付ける
■ 背景に画像を貼り付ける時の注意


画像を用意する
ホームページに画像を張るには、言うまでも無く画像が必要です。用意する方法としては、

1.自分で用意する
自分で絵描きソフトを使って作成したり、デジカメで撮影したりスキャナで取り込んだりして準備します。
2.オンラインの素材を使う
オンラインでウェブ素材と呼ばれる画像(フリーもシェアもあります。)が多数公開されているので、それを使わせてもらう。
3.本などからゲットする
本屋さんのコンピューター関連の雑誌を売っているところに行けば、CD-ROMにたくさん画像が入った本などがあります。ただ本を買うのにお金がかかりますね。
4.書いてもらう
お金を支払ってプロに書いてもらったり、ウェブ上の絵作成サービスで書いてもらう。

等がありますが、1と2が多いですね。


画像フォーマット
ホームページで使われる画像フォーマットとしてよく使われるのがGIFです。他にはJPEGやPNG等が用いられます。それぞれに長所も短所もあります。

1.GIF
GIFはもっともホームページを作成する上で作成されていますが、アイコンやバナー以外には、256色しか使えないということで、使用が難しいです。ただ、透過画像を作れるので、アイコンに一番むいています。
2.JPEG
これもホームページでは結構使われているフォーマットです。デジカメで撮影した画像はほとんどがJPEGでしょう。JPEGは256色じゃないので、いろんなことに使えます。が、圧縮しすぎると画像が汚くなり、見栄えが悪いです。JPGとJPEGとありますので注意。
3.PNG
PNGはGIFの特許問題からよく使われるようになったフォーマットで、BMP並の画質です。しかし、GIFと違いファイルサイズが大きくなってしまうので、ナローバンドの人を考えるとあまり使えません。


画像を貼り付ける
画像の準備が出来たら、画像を貼り付けましょう。画像を張るには下のようにします。

<img src="画像のURL">

これで画像を張ることが出来ます。画像は同じディレクトリに入れておくと便利です。同じディレクトリに入れておけば、<img src="そのファイル名">で表示することが出来るからです。たとえばimg.gifを貼り付ける時に、<img src="img.gif">とこれだけですみます。


画像の大きさを調節する
大きな画像を小さくしたり、小さい画像を少し大きくしたりする時には、下のようにします。

<img src="画像のURL" width="幅" height="高さ">

幅と高さは数字を入れてください。じゃぁ実際にやってみます。

<img src="simple.gif" width="50" height="50">
本当の大きさはこちら

本来100*100ピクセルの画像が50*50ピクセルになりました。


背景に画像を貼り付ける

背景に画像を表示する方法です。

<body background="画像のURL">

これだけです。


背景に画像を貼り付ける時の注意
背景に使う画像には十分注意して欲しいことがあります。それは、背景の画像が明るすぎて文字が読みにくくなることです、例えば

コレはテストです。コレはテストです。コレはテストです。
コレはテストです。コレはテストです。コレはテストです。
コレはテストです。コレはテストです。コレはテストです。

まぁ上みたいな画像はありえないとは思いますが、文字がすごい読みにくいですよね。こんな風になると、人が来ても見てもらえなかったり、もう来てもらえなくなったりします。なるべく背景に使う画像が文字を読みにくくしないような画像を使うと言いと思います。