Webブラウザでの検証（CSSコーディングトラブル解消例）

橋本 (2010年6月18日 18:17)
Webｺﾝｻﾙﾃｨﾝｸﾞ部

Webデザインの世界も、新しい技術を積極的に取り入れていかなければいけません。しかし、ユーザーは多くのブラウザとそのバージョンを利用し、IE6のシェアは少なくなったとはいえ、まだ20%も有るそうです。またiphone等のスマートフォンも増えているため、ブラウザでの検証は増々大変になってきましたね。

そんな中で最近対応した事例をご紹介します。

-------------------------------
画面解像度横1280pxで見栄えがするように、かつ1024pxでスクロールが出ても問題無く見られるように、横幅ギリギリの1000pxでサイトを作成した。
↓
iphoneで見ると、横が少し切れてしまい縮小表示も出来ない。iphoneは横980pxがデフォルトだから、20px削ろうかどうしようか....。
↓
ヘッダに以下の一行追加する事で解消した。
<meta name="viewport" content="width=1024" />
1024px 相当の幅のウインドウで表示される。

-------------------------------
プログラムで作成したページを「iframe」で読込む事にした。
↓
縦に長くなった場合は「overflow:auto」でスクロールバーを出したいが、iphoneでは、下に長くのびて全てが表示されてしまう。
しかもIE6で見ると、不要な横スクロールが出ている。
↓
「iframe」ではなく、読込むページの「div」に「overflow:auto」を指定してスクロールバーを出すようにした。
（iphoneでは、「iframe」の領域以上は見る事が出来ないが別ページにリンクする等で対応も可能）
読込むページの「body」にCSSで横幅を指定する事で、IEの横スクロールも消えた。

-------------------------------
画像にリンクを作成。マウスオーバー時に枠線（ボーダー）が出るようにした。
↓
マウスオーバー時の枠線分のがたつきを解消しなくてはいけない。
google chromeで枠線が出ない。
↓
CSSで「a」に「display: block;」と縦横サイズを指定することでchromeでも枠線が出るようになった。
「a:link」「a:visited」の両方に、背景色と同じボーダーを入れておく。
「a:hover」に枠線の色を指定する。
これでマウスオーバー時のがたつきも簡単に解消された。
-------------------------------

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

Webブラウザでの検証（CSSコーディングトラブル解消例）

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。