日々のデザイン現場で発生する問題・難題を解決します！
WEB制作トラブル速戦即決術！ 第9回
[TROUBLE 47] |
classやidの名前を適当に つけていたら混乱してしまった |
文＝青木真由佳（(株)サイズ）
| A. | 階層の前後の文脈がつながるように命令する |
classやidを適当に命名してしまうとエリア構造に矛盾が生じ、運用時や新規コンテンツを追加する際に、作業過程から命名規則を導き出すことができない。したがって、全体のエリア構造を把握しつつ、前後の階層の文脈がつながるよう命名する必要がある。階層構造を把握するには構造図（ストラクチャー）を作成するとわかりやすい。エリアの階層構造を踏まえた命名にすることにより、第三者にも理解しやすく、手を入やすいものとなる。
typeof演算子を使ってXMLHttpRequest変数の値が「undefined」の場合にのみ、ActiveXObjectを生成するようにする。また、Internet Explorer 5や6ではActiveXObjectの生成方法が異なるので、それを3項演算子を使って処理をわける
構造図（ストラクチャー）を元にclassとidの命名のみを変更する。元のソースと比べるとエリア構造が一目で把握できるようになった
正しい階層構造を把握するために全体や前後の文脈を意識しつつ構造図（ストラクチャー）を作成する。たとえばspan.updatedDateを包括しているエリアを順を読み上げていくと文脈がつながっていることがわかる
[INDEX]
>>> [TROUBLE 44] IE 6でフロート方向のマージンが広がってしまう
>>> [TROUBLE 45] Safariとほかのブラウザで色味がまったく変わってしまった
>>> [TROUBLE 46] IE 5やIE 6の環境でAjaxがうまく通信してくれない
>>> [TROUBLE 47] classやidの名前を適当につけていたら混乱してしまった
>>> [TROUBLE 48] Webページの内容が表示されず真っ白になってしまう
>>> [TROUBLE 49] テーブルのセル幅が意図しない数値に変わってしまう
『web creators』の情報はこちら！＞＞＞
![[TROUBLE 49] テーブルのセル幅が意図しない数値に変わってしまう](https://www.mdn.co.jp/di/images/common/np_article.gif)
