素人には「標準」より「定石」が必要だ

HTMLはどんな環境でも読めるという前提によって、スタンダードとされるコードでは対処できない部分も多い。この部分に驚いた。実際、Webデザイナーの作業時間比率という円グラフを見たところ、デザインの推敲は全体の20％に過ぎず、作業の50％弱を占めたのが「各ブラウザで表示を整える」であった。
直しても直してもしても崩れまくりで理由がわからない。ただ、いろいろなアプローチがあってもベストな方法は2パターンくらいしかないはずで、わかっている人たちはみんな同じ方法をやっているはずだ。

はじめて制作したサイト

[制作したページ]

メモノート風に組んだところガタガタ。フレーム、インフレームという非推奨のタグが大問題だったと思われる。

制作でハマったIE6とかSafariの崩れ

ボックスがガタガタになる
①floatを指定した要素には必ずwidthを指定。
②bodyで全体を囲まない。囲むならwrapper。
③floatを指定した要素には、margin・paddingを指定しない。子要素で、margin・padding指定。もしくはdisplay: inline;処理。
marginがおかしい
float方向にmarginをつけると2倍になるので逆方向だけ指定。
横並びのリストが階段状になる
リストの横並びはfloatではなく、display: inline;推奨。
relativeが基点にならない
relativeの上位ブロックにrelativeを指定。
Z-indexが崩れる
それぞれの包括要素ごとにZ-indexをナンバリング。もしくは、Z-indexを使わない形に組み替える。
floatで背景（高さ）が消えてしまう
 
overflow:hidden;これは必須だ。clearfixは古いらしい。
height100%が反映されない
html，body{height:100%;｝
固定幅のセンタリングがおかしい
body{text-align:center;}
#container{margin:0 auto;text-align:left;}
line-heightで表示が崩れる
line-height: 1.4;のように単位はつけない。
Foxでセンタリングがずれる
overflow要素にwidth、heightをつけても表示されない
html {margin-bottom:1px;height:100%;}
画像の下に隙間が出る
img{border:0;vartical-align:bottom;}

[結論]

SafariとIEは前向きにあきらめたい。

ＮＥＷな新着情報

3月1日 WEB標準に挫折しました。

2月1日 ページ制作に挫折しました。

1月4日 浅草寺で凶が出ました。

STAFF

製作者近影

作業環境 imac macmini Safari IE5

♨AMAZON.BOOK…etc.

改定新版HTML＆スタイルシート

改定新版HTML＆スタイルシート
技術評論社

読めました。

初版2005年。流通している本の中では読みやすいと感じた。誤植訂正が多かったので、技術評論社に電話をしたら最新改訂版をいただいた。AMAZONで即売却。

Web標準の基本

Web標準の
基本とCSS
レイアウト
技術評論社

難しかった。

書評で評価が高かったので購入。altとtitleの違いなど、細かい解説がないので読むのにひと苦労。つぶれた版元から技術評論社が版権を引き取ったらしい。