CSS のヒント 10 件_CSS/HTML

1.css フォントの略語規則
CSS を使用してフォントを定義する場合は、次のようにすることができます:
font-size: 1em;
line-height: 1.5em;
font-weight:bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
実際、これらのプロパティは次のように省略できます。
font: 1em/1.5em ボールドitalic small-caps verdana,serif
かなり改善されましたが、注意すべき点が 1 つあります。この短縮方法を使用するには、少なくとも font-size 属性と font-family 属性、およびその他の属性 (font-weight、 font -style,font-varient) が指定されていない場合は、自動的にデフォルト値が使用されます。


2. 同時に 2 つのクラスを使用する
通常、属性には 1 つのクラスのみを指定しますが、実際には複数のクラスを指定できるというわけではありません。例:

...

2 つのクラスを同時に使用すると (カンマではなくスペースで区切られます)、この段落は両方のクラスで指定されたルールを適用します。同時に。いずれかのルールが重複する場合は、後者のルールが優先されます。


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


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


5. 画像置換スキル
テキストを表示するには、画像の代わりに標準の HTML を使用する方が賢明です。ダウンロードが高速化されるだけでなく、使いやすさも向上します。ただし、訪問者のマシンでは使用できない可能性のあるフォントを使用する場合は、画像のみを選択できます。
たとえば、各ページの上部に「ウィジェットを購入」というタイトルを使用したいが、検索エンジンにも見つけてもらいたい、そして美しさのために珍しいフォントを使用する場合、次のようにします。

これは確かに真実ですが、検索エンジンは代替テキストよりも実際のテキストをはるかに重視しているという証拠があります (あまりにも多くの Web サイトが既に代替テキストを使用しているため) text はキーワードとして機能します）ので、別の方法を使用する必要があります:

ウィジェットを購入

、美しいフォントはどうですか?次の CSS が役に立ちます:
h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
位置: 絶対;
左:-2000px;
}
これで、美しい画像が得られ、実際のテキストはうまく非表示になりました - CSS の助けを借りて、テキストは画面の左側に配置されました - 2000ピクセル。


6. CSS ボックス モデル ハックの別のオプション
CSS ボックス モデル ハックは、IE6.0 より前のバージョンで特定の要素の境界線を変更するために使用されます。とパディング値は (幅の値に追加されるのではなく) 幅に含まれます。たとえば、次の CSS を使用してコンテナのサイズを指定できます:
#box
{
width: 100px;
border: 5px;
padding: 20px;

次に、HTML に適用します:

...

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

#box div {
border: 5px;
padding: 20px;
}
html:

...

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


7. ブロック要素を中央に配置します
Web サイトが固定幅レイアウトを使用し、すべてのコンテンツが画面の中央に配置されていると仮定すると、次の CSS を使用できます:
#content
{
width: 700px;
margin: 0 auto;
}
HTML の本文内には任意の項目を配置できます

の場合、アイテムは自動的に等しい左右の境界値を取得して、中央に表示されます。ただし、これは IE6 より前のブラウザでは依然として問題であり、中央揃えにならないため、次のように変更する必要があります:
body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
本文を設定すると、本文のコンテンツが中央に配置されますただし、すべてのテキストが中央揃えであっても、これはおそらく希望する効果ではありません。このため、#content の div にも値を指定する必要があります: text-align: left

8。垂直方向のセンタリングを実現します
垂直方向のセンタリングはテーブルにとって簡単で、セルをvertical-align: middleとして指定するだけですが、これはCSSレイアウトでは機能しません。ナビゲーション メニューの高さを 2em に設定し、CSS で垂直方向の配置規則を指定したとします。テキストは依然としてボックスの上部に配置され、まったく違いはありません。
この問題を解決するには、ボックスの行の高さをボックスの高さと同じに設定します。この例では、ボックスの高さは 2em で、CSS に別の line-height: 2em を追加するだけです。垂直方向のセンタリングが可能！

9. コンテナ内での CSS の配置
CSS の最大の利点の 1 つは、ドキュメント内の任意の場所にオブジェクトを配置できることです。オブジェクトはコンテナ内にも配置できます。 CSS ルールをコンテナに追加するだけです:
#container
{
position:relative;
}
これにより、コンテナ内の要素の位置はコンテナを基準にしたものになります。次の HTML 構造を使用するとします。

...

コンテナ内にナビゲーションを配置する場合は、左の境界線から 30 ピクセル、境界線から 5 ピクセルの位置に配置します。 top では、次の CSS ステートメントを使用できます:
#navigation
{
position:Absolute;
left: 30px;
top: 5px;
}

10. 画面の下部まで拡張する 背景色
CSS の欠点の 1 つは、垂直方向の制御ができないことであり、これにより、テーブル レイアウトでは発生しない問題が発生します。 Web サイトのナビゲーションを配置する列をページの左側に設定するとします。ページの背景は白ですが、ナビゲーション列の背景を青にしたい場合は、次の CSS を使用します:
#navigation
{
background: blue;
width: 150px;
}
問題は、ナビゲーション項目がページの下部まで拡張されておらず、当然のことながら、その背景色も下部まで拡張されていないことです。そのため、左の列の青い背景がページの途中で切り取られ、デザインが無駄になってしまいます。何をするか？残念ながら、本文の背景を左の列と同じ色と幅の画像として指定することしかできません。CSS は次のとおりです:
body
{
background: url(blue-image.gif ) 0 0repeat-y;
}
背景画像は幅 150 ピクセルの青色の画像である必要があります。この方法の欠点は、em を使用して左列の幅を指定できないことです。ユーザーがテキストのサイズを変更してコンテンツの幅が拡大しても、背景色の幅はそれに応じて変更されません。
この記事を書いている時点では、これがこの種の問題に対する唯一の解決策であるため、自動的に引き伸ばされる別の背景色を取得するには、左の列のピクセル値のみを使用できます。