真・PNG・完結編・2
最終更新日: 2010年3月 7日 (日曜日) 06:13:20 PM
『Windows IE 6 では、「半透明 + 透過 PNG」を background プロパティに指定することは出来ない。』というのが、2006年1月までの当サイトに於ける結論であったが、あれから暫く情報収集を怠り、「IE 7 でもあまり違いはないだろう」と侮っていたら、遂に、この「半透明 + 透過 PNG」に『けり』を付けるという止ん事無いお方が現れていた。DesignWalker という今を時めくウェブデザイナー様のサイトである。曰く所、元"韓流"プログラマ様との共作であるとのこと。素晴らしい！これで、旧態依然の IE に於いてもブラウザ振り分けによって透過 GIF を読み込ませる必要がなくなった。（作成日: 2007年5月28日 (月曜日) 01:10:31 AM）
早速、動作確認がてらサンプルを作成した。iepngfix.htc もしくは iepngfix.js の設置方法は上記のサイトを、画像の作り方は下記の解説をご参照頂きたい。
サンプル（要 javascript）
GIMPでの半透明PNGの作り方（影付角丸四角編）
元になる影付角丸四角形を作成
| 1. 「ファイル／新規」より、200×150 px の新規画像を作成。 「全てを選択」し、「選択／角を丸める」をクリック。スクリプト引数の半径を適宜設定（今回は50％）、角丸の選択範囲を作成する。 | |||||||||||
| 2. 選択範囲内を任意の色で塗りつぶす。 角丸の境界と、Top、Bottom、Left、Right で使用する箇所にガイドを引く。 | |||||||||||
| 3. 角丸四角を作成したレイヤーの不透明度を適宜設定する。（今回は70％） | |||||||||||
| 4. 「Script-Fu／影／ドロップシャドウ」を選択し、影を適宜設定し、実行。「画像サイズ変更可」のチェックを入れておく。
| |||||||||||
| 5. 角丸四角を作成したレイヤーを右クリック、「下のレイヤーと結合」を選択し、ドロップシャドウを作成したレイヤーと結合させる。 ドロップシャドウを作成するとキャンバスサイズが変わる為、背景レイヤーを削除し、白色のレイヤーを新規作成して新たな背景画像とすると作業しやすい。 | |||||||||||
| 6. ドロップシャドウ指定の際、 オフセットx、オフセットy で影の位置を x, y 軸方向へずらした時は、ガイドの補正を行う。 ずらす距離の目安は、元になるガイドの位置から「オフセットx (y) ＋3〜5px」と考えると良い。「3〜5px」は、影のぼかし具合によって変動する「遊び」にあたる。ちなみに今回は 3px にした。 左図では、ドロップシャドウ直後に、左上の角丸に x軸方向に47pxの縦ガイド、y軸方向に45pxの横ガイドが入っている。 よって、x軸方向は「47＋3＋3＝ 53px」、y軸方向は「45＋5＋3＝ 53px」へと、それぞれのガイドをずらすことになる。 | |||||||||||
| 7. 左上の角丸部分を選択してコピー。 画面隅に出る選択範囲のサイズを覚えておく。 注意） これから、一度作った角丸四角形を元に、左上、右上、左下、右下用の角丸と、上下左右中央の繰り返し用に使われる半透明+透過PNG画像を新たに作成し、スタイルシートの Background プロパティに指定する作業に移る。 左図における白い×印で示した部分は、完成画像が型崩れしない為の配置基準点にあたり、画像を作り替える際とスタイルシートに指定する場合に必要となる。 | |||||||||||
各パーツ毎の半透明＋透過PNGを作る
| 8. 左上角丸の半透明＋透過PNGを作る為、新規画像を作成する。 画像をコピーしたまま「ファイル／新規」をクリックすると、左図のように余白を含まない縦横サイズが指定されてしまう為、6. で画面隅に出ていた選択範囲のサイズに書き換える。 | |
| 9. また、「高度なオプション」をクリックすると、左図のように、解像度や色空間、背景色やコメント記載欄などを指定できる。 背景色を透明にしたい場合は、「塗りつぶす色」を「透明部分」に変更すると良い。 | |
| 10. 新規画像に 6. でコピーした左上角丸をペーストする。そのままだとキャンパスの中央にペーストされる為、ペーストした画像の右下角を、配置基準点であるキャンバスの右下角（左図赤×印）に合わせておく。 また、色のついた背景レイヤーがある場合は必ず破棄する。 | |
| 11. 「LeftTop.png」と名前を付けてPNGで保存する。「背景色を保存」のチェックは必ず外しておくことが肝要。 同様に、残りの角丸も作成する。画像名は下記の通り。 右上の角丸→「RightTop.png」 左下の角丸→「LeftBottom.png」 右下の角丸→「RightBottom.png」 | |
| 12. 角丸の時と同様に、上下左右用と中央の半透明＋透過PNGを作成する。左図の赤枠で囲まれている該当箇所を参考に作られたし。 上下左右はx・ｙ軸方向へ、中央は全方位へ画像を繰り返すことになる為、画像自体を大きくする必要は無い。 画像名は下記の通り。 上→「Top.png」 左→「Left.png」 右→「Right.png」 下→「Bottom.png」 中央→「Text.png」 | |
Table タグと該当するスタイルシートの記述
9種類の画像ができあがったら、スタイルシートを記述する。画像の配置と記述内容については下図を参照のこと。尚、 width 、 height の記述がある場合は、それぞれの画像の大きさに合わせて適宜訂正が必要であるので注意。
.LeftTop{
background-image:url(LeftTop.png);
background-position:right bottom;
background-repeat:no-repeat;
width:47px;
height:45px;
} |
.Top{
background-image:url(Top.png);
background-position:left bottom;
background-repeat:repeat-x;
height:45px;
} |
.RightTop{
background-image:url(RightTop.png);
background-position:left bottom;
background-repeat:no-repeat;
width:53px;
height:45px;
} |
.Left{
background-image:url(Left.png);
background-position:right top;
background-repeat:repeat-y;
width:47px;
} | ＊文章欄
.Text{
background-image:url(Text.png);
background-position:left top;
background-repeat:repeat;
color:#ffffff;
} |
.Right{
background-image:url(Right.png);
background-position:Left top;
background-repeat:repeat-y;
width:53px;
} |
.LeftBottom{
background-image:url(LeftBottom.png);
background-position:right top;
background-repeat:no-repeat;
width:47px;
height:55px;
} |
.Bottom{
background-image:url(Bottom.png);
background-position:left top;
background-repeat:repeat-x;
height:55px;
} |
.RightBottom{
background-image:url(RightBottom.png);
background-position:left top;
background-repeat:no-repeat;
width:53px;
height:55px;
} |
完成図
| これが完成図。分かり易いように<table border="1"> を入れてみた。 上手くいけば、中央部分にどれだけ文字を書いても半透明＋透過の角丸四角中に文章が収まる。 ちなみに、MacIEでは「サイズ63x63px 以下の半透明PNGを background で使用した場合、半透明にならない」というバグがあるため、Top、Left、Right、Bottom、Text が影なしの不透明で表示される。しかし角丸の部分だけ半透明で表示されているのは何故なのだろう。 | ||
