CSSの記述 2025.4.30

画像型式

web制作において画像は必ず加工して掲載（解像度、大きさの加工、適切なフォーマットを使って保存）
Appendix-2 画像型式と品質・サイズ
(1) GIF・・・ビットマップ画像
GIF（ジフ）は、Graphics Interchange Format の略称で、拡張子は、gif が使用されます。256 色までの色が使用でき可逆圧縮型式の保存形式です。背景の透過やアニメーション画像を使用することができます。
(2) JPEG・・・ビットマップ画像
JPEG（ジェイペグ）は、Joint Photographic Experts Group の略でJPEGという画像形式を作った組織そのものの名前からきています。拡張子は、jpg または jpeg です。JPEGは、フルカラー（1677 万色）を扱うことができ圧縮率を指定することができます。写真などに適していますが非可逆圧縮型式のため圧縮率の指定値によっては大幅な画像劣化が発生することがあります。
JPEG の画像比較は、高画質（画質優先）、中画質、低画質（ファイルサイズ最小）で実施しました。
(3) PNG-8・・・ビットマップ画像
PNG（ピング）は、Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-8 は、256 色までの色が使用でき GIF と同様の仕様です。
(4) PNG-24・・・ビットマップ画像
PNG（ピング）は、Portable Network Graphics の略称で、拡張子は、png が使用されます。ウェブで使われるために生まれた画像形式です。PNG-24 は、フルカラー（1677 万色）の可逆圧縮型式を採用しているため色数が多くても画像の劣化はありません。背景の透過設定も使用することができます。単に PNG というと、こちらを保存形式を示します。
SVG・・・ベクター画像
拡大してもきれい。ホームページのロゴマークに使用したりなどする。

アニメーションを使用する場合は、GIF を選択します。
背景を透過にする場合は、PNG-24 か PNG-8 か GIF を選択します。
色数が少ないイラスト画像は、PNG-8 か GIF か PNG-24 を選択します。
色数が多いグラデーション画像は、JPEG（画質優先）を選択します。
写真は、JPEG（適切な圧縮率）を選択します。
画質を優先する場合は、PNG-24 を選択します。但し、色数が多い場合は、ファイルサイズが大きくなるので注意が必要です。
ファイルサイズを優先する場合は、JPEG（サイズ優先）を選択します。但し、画質劣化が発生しますので、必ず、元画像を保管しておいてください。

CSSの復習

L3.2.1 CSS の構造（HTMLファイルとは別に記述する場合）
CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行います。
<link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”>