[ web ] um流htmlコーディング - 08/05/14 15:43
htmlコーディングは本業ではないが、やらにゃあいかん場合が度々ある。今がその場合。
んで、「〜の時、どうやってコーディングしてる？」とか聞かれたりするときは決まって
「divで囲みまくる」
と回答。だってそうとしか言いようが無い。
ちなみに、何も勉強してないのでやり方は３年前から変わってない。
Mac用IEだのIE6といった糞ブラウザで起きるwidth, margin, padding, float絡みのバグに、ハックやjsを使ってのcss切り替え無しでどう対応すんべかと思って考えたのが「divで囲みまくる」やり方。うむるむのソースとか酷いよ。
囲み方としては、float無しの場合、width:100%用のdivを作って、marginやpaddingが必要な場合にもう一つdivを作る。
<div id="hoge"><div id="hogePad"> hogehoge </div></div>
という具合。内側のdivの名前のPadはpaddingの略。
この時、hogeではwidthのみの指定で、margin, paddingはどちらも0。
内側のhogePadは名前にはPadが入ってるが指定するのはmarginでpaddingはやっぱり0。基本、paddingはliのリストスタイルのアイコン指定の時くらいしか使わない。IE6で起きるwidthの指定が無いと背景やボーダーが消えるバグが起きる場合はhogeDivにwidth:autoを指定する事もある。
floatを使う場合は、hogeの上にもう一つdivを使って、floatのみ指定するようにしている。widthは固定幅なら指定して、リキッドレイアウトならautoで、margine, paddingはどちらもに0にする。
何の裏技もない力技なので、効率が悪い上にデバッグしにくいんでしょうが、これ以上は覚える気がさらさらないです。
新しい仕様が広まって来たらその時覚えようかと思う。
あと、ハックを使う「バグをもってバグを制す」やり方はどうにも好きになれないので、png画像を使う時、position:absoluteで疑似フレームを付ける時に必要なIE6用の処置でしか用いないことにしている。
「色々言ってるけど、ウチの環境じゃまともに見れないんだけど？」
という方がいましたら、ツッコミしていただけると凄く助かります。
« [ 雑記 ] 【非エロ】アンスコ | ブログトップ | [ 雑記 ] アレな先輩＠飲み会 »
トラックバックURL :