1. 画像ファイルの形式

Webページに表示する画像ファイルは、JPG、PNG、GIF、SVG の4種類のファイル形式が主に使用されます。このうち、JPG、PNG、GIFの3種類は、ピクセルの集合でできているラスターデータという種類の画像の中でも、サイズが軽い圧縮形式の画像ファイルです。

JPG（ジェイペグ）は拡張子「.jpg」のファイルで、RGBがそれぞれ256段階の約1678万色を表現することができるが、透明は扱うことができません。PhotoshopなどでJPG形式で書き出すときは、「画質」の設定が良いほどファイルの容量は大きくなるので、状況に応じて設定します。JPGは非可逆圧縮という元に戻すことができない圧縮形式なので、書き出し前の元の画像ファイルは必ず保存しておきましょう。

PNG（ピング）は拡張子「.png」のファイルで、さらに「PNG-8」「PNG-24」「PNG-32」などの種類があります。PNG-8は256色、PNG-24はRGBがそれぞれ256段階の約1678万色、PNG-32はさらに256段階の透明が扱えます。透明を扱えるのが特徴です。

GIF（ジフ）は拡張子「.gif」のファイルで、256色を扱うことができます。透明も扱うことができますが、PNGの透明と違い、半透明は扱うことができません。また「GIFアニメ」と呼ばれるアニメーションも扱うことができます。

SVGは拡張子「.svg」のファイルは上3つと異なり、点の座標や線の太さなどの数値でできているベクターデータという種類の画像です。拡大縮小しても画像が荒くならないのが特長です。

形式色数備考
JPG約1678万色非可逆圧縮
PNG-32約1678万色 + 透明度256段階透明が可能
GIF256色 + 透明透明が可能（半透明は不可）。アニメーションも可能
SVG約1678万色 + 透明度256段階伸縮可能

演習

PhotoshopやIllustratorを使用して、JPG、PNG、GIF、SVGなどを作成してみましょう。

info

Photoshopの演習

以下の操作を確かめましょう。

  • 画像の切り抜きを行う
  • 画像の解像度を変更する

画像の書き出し方法を確かめましょう。

  • 「ファイル」→「書き出し」→「Web用に保存（従来）」から、形式、サイズを確認して保存する。

info

Illustratorの演習

以下の操作を確かめましょう。

  • 新規ファイルをカラーモードRGBで作成する。
  • 「長方形ツール」「楕円ツール」などで図形を描いてみる。
  • 「選択ツール」で移動や拡大縮小をしてみる。
  • 「文字ツール」で文字を入力してみる。（空の文字を作ってしまわないように注意）
  • 「プロパティパネル」で色やフォントを変更してみる。
  • 「レイヤーパネル」で重ね順を変更してみる。

画像の書き出し方法を確かめましょう。

  • 「ファイル」→「書き出し」→「Web用に保存（従来）」から、形式、サイズを確認して保存する。

2. Webページに画像を表示する

img要素

HTMLで画像を表示するには img要素 を使う。img は image の略。

<img>
タグは終了タグが必要ない空要素で、
src
属性と
alt
属性を追加します。

<img src="画像ファイル" alt="代替テキスト">

src
は source の略で、表示したい画像を指定する。画像ファイルがWeb上にある場合は URL で、HTMLファイルと画像ファイルが同じ場所にある場合は相対パスで指定します。

alt
は alternative text の略で、画像が表示されない場合に代わりに表示される代替テキストを指定します。音声読み上げでWebページを閲覧している場合にも使用されます。追加しなくても画像の表示は可能ですが、アクセシビリティの面で有効なので追加することが推奨されます。

画像の幅と高さ

width
属性や
height
属性を追加すると、画像の幅や高さを指定できます。値はピクセル数で指定する。片方だけ指定すると、もう片方は縦横比を維持して自動で計算されます。画像の幅と高さはCSSでも指定できます。

<img src="画像ファイル" alt="代替テキスト" width="幅">

参考：<img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN

3. CSSで背景画像を使用する

背景画像のプロパティ

要素に合わせて表示する

要素の大きさに合わせて背景画像を表示したい場合は、以下のような指定を試すと良いです。

セレクタ {
    background-image: url(画像ファイルのパス);
    background-size: cover; /* 要素に合わせて拡大・縮小 */
    background-repeat: no-repeat; /* 繰り返さない */
    background-position: center; /* 中央 */
}

参考：background-attachment - CSS: カスケーディングスタイルシート | MDN

提出方法：zip形式

Webページが入ったフォルダ（HTMLファイル、CSSファイルが入ったフォルダ）を圧縮形式にして、1つのファイルとして扱うことができます。

Windowsの場合

zip

Macの場合

zip mac