Css Yui

YUIリセットCSSの問題を修正する: ``をイタリック体、``を太字に保つ方法

ウェブ開発を行っているとき、ブラウザ間で一貫した出発点を確保するためにYUIのリセットCSSを使用することがあるでしょう。このことは便利ですが、テキストフォーマットに予期しない動作を引き起こすこともあります。よくある問題は、リセットCSSがおよびタグを変更し、意図した通りに表示されなくなることです。

このブログ記事では、問題を段階的に説明し、ウェブコンテンツをスマートに見せるための明確な解決策を提供します。

問題の理解

YUIのリセットCSSはデフォルトのブラウザスタイルを上書きするため、時には複雑さを招きます。

何が起こっているのか？

YUIリセットCSSで問題を引き起こす特定の行は以下の通りです:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

その結果、およびタグはデフォルトのフォーマットを失います:

タグはイタリック体のはずが、通常のテキストとして表示されます。
タグは太字のはずが、標準のフォントウェイトで表示されます。

競合

自分のスタイルシートでこれらのタグのフォーマットを手動でリセットすることができるかもしれませんが、次のように:

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

両方のタグを一緒に使用すると問題は深刻化します。たとえば:

<strong>これは太字で、<em>これはイタリック体だが太字ではない</em></strong>

ここでは、のスタイリングルールが機能していても、ユニバーサルリセットCSSのルールがをリセットし、イタリック効果を無効にしてしまいます。

解決策

YUIリセットCSSよりもカスタムスタイルが優先されるように、CSSルールを調整する必要があります。以下の手順でそれを行うことができます:

ステップ1: 特異性でオーバーライド

スタイルルールの特異性を次のように高めることができます:

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

この修正により、および要素だけでなく、それらの中にある任意のネストされた要素も同じスタイルを維持します。

ステップ2: `!important`でスタイルを強制

IE7のような古いブラウザをサポートしている場合、スタイルを強制するために!importantを使用する必要があるかもしれません。これを次のように行うことができます:

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

ステップ3: スタイルのテスト

これらの変更を実施した後は、すべてのスタイルが期待通りに表示されることを確認するため、モダンブラウザとレガシーブラウザの両方でテストしてください。

以下は試してみるための簡単な例です:

例 CSS

/* YUIスタイル */
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

/* あなたのスタイル */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

例 HTML

<strong>太字</strong> - <em>イタリック体</em> - <strong>太字および<em>イタリック体</em></strong>

結論

このブログで説明した手順に従うことによって、YUIのリセットCSSによって導入されたデフォルトの動作を成功裏に上書きし、およびタグを正しくスタイリングすることができます。

もし今後このような問題が発生した場合は、特異性と!importantディレクティブがCSSスタイリングの強力なツールであることを覚えておいてください。

楽しいコーディングを！

YUIリセットCSSの問題を修正する: <em>をイタリック体、<strong>を太字に保つ方法