のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その22:webページを作る上で…

22日目です。いよいよ佳境ですね!floatまで行けるのか自信無くなってきましたw

という訳で本日のお題【webページを作る上で、ストレスを与えてはいけない】について書いていこうと思います。

ストレスを与えない

CSSをうまいこと使って、画像を減らせばその分軽くなる!

という事です。

例えば、こんなボタンがあったとします。

img1

これは画像なので、やはり容量が若干大きくなってしまいます。

さて、これをCSSで書いてみようじゃないか。という試みです。

img2

まあ、パーッと書いたのであれですが、細かい調節は抜きにして、こんな感じにだいたい書きます。そうしますと…

img3

お?なんとなーく同じようなの書けちゃうじゃん!となります。

(細かい調節をちゃんとすれば同じボタンは作れますが今回は手抜きです。)

 

※この比較に関しては、2つとも「画像」なので特に違いはありません。

 

以上を踏まえてのまとめですが、

「画像で作らなくても、簡単なものならCSSで充分表現出来る!」という事でした。

 

さいごに蛇足。

webで使える画像形式は主に3種類あります。

.jpg→写真1670万色を扱える。透過不可。主に写真用

.pngPNG-8とPNG-24がある。8は256色、24は1670万色。透過可。jpgとgifの良いとこ取り。

.gif→ロゴやイラスト用。256色(8ビット)、透過可。平坦な画像に向いている。

 

使い分ける、これ、人類の知恵。