SEO対策クレアネットクリエイターブログ

■ PNG
png画像には、PNG-8,PNG-24,PNG-32という３つの規格が存在します。

PNG-8
…gifと同じ256色以下を扱うことができ、1色の透過ができます。

PNG-24
…フルカラーを扱うことができます。

PNG-32
…フルカラーかつアルファチャンネルという複数色の透過処理が扱えます。
…（古いブラウザでは対応していません）

■ GIF
gif画像は色数の少ない画像を保存するのに適しています。
背景の透過やアニメーションにすることができるため、主にボタンやアイコンなどといったWeb素材で活躍しています。
色数が256色までなので、注意が必要です。

「デコ絵文字」の多くもgif画像です

画像のファイル形式には様々な種類がありますが、
ウェブサイトでは、主にJPEG・PNG・GIFの三種類がよく使用されます。

■ JPEG
jpeg画像は、写真など色数や色の変化の多い画像を保存するのに適しています。
携帯やデジタルカメラで撮って保存される写真もこの形式のものが多いです。

レイヤーは層・階層などの意味を持つ単語です。

ペイントソフトなどでよく出てくる「レイヤー」機能は、
透明なフィルムを重ね合わせて１つの画像を作成することができます。

アニメのセル画に例えられることが多いです。

ボックス要素をインラインフレームのように表示するには、
高さもしくは横幅を指定し、overflowプロパティを設定します。

overflowは、はみ出た内容をどう処理するのか指定するプロパティです。

div.test {
   height: 100px;
   width: 500px;
   overflow: auto;
   border:1px solid #000;
}

marginとpadding

どちらも要素に余白を設定するプロパティですが、

このように、
marginは、枠線の外側の余白
paddingは、枠線の内側の余白
になります。

横幅の設定されたブロック要素を中央揃えにするには、marginプロパティで左右の余白にautoを指定します。

div.test1 {
   width:300px;
   border:2px solid #000;
   margin:0 auto;
}
div.test2 {
   width:350px;
   border:2px solid red;
   margin:10px auto;
   text-align:center;
}

marginプロパティは、要素の外側に余白を指定できます。

div.test1 {
   background-color:#dadada;
   margin:20px;
}
div.test2 {
   background-color:#dadada;
   margin-top:2em;
}
div.test3 {
   background-color:#dadada;
   margin:20px 100px;
}

paddingプロパティは、要素の内側に余白を指定できます。

div.test1 {
   background-color:#dadada;
   padding:5px;
}
div.test2 {
   background-color:#dadada;
   padding:30px
}

background-colorプロパティは、要素に背景色を指定するときに使用します。

div.test1 {
   background-color:#aaa;
}
div.test2 {
   background-color:lightblue;
}