DIV+CSS コーディング_html/css_WEB-ITnose を適用するときによくある間違い

DIV+CSS コーディングを適用する際によくある間違いです

この記事では、DIV+CSS コーディングを適用する際に犯しやすいいくつかの間違いについて説明します。DIV+CSS は、Web サイト標準 (または「WEB 標準」) でよく使用される用語の 1 つです。通常、HTML Web デザイン言語でのテーブルの配置方法との違いを説明するために使用します。

DIV+CSS コーディングを適用するときに犯しやすいいくつかの間違い

DIV+CSS は、Web サイト標準 (または「WEB 標準」) で一般的に使用される用語の 1 つで、通常は HTML Web デザイン言語でテーブルを記述するために使用されます。これは、XHTML Web サイトのデザイン標準では、テーブル配置技術が使用されなくなり、CSS+DIV を使用してさまざまな配置を実現するためです。 DIV+CSS コーディングを適用する場合、いくつかの間違いを犯しやすくなります。この記事では、よくある間違いをいくつか挙げます:

1. HTML 要素にスペルミスがないか、終了タグを忘れていないか確認してください

ベテランでも、DIV のネスト関係で間違いを犯すことがよくあります。 Dreamweaver の検証機能を使用して、エラーをチェックできます。

2.CSSが正しいか確認してください

スペルミスがないか、末尾の}を忘れていないかなどを確認してください。 CleanCSS を使用して、DIV+CSS のスペル エラーをチェックできます。 CleanCSS は CSS の軽量化を図るツールですが、スペルミスをチェックすることもできます。

3. エラーが発生した場所を特定します

エラーがレイアウト全体に影響を与える場合は、DIV ブロックを削除して表示が通常に戻るまで、DIV ブロックを 1 つずつ削除すると、エラーが発生した場所を特定できます。

4. border 属性を使用してエラー要素のレイアウト特性を決定します

レイアウトに float 属性を使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。

5. DIV+CSSのfloat要素の親要素にclear属性を指定することはできません

MacIE上でfloat要素の親要素にclear属性を使用すると、周囲のfloat要素のレイアウトが乱れてしまいます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。

6. Float 要素は width 属性を指定する必要があります

幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。

また、要素を指定するときは、単位として px ではなく em を使用するようにしてください。

7. Float要素はmarginやpaddingなどの属性を指定できません

IEではmarginやpaddingを指定してfloat要素を表示する際にバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に DIV をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。

8. float 要素の幅の合計は 100% 未満でなければなりません

float 要素の幅の合計がちょうど 100% である場合、一部の古いブラウザーは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。

9. DIV+CSS でデフォルトのスタイルはリセットされますか?

マージン、パディングなどの一部の属性はブラウザによって解釈が異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルをなしに設定することが最善です。