サイトの試作・続

昨夜（というか、今日の早朝？）ずっと、サイトの新デザインの試作をしていました。
先週、ＴＯＰページのＥｎｔer部分が完成したので、今週はずっと目次ページの試作です。
ＨＴＭＬやＣＳＳ、ＪａｖａＳｃｒｉｐｔを勉強しながら少しずつ進めています。

一つ気付いたのは、現行のＩｎｔernetExplorerなどあらゆる主要なブラウザに対応しようとすると、スタイルシート（ＣＳＳ）も最新のＣＳＳ３の新機能が使えないことです。
これができないと、例えば、背景画像の拡大縮小が自由にできなくなります。
画像自体はimgタグでも代用できますが、画面サイズ・ウィンドウサイズに合わせて背景画像のサイズを変えるのにＪａｖａＳｃｒｉｐｔの記述が必要になります。

ＪａｖａＳｃｒｉｐｔで記述すればよいのですが、ご覧いただく方々のユーザー環境、およびブラウザの設定によっては、いちいちポップアップの警告が出て煩わしいということもあるかと思います。
ＣＳＳだけを使えば、それが無くて済みます。ただし、半透明指定など、ＩＥで一部ＡｃｔiveXコントロールを使用する場合などは、やはりポップアップ警告が出てしまいます。

また、imgタグを使うと、一枚の大きな画像ファイルの一部分だけを切り取って表示するなどの器用なことができないようです。
逆に、background-imageを使えば、background-positionなどの属性をいじることでできます。

色々アイデアを考えましたが、今のところ辿り着いた一つの方法としては、

・予め、様々な画面サイズを想定し、何通りかの固定的な大きさで背景画像を作成し、アップロードしておく。
→画像のファイルの名前はそれぞれ別にしておく。
→どのみち、画像を動的にサイズ変更しようとすると、一部分の切り貼りの際に支障をきたす可能性がある。
（→中途半端な縮尺になったとき、断片画像を貼りつける座標の開始点が割り切れない値となり、プラマイ１ドットずれること等により、断片画像の境界線付近での表示の不具合が生じる。）
・仕方が無いので、ＪａｖａＳｃｒｉｐｔは用いることとする。（ポップアップ覚悟）
・ＪａｖａＳｃｒｉｐｔの中で、画面サイズを取得し、それに合わせて背景画像のＵＲＬ（取得する画像ファイルの名前）を変更する。
→画像を読み込む前に変更するようにし、無駄に画像を多くダウンロードしないようにする。
・background-imageとして取り込み、ロールオーバーなどの際、必要により一部分を切り取るなどして活用する。
・ＣＳＳでの半透明指定や動的なサイズ変更は用いない。
→ＩＥ５以前など、古いブラウザ、ＰＣ・ネット環境への対応のため。
→動的にウィンドウのサイズ変更をユーザーがした際、いちいち新しいサイズの画像を読み込むという無駄をなくすため
→半透明は、予め半透明な画像（の断片）を用意しておくことで対処する。

という方針です。

あるいは、もう一つの方法として、半透明機能を使う（これもポップアップ覚悟）方法もあります。どちらも一長一短ありますが、とりあえず上の方法を試してみます。

これらの方法で今晩以降また試作してみます。