画像について少し学びましょう！

画像を表示するには？

HTMLで画像を表示するには<img>タグのsrc属性を使いWebページに画像を投入する方法と、 CSS で background-image プロパティを使い背景に画像を表示する方法があります。これらは画像ファイルのパスを指定し画像を表示します。

利用可能な画像のファイル形式は？

利用可能なファイルの形式にはJPEG形式、GIF形式、PNG形式の３つの種類があります。それぞれに特徴があり、それらを考慮して画像に適したファイル形式を選ぶことにしましょう！

画像のファイル形式とファイルサイズ

Webページを作るときに大切なことの一つが、画像のファイルサイズ（画像の情報量）です。それはなぜでしょう？それは、ユーザーのパソコンの通信速度が皆速いわけではないということです。あなたの作ったホームページを訪れたユーザーがページを表示するたびに時間がかかったら、苛立ってしまい別のホームページに去っていってしまうかも知れません。ですから、画像を圧縮するということはホームページを作成する上で大切な作業のひとつです。ですが、ただ圧縮すればいいというわけではありません。画質とファイルサイズのバランスを考える場合、ファイル形式の特徴に合った画像の圧縮は、画像の乱れを軽減できますが、ファイル形式の特徴に合わない画像の圧縮は画像の乱れが激しくなります。
このことから、ファイル形式を学ぶことはたくさんのユーザーに気持ちよく利用してもらうために大切な要素と言えます。

画像に利用可能なファイル形式の特徴！

ファイル形式（読み）	拡張子	指定できる値
JPEG形式（ジェイペグ）	jpg	JPEG（Joint Photographic Experts Group）形式は、写真画像に使用される形式で、フルカラー（約1677万色）の色が使えます。画像編集用ソフト（Photoshop Elementsなど）で画像を自由に圧縮することができます。
GIF形式（ジフ）	gif	GIF（Graphic Interchange Format）形式はイラストやロゴ、アイコンなどの色数の少ない画像に使われます。256色の色が使えます。また、パラパラ漫画のように画像を連続表示したりできます。これをアニメーションGIFと呼びます。
PNG形式（ピング、ピーエヌジー）	png	PNG（Portable Network Graphics）形式は、GIF形式と同じく、イラストやロゴ、アイコンなどの画像に向いており、256色でも、フルカラーでも保存できる。GIFに代わる画像形式です。劣化しないのが特徴だが、色数によってはファイルサイズがかなり大きくなります。背景が透過の画像にすることができる。現段階では対応していないブラウザもあります。

CSSを使用すれば、画像の回り込みも設定できる

CSSでは文章の右や左に参考の画像などの回り込みを指定できます。「回り込み」とは、文章が画像を避けて表示されます。画像などに回り込みの効果を与えるには、float プロパティを参照してください。実際の表示例は下の枠線内です。

[表示例]
※下の枠内の記述内容は float プロパティを使用した他のページの一部を表示例として掲載したもので、
「画像の回り込み」について説明するものではありません。
CSSの基本的な書式 CSSでデザインを指定するには、右図のように記述します。まずはセレクタにはデザインを適応する要素を、プロパティにはデザインの種類を、値にはデザインの程度や種類などを記述します。「何の（セレクタ）、何を（プロパティ）、どのように（値）する」と覚えるといいかもしれません。例えば右図の記述例で言うと「h1要素の文字のサイズを20px（「px」に関してはこのページの下にある「単位と長さ」で説明しています）にします」ということです。そしてプロパティと値を「{ 」と「} 」（中カッコ）でとじ、プロパティの後に「:（コロン）」値の後に「;（セミコロン）」を記述します。