感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

GIF、JPEG、PNGの違いと使い方

<スポンサーリンク>

CSSのこと

ドット(.)に続けてクラス名を指定するような書式のセレクタをclassセレクタと呼ぶ。
idセレクタの使い方は、ウェブページ内の一箇所を特定してスタイルを適用する場合に使用する。
ウェブページ内の複数箇所に同じスタイルをまとめて適用する場合にはclassセレクタを使う。
classセレクタはドット(.)、IDセレクタはナンバーサイン(#)に続けて記述する。

画像をフロートさせて右寄せにしたい時は、

.test_img {
	width:200px; height:150px;
	float:right	
}

のように指定する。

画像形式の違いと使い方

ウェブページに使用する画像形式はGIF,JPEG,PNGが一般的に使用される。
それぞれの特徴を紹介する。

■GIF
GIFはGraphics Interchange Formatの略で、ジフと読む。
GIFの特徴はなんといっても、扱う色が最大8ビット(256色)であるということだ。
ロゴとか、リンクボタンやアイコンなど、平坦な画像に使われる。

GIFには2点大きな特徴があって、
1つは透明色が使用できるため、輪郭を丸く見せたりできること。
もう1つは、アニメーションにできるということである。

■JPEG
JPEGはJoint Photograph Groupの略。
不可逆な圧縮画像形式、というのはJPEGの大きな特徴だ。24ビット(1670万色)まで扱うことができるので、多くの色数を必要とする写真なんかに使われる。
JPEGの圧縮形式は、色調変化の部分のデータを「捨てる」ことでファイル容量を小さくしている。
これは「明るさの変化に比べて、色調の変化には比較的鈍感」という人間の目の性質を意識したものだ。
ただし、「捨てる」ことで圧縮しているため、捨ててしまったデータは元に戻せない。JPEGで圧縮率を上げて保存する場合は、元の画像をバックアップしておくことが大切である。

■PNG
PNGはPortable Network Graphicの略。
W3Cが推奨する画像形式がPNGだ。
PNGはフルカラーにも8bitカラーにもすることができる。圧縮率が高い。可逆圧縮方式を採用している。など、なんか万能の画像形式だ。
ただし、アニメーションにできなかったり、フルカラーだとJPEGよりファイルサイズが大きいなどの短所もある。

読んだ本

はじめてのHTML+CSS (TECHNICAL MASTER)

はじめてのHTML+CSS (TECHNICAL MASTER)

感謝のプログラミング

今回で感謝のプログラミングは【415時間目】
10000時間まで、あと【9585時間】