CSS Tips_体験交流

翻訳: onestab [2004.03.09]
原文: mezzoblue CSS Crib Sheet

CSS を使用して Web サイトを構築するとき、さまざまなレイアウトに遭遇したことがあると思います。問題が発生し、疲弊してしまう可能性があります。この記事の目的は、設計プロセスを容易にし、行き詰まったときにすぐに参照できるようにすることです。

何か追加したいことがありましたら、ここにコメントを投稿してください。

この記事は他の言語でもご覧いただけます: フランス語、ドイツ語、スペイン語、ハンガリー語。 追加の翻訳も歓迎します。

疑わしい場合は、最初に検証してください
デバッグするとき、最初にコードを検証すると、多くの場合、多くの問題を回避できます。不正な形式の XHTML/CSS は、多くのレイアウト エラーを引き起こす可能性があります。
他のブラウザでテストする前に、最も高度なブラウザで CSS コードを作成してテストしてください。その逆ではありません。
壊れたブラウザで作成してテストする場合、コードはその壊れたブラウザの貧弱な表示​​に依存してから、標準に準拠したブラウザでテストする必要があります。「イライラするでしょう」を参照してください。結果が「正常ではない」と表示されたとき。代わりに、まずコードを洗練してから、低レベルのブラウザー用に準備する必要があります。こうすることで、コードは最初から標準に準拠しており、他のブラウザーのサポートについて心配する必要はありません。もちろん、現在標準に準拠しているブラウザは間違いなく Mozilla、Safari、または Opera です。
必要な効果が実際に存在することを確認してください
ブラウザ固有の CSS 拡張機能の多くは、公式の標準には存在しません。 フィルターまたはスクロールバーのスタイルを指定すると、IE 以外のブラウザーでは効果のないプライベート コードを使用することになります。バリデーターによってコードが定義されていないことが示された場合は、プライベート スタイルを使用している可能性が高く、ブラウザー間で一貫した結果は期待できません。
レイアウト内でフローティング オブジェクトを使用する必要がある場合は、必要に応じて clear 属性を使用することを忘れないでください。
フローティング要素は簡単なようで制御が難しく、制御するのが困難です。フロートがコンテナの境界を超えて伸びている場合、または期待どおりに表示されない場合は、期待が正しいかどうかを確認してください。この問題については、Eric Meyer のチュートリアルを参照してください。
マージンのマージ: パディングまたはボーダーを使用して回避できます。
余分な (または不要な) 空白に圧倒されるかもしれません。マージンを使用する場合、マージンの結合が問題の原因となる可能性があります。 Andy Budd この説明は理解に役立つかもしれません。 PJblog の構造にいくつかの追加情報を追加したいと思います。 Flash を使用する場合は、Xml ファイルにマージンが設定されているかどうかを確認してください。
同じ要素にパディング/ボーダーと固定幅を同時に適用しないようにしてください。
IE5 の誤ったブロック モデルが原因で、事態が混乱します。 改善策はありますが、この問題を回避し、子要素の幅が固定されている場合は親要素にパディングを指定することが最善です。
IE での未指定のスタイル コンテンツのちらつきを回避します。
@import を使用して外部スタイル シートを入力すると、遅かれ早かれ IE に「ちらつき」の問題があることがわかります。 CSS スタイルが適用される前に、書式設定されていない HTML テキストが短時間表示されます。 これは回避可能です。
IE では min-width が役立つことは期待できません。
IE はこれをサポートしていませんが、width を min-width として扱うため、いくつかの IE フィルタリング手法を通じて、最終的に同じことを達成できます。効果。 これはとてもイライラします、今はこのスキンを実現できません
どうしても困ったら幅を小さくしてみてください
丸め誤差があるため、場合によっては 50 % プラス 50% が 100.1% になり、一部のブラウザではレイアウトが崩れます。 50% を 49%、あるいは 49.9% に減らしてみてください。 また、境界線を使用する場合は、その幅を忘れずに追加してください。500 ピクセルのフレームに 1 ピクセルの境界線を追加すると、その幅は 502 ピクセルになります。
IEで表示がおかしくなっていませんか？
Peekaboo のバグである可能性があります。特にマウスがハイパーリンク上を通過すると、正常に表示されます。修理方法は位置がすべてをご覧ください。
アンカーを使用する場合、ハイパーリンク スタイルを適用するときに特に注意してください。
コードで従来のアンカー () を使用している場合は、:hover および :active に気づくでしょう。疑似クラスもそれに基づいて動作します。これを回避するには、id を使用するか、あまり知られていない構文を使用できます: :link:hover, :link:active
Remember "LoVe/HAte" (Love/ Hate) リンク ルール
ハイパーリンク疑似クラスを次の順序で指定します: リンク、訪問済み、ホバー、アクティブ。それ以外の順序は不適切です。 :focus が使用される場合、順序は LVHFA (Matt Haughey によって提案された「ベイダー卿のハンドル、以前はアナキン」) である必要があります。
「トラブル」の境界線を思い出してください。
ボーダー、マージン、パディングの省略順序は、上から時計回りに、つまり、上、右、下、左です。たとえば、margin: 0 1px 3px 5px; は、上のマージンが 0、右のマージンが 1px などを意味します。
ゼロ以外の値の単位を指定します。
CSS でフォ​​ント、マージン、またはサイズを指定する場合、使用する単位を指定する必要があります (唯一の例外は行の高さであり、不思議なことに単位は必要ありません)。一部のブラウザでは、不特定の単位の処理が適切ではありません。 pxであろうとemであろうと、ゼロはゼロです。他のすべてのゼロ以外の値には、単位を明示的に指定する必要があります。例: padding: 0 2px 0 1em;
さまざまなフォント サイズをテストします。
Mozilla や Opera などの高度なブラウザでは、使用するフォント単位に関係なくフォント サイズを変更できます。一部のユーザーのデフォルトのフォント サイズはあなたのものとは異なるはずなので、それに合わせられるように最善を尽くしてください。
テスト時には埋め込みスタイルを使用し、公開時には外部入力に変更します。
HTML ソース コードにスタイル シートを埋め込むと、特に一部の Mac ブラウザで、テスト中にキャッシュによって発生する多くのエラーを排除できます。ただし、公開する前に、スタイル シートを外部ファイルに移動し、@import または で導入することを忘れないでください。
わかりやすい境界線を追加すると、レイアウトのデバッグに役立ちます。
div {border: Solid 1px #f00;} のようなグローバル ルールにより、レイアウトの問題を一時的に検出できます。特定の要素に境界線を追加すると、見つけにくい重なりや空白の問題を見つけるのに役立ちます。 この方法は非常に実用的です。ぜひ皆さんも試してみてください。
画像パスでは一重引用符を使用しないでください。
背景画像を設定するときは、二重引用符を使用してください。不要に思えるかもしれませんが、これを行わないと IE5/Mac が停止します。 これは最も見落としやすいようです
将来のスタイル シート (ハンドヘルド デバイスや印刷スタイル シートなど) のために「スペースを確保」しないでください。
Mac IE5 は空のスタイル シートを考慮しないため、ページの読み込み時間が長くなります。 MacIE が停止するのを防ぐために、スタイル シートに少なくとも 1 つのルール (コメントも含む) を含めることをお勧めします。

特定の機能に固有ではありませんが、開発プロセス中に注目に値するいくつかの提案もあります:

CSS ファイルを適切に整理する
CSS をブロックに適切にコメントし、類似した CSS セレクターをグループにグループ化し、一貫した命名規則と空白形式 (クロスプラットフォームを考慮して、タブではなく空白文字を使用することをお勧めします) と適切な順序を開発します。
機能に基づいてクラスと ID に名前を付けます (外観ではありません)。
.smallblue クラスを作成し、後でテキスト サイズを red に変更する予定だとします。クラス名はもはや意味を持ちません。代わりに、.copyright や .pullquote など、よりわかりやすい名前を使用できます。
結合セレクター
ダウンロード時間を短縮するには、CSS を短くすることが非常に重要です。 セレクター をグループ化し、 継承 を使用し、 短縮表現 を使用して、冗長性を減らすようにしてください。
画像置換技術を使用するときはアクセシビリティを考慮してください
スクリーン リーダーや画像表示をオフにするブラウザーで 従来の FIR が発見されました。うまくいかないだろう。これには他の解決策があり、特定の状況に応じて慎重に使用する必要があります。