Webシステム用管理者画面作成マニュアル　デザイン/HTML/CSS/JavaScript集

こちらは、CSSでレイアウトを行う際起きるバグ（？）の回避方法と、その他CSSの裏技（？）のメモです。またバグではないのにどうしても解決できない場合のメモです。すべての回避方法を書くのではないのですが、調査・検査して発見回避方法をメモ形式に書いていきます。よく出会うバグ（？）だと思いますので、割と参考になるのでは？自分的メモです。

概要	状態	修正方法	備考
CSSが適用されない	class、IDが適用。どれだけclass名、ID名を変えても、ファイルを作り直しても適用されない。例：<div class="1-1"> 例：<div id="555">	CSS初心者の私としては、とても難解な問題だった。以下、とあるHPより抜粋。セレクタで使用できる文字 CSSのセレクタ名で使える文字は、HTMLでの名前文字より制約が厳しく、「使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない」とされています。 HTMLではコロン( : )、ピリオド( . )も2文字目以降の名前文字として認められているので注意してください。	回避方法がわからず、3時間悩みました。PCも何度再起動させたことか・・・。まだまだCSS初心者だと痛感しました。テスト用だからといって適当に名前をつけて検証するとこういう落とし穴があります。
外部CSSファイルでの日本語コメント	外部CSSファイルを使用し、HTMLを作成し、それをMac・Windowsの各種ブラウザで確認。その際、MacOS9のIE(5.1）何をどうしても一部CSSが正しく表示されない箇所があり検証。いろいろ試した結果、どうやらコメントで「/* 一覧表 */」書いた箇所の直下のCSSが正しく適用されないようなのです（下記のソース参照）。さらに検証すると「表」という漢字がアウト。	「表」という漢字をひらがなやカタカナに変えたり、もしくは使わない。検証していないが、化けてしまう文字をコメントを入れておくとよいとのうわさ？ <!--京--> ・・・昔（リニューアル前の）Yahooはコレで何かを解決している？	PerlやPHPでプログラム中に書いてあるとエラーが起きる漢字があるのですが、もしかしたらそれなのかも・・と思い始めました（確か昔「表」という漢字の前に「￥」をつけた気が）。でもMacのIEだけというのが不思議。他のブラウザは問題なし。検証していないが、ファイル全体をUTF-8 や EUC-JPで作ればいいのかな・・と思う。 ⇒参照HP
ボックスモデルハックと勘違い	IEとNN・Ffでテーブルの幅が合わない。CSSにワイド指定を入れてもどうしても各ブラウザでばらつきがでる。インターネットで調べると「ボックスモデルハック」という言葉が出てきてよく似た現象だが、IE5.xに関しては関係なく、検証しているIEはIE6.xなので、いまいち当てはまらない。そして、一応ボックスモデルハック対応させるが、直らない。	ヘッダーに<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と記述するだけで解決。但し、HTMLファイルの目的別に記述する必要があるので、詳細は参考HPにて。私の場合は、普通にHTMLで記述し必要なところでCSS使ったりと混在しているのがほとんどなので「Transitional 」を使用。XHTML＋CSSで記述する場合は「Strict」 ⇒参考HP	オーサリングソフトも使用しているが、基本自分でHTMLを書いている人にあるうっかりミス。以前は<html>からはじめるというのが基本とされていました。なのでDOCTYPEに関しては書いていない人が多いのではないでしょうか。現在公開されているHPでもソースを見てみると宣言が無いのが多いです。私の場合、SEO対策やらなんやらで、邪魔なヘッダーの記述を極力減らすために、ついつい削りぎてしまってました。お恥ずかしいことにDOCTYPEに関して「いらないもと」と認識していたので、そのため、先のエラー（？）回避に苦しみ、ブラウザ別でCSSを分けたりと過去苦労しました。けど、この記述が無かったからダメだったのね・・・と目からウロコでした。
Opera 8.0 ページのマージン	テーブルをwidth="100%"で指定しても、なぜか両端に隙間ができる。もちろんbody{margin:0px}で指定している。	Operaの不思議の一つ。なぜでしょう。これも困ったので色々調べましたところ、body{margin:0px}だけではなく、body{margin:0px;padding:0px;}という具合にpaddingも指定します。	paddingを記述しても他のブラウザで問題がないので、基本的にbodyには「margin」「padding」をしっかり書いておきましょう。

CSS仕様・バグ回避メモ