サイトリニューアル進捗報告（09/17現在）

昨日書いたように、当サイトの新URL上では、携帯とＰＣとの振り分けをJavascriptでuseragentを取得し、そこに携帯会社の名前を表す文字列が入っているかどうかで識別することにしました。
これにより、昨日参考にさせていただいたサイト（再掲：http://smkn.xsrv.jp/blog/2010/08/redirect-from-pc-to-mobile-by-useragent/、この中のJavascriptによる方法）によれば、携帯とＰＣとの振り分けはほぼ確実にできるようですが、それではJavascriptオフのPCも携帯側に振られてしまう問題がある旨申し上げました。

Googleサイトでは、サーバ側で自動振り分けなどの設定が自由にできないため、やむを得ないのですが、もしサーバ側で設定ができれば、上のサイトの中の.htaccessを用いる方法により、サーバ側でほぼ確実に振り分けができるようです。これならば、ユーザー側のPC環境（Javascriptオフかどうか）は関係ないことになります。
当サイトはやむを得ないとしても、仰せつかっているWingBrainのサイトの方はURLが別のプロバイダのものですので、こちらは.htaccessの方法によりできるかもしれません（念のため確認はしてみますが）。
なお、useragentは簡単に偽装できるとの指摘もありますが、ここでの主旨はあくまで表示、デザインに関することなので、何らかの意図（悪意？）があって偽装している人に対して対応する必要は無いと考えています。

サーバ側でほぼ確実に振り分けができるならば（あるいは、Googleサイトが将来機能拡張した場合なども想定し）、当初の考えの通り、Javascriptオフでも、CSSのみを用いて画像表示やロールオーバーなどができるようにしたいと思っています。
ただし、画面（ウィンドウ）サイズに合わせて動的に画像サイズの拡大縮小をするのは、やはりJavascriptオフでは難しく、そこは固定サイズになると思います。
この場合、多分ウィンドウから画像がはみ出るので、画像全体を見たりボタンを探すにはページをスクロールしなければならなくなりますが、携帯ではなく画面サイズのある程度大きいであろうPC環境ならば、何とかお許しいただけるかとも思っています（あるいは、やはりJavascriptオフならば、画像類は一切オフが良いのでしょうか。。）。

既述のように、当サイトの新デザインでは、CSSオフの場合（携帯からの場合は強制的にJavascritptオフ・CSSオフ扱いにする予定です）は画像が一切表示されず、テキストのみ表示されるようにする予定です。

当初は、画像表示の制御に関してはaタグやpタグのbackground-image指定で全て行うつもりでおり、それだと全てCSSから制御できるので、CSSのみを用いて実現できます。
しかし、昨日申し上げたように、それを止めてimgタグを用いることにしたため、単純にCSS側で制御できないという問題が新たに生じました。imgタグ、およびそこに用いる画像ファイルのパス（src属性）はHTML本体部分に明記するものであり、これはCSSからは制御ができません（純粋なデザイン、スタイルの扱いにはならないため）。
　※参考：両者の違い
　　・imgタグ：画像の拡大縮小ができるが、画像の一部分だけの表示（クリッピング）ができない。
　　・background-image：画像の拡大縮小はできないが、画像の一部分だけの表示（クリッピング）はできる。
　　→最新ブラウザの仕様ではbackground-imageも拡大縮小可能だそうですが、古いブラウザでは不可。

そこで、色々と調べて考えた結果、imgタグとsrc属性は予めHTML本体に明記するも、合わせてwidth属性・height属性（それぞれ縦・横の長さ、これらはCSSから制御できる）をHTML本体上では「0」に指定しておき、CSSファイル上で本当の値を指定するようにすれば、上述の機能が実現できるのではないかと考えました。
通常は、外部CSSの指定よりも、HTML本体に直接書かれた指定（インライン指定）が優先されるのですが、CSS側で「! important」と記述すると、そちらが強制的に優先されることを知りました。
（参考：http://css-happylifezero.com/basic/specificity.shtml）
この方法で行けるかなと考えていますが、やはり実際に試して確認したいと思います。


あと、一つまだ残っている問題は、Javascriptオフ、CSSオンなのに、画像表示はオフにしているPC環境への対処。非常にレアケースでしょうが、全く考えられないわけではないでしょうし、Javascriptオフ、CSSオン（、画像表示オン）といった今時実際的にはレアなパターンを上で考えている以上、こちらも一応考えておかないといけませんね。

少し考えたのですが、この場合は、画像の代替となる説明テキストの表示の優先順位を最背面に指定することで、対処できるかなと思っています。
（参考：http://w3g.jp/css/display_position/z-index）
　・画像が表示される場合→文字は背後に重なり、見えなくなる。
　・画像が表示されない場合→前面にある画像類が無くなるため、文字が見える。
　　→当方のPCで画像表示オフの場合、後ろは透けて見えることを確認済
背景画像が画面いっぱいにあるならば、文字をそれよりも背面にすれば、位置やサイズは関係なくなります。
また、imgタグはalt属性（画像が表示されないときに代替で表示する文字）もありますが、短いフレーズは必ず入れるべきとの指導がある一方、あまりalt属性には長い文章を書くべきではないとのエチケットがあるようなので、例えば画像に対応する説明項目のタイトルをalt属性に、本文を背後の文字にするようにしようかなとも思っています。
（参考：http://soudan1.biglobe.ne.jp/qa5267938.html）


最後に蛇足。今さらながら、透過PNGファイルを扱うための方法について、改めて調べてみました。
InternetExplorer6以前のバージョンなどで非対応なのですが、IE6ならばAlphaImageLoaderというAPIをロードすることで対処はできるようです。Javascriptオフでも可能なようで。
（参考：http://amenti.usamimi.info/ie6png.html、http://se-suganuma.blogspot.com/2010/07/javascriptfancyboxiealphaimageloader.html）
ただし、重くなること、バージョンアップの際に問題が起こること、（他のブラウザも含めた）より古いバージョンでは対応できないことなどから、やはりあまり扱いたくない方法ではあります。


では、引き続き画像ファイルとサイトページの作成に取り組みます。追ってアップロードします。