CSS スタイルシート設計のための 10 のヒント

1.CSSフォントの略語規則

CSS を使用してフォントを定義する場合は、次のようにします。

実際、これらのプロパティは次のように省略できます。

フォント: 1em/1.5em 太字イタリック小文字ベルダナ、セリフ

現在ははるかに改善されていますが、注意すべき点が 1 つあります。この短縮方法を使用するには、少なくとも font-size 属性と font-family 属性を指定する必要があります。他の属性 (font-weight、font-style、font- など) を指定する必要があります。 varient) が指定されていない場合は、デフォルト値が自動的に使用されます。

2. 2 つのクラスを同時に使用する

通常、属性には 1 つのクラスのみを指定しますが、これは 1 つだけを指定できるという意味ではなく、実際には、次のようにいくつでも指定できます。

<p class="text side">...</p>2 つのクラスを同時に (カンマではなくスペースで区切って) 使用すると、この段落では両方のクラスで指定されたルールが適用されます。いずれかのルールが重複する場合は、後者のルールが優先されます。

3. CSSの枠線のデフォルト値

境界線ルールを作成するときは、通常、色、幅、スタイルを (任意の順序で) 指定します。例: border: 3px Solid #000 (幅 3 ピクセルの黒の実線境界線) 実際、この例で指定する必要がある唯一の値はスタイルです。スタイルをソリッドとして指定した場合、残りの値にはデフォルト値が使用されます。デフォルトの幅は中 (3 ～ 4 ピクセルに相当) で、デフォルトの色は境界線のテキストの色です。 。これがまさに必要な場合は、CSS で指定する必要はありません。

4. ! important は IE によって無視されます。

CSS では、通常、最後に指定されたルールが優先されます。ただし、IE 以外のブラウザでは、! important でマークされたステートメントが絶対優先されます。例: margin-top: 3.5em !payment-top: 2em IE 以外のすべてのブラウザでは、上部マージンは常に 3.5em です。 IE は 2em です。これは、特に相対マージン値を使用する場合 (この例のように)、IE と他のブラウザー間の微妙な違いを示すのに便利です。 (多くの人は、CSS サブセレクターも IE によって無視されることに気づいているかもしれません)

5. 画像置換スキル

多くの場合、画像の代わりに標準の HTML を使用してテキストを表示する方が、ダウンロードが高速化され、使いやすさが向上するだけでなく、賢明です。ただし、訪問者のマシンでは使用できない可能性のあるフォントを使用する場合は、画像のみを選択できます。

たとえば、各ページの上部に「ウィジェットを購入」というタイトルを使用したいと考えていますが、見た目の美しさのために珍しいフォントを使用している場合は、画像を使用する必要があります。わかりました:

<h1><img src="/widget-image.gif" alt="ウィジェットを購入" /></h1>

これは確かに真実ですが、検索エンジンは代替テキストより実際のテキストをはるかに重視しているという証拠があります (あまりにも多くの Web サイトがすでに代替テキストをキーワードとして使用しているため)。そのため、別の方法を使用する必要があります: <h1><span >ウィジェットを購入< /span></h1> の場合、次の CSS が役に立ちますか?

これで、美しい画像と実際のテキストの適切な非表示の両方が得られました。CSS の助けを借りて、テキストは画面の左側から -2000 ピクセルの位置に配置されました。

6. CSSボックスモデルハックの別のオプション

CSS ボックス モデル ハックは、IE6 より前のブラウザーの表示の問題を解決するために使用されていました。IE6.0 より前のバージョンでは、要素のボーダー値とパディング値が (幅の値に追加されるのではなく) 幅内に含まれていました。たとえば、次の CSS を使用してコンテナの寸法を指定できます。

次に、HTML で適用します。

<div id="box">...</div>

ボックスの合計幅は、ほとんどすべてのブラウザで 150 ピクセル (幅 100 ピクセル + 5 ピクセルの境界線 2 つ + 20 ピクセルのパディング 2 つ) ですが、IE6 より前のブラウザでは依然として 100 ピクセルです (境界線の値とパディングの値は、幅の値)、ボックス モデルのハックはこの問題を解決するように設計されていますが、問題も発生します。より簡単な方法は次のとおりです。

これにより、どのブラウザでもボックスの合計幅は 150 ピクセルになります。

7. ブロック要素を中央に配置します

Web サイトが固定幅レイアウトを使用し、すべてのコンテンツが画面の中央に配置されていると仮定すると、次のようになります。

次のCSS:

HTML の本文内に任意の項目を配置でき、その項目は自動的に等しい左右の境界値を取得して中央揃えで表示されます。ただし、これは IE6 より前のブラウザでは依然として問題であり、中央揃えにならないため、次のように変更する必要があります。

body を設定すると、メイン コンテンツが中央に配置されますが、すべてのテキストが中央に配置されることもあります。このため、#content の div には text-align: left という値も指定する必要があります。

8. CSS を使用して垂直方向の中央揃えを実現する

表の場合、垂直方向の中央揃えは簡単です。セルをvertical-align: middleとして指定するだけですが、これはCSSレイアウトでは機能しません。ナビゲーション メニューの高さを 2em に設定し、CSS で垂直方向の配置規則を指定したとします。テキストは依然としてボックスの上部に配置され、まったく違いはありません。

この問題を解決するには、ボックスの行の高さをボックスの高さと同じに設定します。この例では、ボックスの高さは 2em であり、CSS に別の line-height: 2em を追加するだけです。 ！

9. コンテナ内での CSS の配置

CSS の最大の利点の 1 つは、ドキュメント内のどこにでもオブジェクトを配置でき、コンテナ内にもオブジェクトを配置できることです。 CSS ルールをコンテナに追加するだけです。

次に、コンテナ内の要素はコンテナを基準にして配置されます。次の HTML 構造を使用すると仮定します。

コンテナ内のナビゲーションを左端から 30 ピクセル、上から 5 ピクセルの位置に配置する場合は、次の CSS ステートメントを使用できます。

10. 画面下まで広がる背景色

CSS の欠点の 1 つは、垂直方向の制御が欠如していることです。これにより、テーブル レイアウトでは発生しない問題が発生します。 Web サイトのナビゲーションを配置する列をページの左側に設定するとします。ページの背景は白ですが、ナビゲーション列の背景を青にするには、次の CSS を使用します。

問題は、ナビゲーション項目がページの下部まで拡張されておらず、当然のことながら、その背景色も下部まで拡張されていないことです。そのため、左の列の青い背景がページの途中で切り取られ、デザインが無駄になってしまいます。残念ながら、本文の背景を左の列と同じ色と幅の画像として指定することしかできません。CSSは次のとおりです。

背景画像は幅 150 ピクセルの青色の画像である必要があります。この方法の欠点は、em を使用して左列の幅を指定できないことです。ユーザーがテキストのサイズを変更してコンテンツの幅が拡大しても、背景色の幅はそれに応じて変更されません。

この記事の執筆時点では、これがこの種の問題に対する唯一の解決策であるため、自動的に引き伸ばされる別の背景色を取得するには、左側の列のピクセル値のみを使用できます。