この翻訳は著者またはウェブサイトによって承認されていません。すべての権利は原作者およびオリジナルのウェブサイトに帰属します。
原著者または原出版 Web サイトから許可されている場合は、この翻訳を自由に使用できます。

1. CSS フォント属性の省略規則

一般に、CSS でフォ​​ント属性を設定する方法は次のとおりです:

font-weight:bold;
font-style:イタリック体;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

しかし、すべてを 1 行で書くこともできます:

font: 太字斜体小文字 1em/1.5em verdana,sans-serif;

素晴らしいですね。注意点が 1 つあります。この省略方法は、font-size プロパティと font-family プロパティの両方が指定されている場合にのみ機能します。また、font-weight、font-style、および font-variant を設定しない場合は、デフォルト値が使用されるため、この点に注意してください。

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

通常、1 つの要素に対して設定できるクラス (Class) は 1 つだけですが、2 つ使用できないわけではありません。実際、これを行うことができます:

...

P 要素に同時に 2 つのクラスをスペースで区切って与えます。 , このように、テキストクラスとサイドクラスのすべての属性がP要素に追加されます。 2 つのクラスの属性間に競合がある場合は、後で設定された方が有効になります。つまり、CSS ファイル内で後から配置されたクラスの属性が有効になります。

補足: ID の場合、このように書くことはできません

...

このように書くことはできません

3. CSS ボーダーのデフォルト値

通常、次のようにボーダーの色、幅、スタイルを設定できます。
ボーダー: 3px ソリッド #000
これにより、境界線が幅 3 ピクセル、黒、ソリッドで表示されます。しかし実際には、ここでスタイルを指定するだけで済みます。

スタイルのみを指定した場合、その他の属性はデフォルト値が使用されます。一般に、Border のデフォルトの幅は中程度で、通常は 3 ～ 4 ピクセルに等しく、デフォルトの色はテキストの色です。この値が適切であれば、それほど多くの設定を行う必要はありません。

4. ドキュメント印刷用の CSS

多くの Web サイトには印刷用のバージョンがありますが、CSS を使用して印刷スタイルを設定できるため、実際にはこれは必要ありません。

つまり、ページに 2 つの CSS ファイルを指定できます。1 つは画面表示用、もう 1 つは印刷用です。



その 1 1行目は表示用、2行目は印刷用ですが、メディア属性に注目してください。

しかし、印刷用 CSS には何を書けばよいのでしょうか?通常の CSS を設計するのと同じ方法で設定できます。デザイン時にこのCSSを設定してCSSを表示し、効果を確認することができます。おそらく、display: none コマンドを使用して、一部の装飾画像をオフにし、一部のナビゲーション ボタンをオフにすることになるでしょう。詳細については、「印刷の違い」の記事を参照してください。

5. 画像置換スキル

一般に、標準 HTML を使用して画像の代わりにテキストを表示することをお勧めします。これにより、高速なだけでなく読みやすくなります。ただし、特殊なフォントを使用する場合は、画像のみを使用できます。

たとえば、アイコン全体を販売したい場合は、次の画像を使用できます:

もちろんこれは可能ですが、検索エンジンにとってはは通常のテキストと同じですが、それに比べて、alt の置換テキストにはほとんど関心がありません。これは、多くのデザイナーが検索エンジンを欺くためにここに多くのキーワードを配置しているためです。したがって、メソッドは次のようになります:

ウィジェットを購入

ただし、この方法には特別なフォントはありません。同じ効果を実現するには、次のように CSS を設計できます:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

Pay画像の高さに注意してください。実際の画像の高さに置き換えられます。ここでは画像が背景として表示され、-2000ピクセルのインデントが設定されているため、実際のテキストは画面左側の2000ポイントに表示され、見えなくなります。ただし、画像をオフにしている人にとっては、まったく見えなくなる可能性があるので注意してください。

6. CSS ボックス モデルのもう 1 つの調整テクニック

このボックス モデルの調整は主に IE6 以前の IE ブラウザ向けで、境界線の幅と空白も要素の幅としてカウントされます。 。例:

#box { width: 100px; border: 5px; padding: 20px }

次のように呼び出します: