月別アーカイブ: 10月 2010

IE7ズーム機能

IE7のズーム機能を使って拡大縮小すると、レイアウトが崩れる
とくに縮小すると、bodyに設定した色が見えてしまう。右側に余白ができるというか。
下記サイトさんと同じ疑問。
http://hiyokokun.blog2.fc2.com/blog-entry-539.html
IEの仕様と言い切っていいものか。
と思ったけど、MSのサイトに載ってた。
http://msdn.microsoft.com/ja-jp/ie/cc787978.aspx
拡大するとoverflowでスクロールバーが表示され、縮小すると背景が見えるのは仕様。
左上0,0を基準にページ全体を拡大手縮小するよう。
IE8でズームの解釈が変わり、FireFoxやOperaなどと同じような感じに。
いろいろ難しいなぁ。。。今までどれだけ考えずに設計してきたことか・・・。

iframeによるページ切り替えはどうよ

contents以外は全部同じデザインの場合、contentsはiframeにしたほうがいいのだろうか。
要するにアドレスの移動(ページ遷移)はなしに、内容のみ切り替わる。
一応調べてみた
iframeを使用してページ切り替えする
参考)
http://iswebmag-hp.web.infoseek.co.jp/100/sample02.html
http://javascript123.seesaa.net/article/110039975.html
jQueryでhtmlを読み込む(ajaxcodedisplay.js)
参考)http://tani.dank-hearts.com/2008/03/javascripthtml.html
でも結局アドレスが変わらないということは、そのページしかアクセスしていないと捉えられるようで、SEO的には好ましくないみたい。
ちょこっとしたページならいいけど、サイト全部には不適切かな。

IE8とFireFoxのzoom機能でカラム落ちする

floatで配置したboxがIE8とFirefoxのzoom機能でカラム落ちする。
拡大の時はいいのだけど、なぜか縮小の時に起きた。
調べてみたけど、原因はあやふや。
zoom時に再レンダリングされるとか。
いつも合計100%にならないように設定(1px少なくしたり)しているけど、それでもダメなのかー
とりあえず、5pxくらい小さくしたら落ちなくなった。
width:890px
——————-
side:186px
ex:186px
main:515px
合計 887pxで落ちる

main:513px
合計885pxにした

ブラウザサイズに合わせて背景画像を拡大縮小する

ブラウザサイズに合わせてcontentsareaを調整するJavascriptは分かったのですが、
今度は背景画像を拡大縮小したい。
jQueryでいいプラグインがありました。
○SuperSized
http://buildinternet.com/project/supersized/
これは『Web Designing』 2010年5月号にも紹介されていたのだが、自分の環境で2.0はなぜかバグが生じてしまったので、あえて1.0使用。
DOCTYPEの内容やxhtmlの記述によりバグが生じていた。
DOCTYPEって結構重要なんだなと思った。
○MaxImage
http://www.aaronvanderzwan.com/maximage/bg.php
これはブラウザでの拡大縮小時に不具合があり。
実は2つのプラグインで画像の見え方が違う。
画像の拡大縮小具合・・?だろうなぁ

ブラウザサイズに合わせてheight調整

ブラウザサイズに合わせて、contentsのheightを調整するJavascript
参考)
http://d.hatena.ne.jp/tilfin/20080127/1201527795
http://d.hatena.ne.jp/modka/20090308/1236495524
ありがとうございますー
すっごく参考になりました。便利!!

エラスティックデザイン

だいたい固定幅デザインで構築していくのですが、
ブラウザに合わせてサイズを可変したいという要望があり、いまごろ挑戦する事に。
可変と言うと%で調整するリキッドデザインかなーと思いましたが
エラスティックという手もあるのだよね。
エラステッィクはレイアウト全体を拡大したり縮小したりするレイアウト。
①固定幅
pxで指定し、ディスプレイの解像度の違いに関わらず、こちらが意図したとおりのレイアウトのまま表示されるので制作しやすい
ワイドモニターで見ると、左右の余白が目立つ。
②リキッド
widthはユーザーによって異なり、
ユーザー側の環境に合わせて調節されるので、ユーザーフレンドリーである一方、
ユーザー側の環境でどのように表示されているかが把握しにくく、
デザイン案のまま表示されない場合がある。(ようするに制作がめんどい・・・)
横に広がりすぎて1行あたりの文字数が増え、読みづらくなることも考えられる。
③エラスティック
エラスティックは固定とリキッドのいいとこどりといわれている
emでサイズ指定して、文字のサイズに合わせて拡大縮小される
bodyのfont-sizeを62.5%に設定しておくと、1em=10pxになるんだとか。
これで少しは作りやすくなるかな。