画像スタイルシート作成 JavaScript の説明
戻る


画像ファイルを使わずにスタイルシートだけで画像を表示してみようという，実に馬鹿な試みです．
「遊び部屋」にあるおもちゃは，どれも実用性などは全く考えていないお遊びですが，その中でもとりわけ何の役にも立たない物です．


使い方

まず，元になる画像ファイルを用意します．ファイル形式は，Image エレメントで表示できるものであれば何でも使えると思います．
「入力ファイル」でそのファイルを選択します．選択したファイルのサムネイルが表示されます．
画像の分割の有無と透過の有無を選択し，「作成」をクリックします．画像の分割と透過については後述します．
画像スタイルシートの作成が完了すると，作成した画像が表示されます．

「表示」をクリックすると，作成した画像を別ウィンドウで表示します．
「保存」をクリックすると，作成した画像をファイル ダウンロードの形で保存できます．


画像の作り方

スタイルシートの box-shadow プロパティを使います．
box-shadow は任意の HTML 要素に対して影を付けることができるプロパティで，次のようなパラメータを指定できます．
  • 水平オフセット

  • 垂直オフセット

  • ぼかし半径

  • 広がり距離

  • 色

  • インセット
水平オフセットと垂直オフセットで指定した位置に指定した色の影を表示することができます．
ぼかし半径と広がり距離を 0（既定値）にすると，影は対象の要素と同じ形・大きさになります．
インセットはこのプログラムでは使いません．

画像の左上の位置に幅／高さ 1px の要素をひとつ置いて，その影として画像の各ピクセルを表示します．
要素と影 1
水平オフセットと垂直オフセットをともに 0 にした場合は，影は基の要素と重なります．その場合でも要素が透明であれば影の色が見えてよさそうなものですが，実際には基の要素の下になる部分の影は表示されないようです．そのため，基の要素の位置（左上）のピクセルだけは要素の background-color プロパティで表示しています．


画像の分割

上述のような方法で，ひとつの HTML 要素の影として画像を表示することができますが，画像を複数のブロックに分割して，そのそれぞれについて画像を作って，それを並べて表示するという方法も選べるようにしました．
「画像を分割する」をチェックしない場合はひとつの HTML 要素だけを使って画像全体を表示します．「画像を分割する」をチェックした場合は，このように複数の HTML 要素を使って画像を分割して表示します．
要素と影 2
そのような方法も使えるようにした主な理由は Firefox での表示の重さを軽減するためです．
Firefox は他のブラウザに比べて box-shadow の表示処理が重いようです．特に，水平オフセット／垂直オフセットが大きくなると極端に処理が重くなるようです．その対策として，画像を分割することでオフセットがあまり大きくならないようにします．
具体的には，画像を幅／高さ 100px のブロックに分割します．そうするとオフセットは 99px 以下になります．

画像を分割すると，作成した画像の HTML の大きさ（文字列の長さ）を小さくする効果もあります．
オフセットが 2 桁以下なのでオフセットを表す文字列が短くなります．分割すると基にする要素が増え，その分タグやスタイルの記述が増えますが，画像の大きさがある程度大きければ，オフセットが短くなることの効果が大きいので，HTML 全体の大きさは小さくなります．


透過画像の扱い

画像にはアルファ チャネルなどでの透過処理が可能なものがあります．元の画像の透過度を box-shadow の色指定に反映させるかどうかを「透過を有効にする」で指定します．
「透過を有効にする」をチェックしない場合は色の指定に #RRGGBB （RR，GG，BB はそれぞれ色の赤，緑，青の成分の 16進表記）の形式の色コードを使います．元画像に透過度の設定がある場合でも透過度は無視されます．
「透過を有効にする」をチェックした場合は色の指定に #RRGGBBAA （AA は透過度の 16進表記）の形式の色コードを使います．


作成例

実際にスタイルシート（HTML）を作成した例です．画像の分割はしていません．

戻る