★Favicon

favicon（ファビコン）=Favorite iconの設置。

＜favicon.icoの作成＞

Photoshopで.icoを開く為のプラグインをインストール
↓↓↓
★Photoshop ICO (Windows Icon) Format plugins
http://www.telegraphics.com.au/sw/icoformat.ja.html

マルチアイコンを作成するので、
icoサイズ： 32×32px、16×16pxの2種類の.icoを作成。（RGB/8bit）
※縮小する場合は、画像の再サンプル：バイキュービック法（シャープ）
（保存先： C:\Program Files\Adobe\Adobe Photoshop CS3\プラグイン\ファイル形式\ICOFormat.8bi）

複数サイズの.icoを1つの.icoに変換するソフト
↓↓↓
★＠icon変換
http://www.towofu.net/soft/aicon.php

2つの.icoファイルを読込み、2つを選択したまま、
ファイル→マルチiconとして保存。（ファイル名：favicon.ico）


＜アップロード＞
ルートディレクトリにfavicon.icoをアップロードする。

-HTML-
<head>
～
<link rel="shortcut icon" type="image/x-icon" href="http://xxxx.co.jp/favicon.ico" />
</head>

※ルートディレクトリにfavicon.icoをアップしている場合、特に記述の必要はない。

★特殊文字

м： &#1084;
д： &#1076;
ю： &#1102;
☺： &#9786;
☻： &#9787;
♠： &spades; = &#9824;
♥： &hearts; = &#9829;
♦： &diams; = &#9830;
⋆： &#8902;
☠： &#9760;
☤： &#9764;
☥： &#9765;
☪： &#9770;
♅： &#9797;
♆： &#9798;
♓： &#9811;
♛： &#9819;
✞： &#10014;
✟： &#10015;
✡： &#10017;
✯： &#10031;
ⓒ： &#9426;
ⓚ： &#9434;

★sup/sub

＜sup（superscript） -上付文字-＞
⁰： <sup>0</sup> ＝ &#8304；
¹： <sup>1</sup> ＝ &sup1； ＝ &#185；
²： <sup>2</sup> ＝ &sup2； ＝ &#178；
³： <sup>3</sup> ＝ &sup3； ＝ &#179；
⁴： <sup>4</sup> ＝ &#8308；
⁵： <sup>5</sup> ＝ &#8309；
⁶： <sup>6</sup> ＝ &#8310；
⁷： <sup>7</sup> ＝ &#8311；
⁸： <sup>8</sup> ＝ &#8312；
⁹： <sup>9</sup> ＝ &#8313；

＜sub（subscript） -下付文字-＞
₀： <sub>0</sub> ＝ &#8320；
₁： <sub>1</sub> ＝ &#8321；
₂： <sub>2</sub> ＝ &#8322；
₃： <sub>3</sub> ＝ &#8323；
₄： <sub>4</sub> ＝ &#8324；
₅： <sub>5</sub> ＝ &#8325；
₆： <sub>6</sub> ＝ &#8326；
₇： <sub>7</sub> ＝ &#8327；
₈： <sub>8</sub> ＝ &#8328；
₉： <sub>9</sub> ＝ &#8329；

★透過PNG

＜JPEG/GIF/PNG＞
非可逆圧縮（画質劣化あり）/可逆圧縮（画質劣化なし）/可逆圧縮（画質劣化なし）
約1678万色(24bit)/256色(8bit)/約1678万色(24bit)、約280兆色(48bit)

＜透過PNG書き出し＞
Photoshop： [Web用に保存]→PNG-8（256色/8bit）
（Fireworks：PNG32）


IE6でPNG画像を表示する↓↓↓

★背景PNG
#div {
background: transparent url(../img/alpha.png) no-repeat left top !important;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/alpha.png", sizingMethod="scale");
}

※～IE6は、同一プロパティ内の!important指定よりも、常に後に書いた方が優先される。


★img画像PNG
-HTML-
<div>
<img src="../img/alpha.png" width="100" height="100">
</div>

-CSS-
* html div {
background-image:url(../img/bg.gif);
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/alpha.png);
}
* html div img {
display:none;
}

★CSSハック

＜～IE6＞
* html #div { color: #000; }
（#div { _color: #000; } ）

＜IE7＞
*:first-child+html #div { color: #000; }
（*+html #div { color: #000; } ）

＜IE6、7＞
#div { /color: #000; }

＜IE8＞
#div { color: #000\9; }

＜Firefox＞
#div, x:-moz-any-link { color: #000; }

＜Safari 3～, Chrome, Opera 9～, Firefox 3.5～＞
body:first-of-type #div { color: #000; }

＜iPhone＞
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#div { color: #000; }
}