2009/06/16
HTMLコーダーが暇になるためにクロノドライブへ 003号
2009/6/16 第003号「HTMLコーダーが暇になるためにクロノドライブへ」
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
コーディングって面倒ですよね。
その悩み、クロノドライブが解決しましょう！
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
『HTMLコーダーが暇になるためにクロノドライブへ』
2009/6/16 No.3
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
--------------------------------INDEX---------------------------------
【1】クロノドライブ コーディングガイドライン公開
第02回「ガイドラインを作るときに定めておきたい項目 その2」
【2】コーディング トラブルシューティング
第02回「IE6でfloatを指定した要素の左右marginが大きくなる
（倍になる）」
【3】コーディング Tips
第03回「後方互換モードと標準準拠モード、それに関わるIE6のバグ」
【4】編集後記
----------------------------------------------------------------------
こんにちは、株式会社クロノドライブの佐々木です。
今回で第003号となるメールマガジンですが、
皆様のお役に立てているでしょうか？
今回もホームページ制作において知っておきたいテクニックや技術についての
コンテンツを配信していきますので、最後までお付き合いください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
01. クロノドライブ コーディングガイドライン公開
第02回「ガイドラインを作るときに定めておきたい項目 その2」
────────────────────────────────────
前回から続く、コーディングする上で私が実際に定めているガイドラインを
ご紹介していきたいと思います。
◆ HTMLの構造が分かるソースフォーマットに統一する
単純にソースフォーマットを統一するだけでは、「単に統一されていて綺麗」
なだけです。
若干手間がかかりますが、改行とインデントをうまく使い視覚的にHTMLの構造が
分かるソースフォーマットを作成しましょう。
例えば私は以下のようなソースフォーマットでコーディングをしています。
例）
<div id="container">
<div id="header">
</div>
<div id="main">
<p>サンプルテキスト</p>
<div class="box">
<img src="" alt="" />
<p>
サンプルテキストサンプルテキストサンプルテキスト<br/>
サンプルテキストサンプルテキスト
</p>
</div>
</div>
<div id="fooer">
</div>
</div>
このようにフォーマットを統一することで、他人が書いたソースでも「このタグ
の終了タグはここで、子要素にはこのタグが入ってるんだな」とすぐに分かりま
す。また、終了タグの入れ忘れや、余分に入れてしまうというようなミスの防止
にも有効です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
02. コーディング トラブルシューティング
第02回「IE6でfloatを指定した要素の左右marginが大きくなる
（倍になる）」
────────────────────────────────────
写真をfloatさせてテキストを廻りこませたら、IE6だけ写真の位置が違う！なん
て経験ないでしょうか。これは特定の条件が揃った際に起こるIE6のバグなので
すが…はてさてその発生条件とは。
■発生条件
このバグはスタイルシートで次のような指定がされているときに発生します。
.bug01 {
float: left;
margin-left: 10px;
}
このように float する方向に対し margin が指定されているとその値が倍になっ
てしまいます。
もちろん float: right でも同様です。
サンプルを用意しましたのでIE6で確認してみてください。
http://html-coding.co.jp/knowhow/date/000020/float.html
■対処法
このバグの対処法ですが、次のようなやり方があります。
・CSSハックを使いIE6だけ、margin値を通常の半分の値を指定する
・CSSハックを使いIE6だけ、floatを指定した要素にdisplay: inlineを指定する
オススメは2つ目の方法です。1つ目の方法では、値が奇数だった場合に1pxの差
が生じてしまいます。
2つ目の方法はinline指定しまうと要素の領域が広がらないと思いますが、IE6は
inline指定がされていてもblock要素のように領域が広がるため、問題ありません。
対処法サンプル
http://html-coding.co.jp/knowhow/date/000020/float_ok.html
CSSでレイアウトを組むさいにこのバグは致命的とも言えますので対処法を必ず
抑えておきたいですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
03. コーディング Tips
第03回「後方互換モードと標準準拠モード、それに関わるIE6のバグ」
────────────────────────────────────
最近のブラウザは、その(X)HTML文書がどの仕様・バージョン・文法に従って
書かれているかを示す「宣言」を解釈し「標準準拠モード」（W3Cの仕様に準拠）
と「後方互換モード」（W3Cの仕様に準拠していない）とを切替えて表示してい
ます。宣言には「XML宣言」と「DOCTYPE宣言」とがあり、
このブログを例にとって見ると以下の二つです。
【XML宣言】
<?xml version="1.0" encoding="EUC-JP"?>
【DOCTYPE宣言】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML文書には「XML宣言」を記述することが推奨されていますが、
IE6.0では「DOCTYPE宣言」の前に文字が存在すると、「後方互換モード」になる
というバグがあります。つまり、XHTMLでコーディングをするとIE6.0では「後方
互換モード」、その他のブラウザでは「標準準拠モード」と必ず表示に違いがで
ます。
文字コードがXMLのデフォルト値である、UTF-8かUTF-16の場合「XML宣言」を
省略できることになっていますが、HTML-lintだと点数を引かれたり、
どうしてもXML宣言を外せないという場合を考え、「後方互換モード」と
「標準準拠モード」のどちらで表示しても対応できるコーディングテクニックを
覚えましょう。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編┃集┃後┃記┃
━┛━┛━┛━┛
季節の変わり目ですが皆様、体調にお変わりはないでしょうか？
お互い体には気をつけていきたいですね。
さて、『HTMLコーダーが暇になるためにクロノドライブへ』のメールマガジン
今回はいかがでしたでしょうか？
第003号ということで、私の方も少し慣れてきました。
今後も皆様のお役に立つ情報をどんどん配信していきたいと思いますので、
よろしくお願いします！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
◆ 発行元情報
────────────────────────────────────
発 行 元：株式会社 クロノドライブ
http://html-coding.co.jp/
マガジン名：『HTMLコーダーが暇になるためにクロノドライブへ』
編 集 者：佐々木 繁
発 行 日：2008/1/00 No.003
【著作権に関して】
・本メールマガジンに掲載された情報の転送は歓迎いたしますが、内容に関する
著作権は株式会社クロノドライブに帰属します。
その他、何かご不明な点がございましたら、
mail-magazine@html-coding.co.jpまで、メールにてご一報ください。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
