CSS のヒント_CSS/HTML

CSSを使ってWebサイトを構築する際、さまざまなレイアウトの問題に遭遇し、最終的には途方に暮れてしまうこともあるでしょう。この記事の目的は、設計プロセスを容易にし、行き詰まったときにすぐに参照できるようにすることです。

疑わしい場合は、最初に検証してください。
デバッグするとき、最初にコードを検証すると、多くの場合、多くの問題を回避できます。不正な形式の XHTML/CSS は、多くのレイアウト エラーを引き起こす可能性があります。
他のブラウザでテストする前に、最も高度なブラウザで CSS コードを作成してテストしてください。その逆ではありません。
壊れたブラウザで記述してテストする場合、コードはその壊れたブラウザの貧弱な表示​​に依存し、標準に準拠したブラウザでテストして、表示結果が「異常」になることを確認する必要があります。とてもイライラするでしょう。代わりに、まずコードを洗練してから、低レベルのブラウザー用に準備する必要があります。こうすることで、コードは最初から標準に準拠しており、他のブラウザーのサポートについて心配する必要はありません。もちろん、現在標準に準拠しているブラウザは間違いなく Mozilla、Safari、または Opera です。

必要な効果が実際に存在することを確認してください。
ブラウザ固有の CSS 拡張機能の多くは、公式の標準には存在しません。 フィルターまたはスクロールバーのスタイルを指定すると、IE 以外のブラウザーでは効果のないプライベート コードを使用することになります。バリデーターによってコードが定義されていないことが示された場合は、プライベート スタイルを使用している可能性が高く、さまざまなブラウザーで一貫した結果を達成することが困難になります。

レイアウトでフローティング オブジェクトを使用する必要がある場合は、タイムリーにクリア属性 を使用することを忘れないでください。
浮遊オブジェクトは簡単に思えるかもしれませんが、それは難しく、必ずしも希望通りになるとは限りません。フロートがコンテナの境界を超えて伸びている場合、または期待どおりに表示されない場合は、期待が正しいかどうかを確認してください。この問題については、Eric Meyer のチュートリアルを参照してください。

マージンのマージ: パディングまたはボーダーを使用して回避できます。
余分な (または不要な) 空白に圧倒されるかもしれません。マージンを使用する場合、マージンの結合が問題の原因となる可能性があります。アンディ・バッドの説明が役立つかもしれません。

パディング/ボーダーと固定幅を同じ要素に同時に適用することは避けてください。
IE5 のブロック モデルは間違っており、問題が発生します。これには回避策がありますが、この問題を回避し、子要素の幅が固定されているときに親要素にパディングを指定することをお勧めします。

IE での未指定のスタイル コンテンツのちらつきを回避します。
外部スタイル シートの入力に @import のみに依存している場合、遅かれ早かれ IE に「ちらつき」の問題があることがわかります。 CSS スタイルが適用される前に、書式設定されていない HTML テキストが短時間表示されます。

IE では min-width が役立つことは期待できません。
IE はこれをサポートしていませんが、幅を min-width として扱うため、いくつかの IE フィルタリング手法を通じて、同じ最終的な効果を達成できます。

最後の手段として CSS フィルターを使用する CSS のテクニックとフィルターを使用すると、特定の要素を選択的に適用する (または適用しない) ことができます。可能な限り、フィルターに毎回頼るのではなく、希望する効果を実現するための標準的なクロスブラウザー ソリューションを見つける必要があります。絶望的なときにそれを救命ツールとして考えてください。 CSS フィルタリングのヒントがここにたくさんあります。 [注釈: ここでのフィルタを IE のフィルタと混同しないでください。 CSS 標準に対するサポートのレベルはブラウザごとに異なるため、ブラウザが解釈できない、または誤って解釈するスタイル シートやルールをブロックする多くの手法が発見されています。これは CSS フィルターまたはトリックと呼ばれます。 ]

アンカーを使用する場合、ハイパーリンク スタイルを適用するときに特に注意してください。
コード内で従来のアンカー () を使用している場合は、:hover および :active 疑似クラスも機能することに気づくでしょう。これを回避するには、id を使用するか、あまり知られていない構文:link:hover、:link:active

「LoVe/HAte」(愛/憎しみ) リンクを覚えておいてください。 ルール
ハイパーリンク疑似クラスを次の順序で指定します: Link、Visited、Hover、Actve。それ以外の順序は不適切です。 :focus を使用する場合、順序は LVHFA (「ベイダー卿のハンドル、以前はアナキン」、マット・ホーイ氏が提案) である必要があります。

「トラブル」の境界線を思い出してください 。
border、margin、padding の省略順序は、上から時計回りに、つまり、Top、Right、Bottom、Left です。たとえば、 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 クラスを作成し、後でテキストを大きくし、色を赤にする予定があるとします。このクラスの名前はもはや何の意味もありません。代わりに、.copyright や .pullquote など、よりわかりやすい名前を使用できます。

セレクターの結合
ダウンロード時間を短縮するには、CSS を短くすることが重要です。セレクターをグループ化し、継承を活用し、省略表現を使用して冗長性を減らすようにしてください。

画像置換テクノロジを使用する場合はアフィニティを考慮する
従来の FIR では、画像表示をオフにするスクリーン リーダーやブラウザで問題が発生することがわかっています。 この問題には他の解決策もありますが、特定の状況に応じて慎重に使用する必要があります。