あなたの知らない10の優れたCSSスキル_体験交流

この翻訳は著者またはウェブサイトによって承認されていません。すべての権利は原作者およびオリジナルのウェブサイトに帰属します。
原著者または原出版 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 }

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

...
現時点では、ボックスの全幅は 150 ポイントである必要があります。これは、IE6 より前の IE ブラウザを除くすべてのブラウザで正しくなります。ただし、IE5 などのブラウザでは、全幅は依然として 100 ポイントです。この違いは、先人が発明したボックス調整方法を使用して処理できます。

しかし、CSS を使用して同じ目的を達成し、一貫した表示を実現できます。

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

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

。 . .

このように、どのブラウザでも幅は 150 ポイントになります。

7. ブロック要素を中央に揃えます

固定幅の Web ページを作成し、Web ページを水平方向に中央揃えにしたい場合は、通常は次のようになります:

#content { width: 700px ; margin: 0 auto }

を使用してすべての要素を囲みます。これは単純ですが十分ではなく、IE6 より前のバージョンではこの効果が表示されません。 CSS を次のように変更します:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

これにより、コンテンツが中央揃えになります。そのため、
text-align: left がコンテンツに追加されました。

8. CSS を使用して垂直方向の配置を指定します

垂直方向の配置はテーブルを使用して簡単に実現できます。テーブルの単位をvertical-align: middle に設定するだけです。しかし、これは CSS では役に立ちません。ナビゲーション バーの高さを 2em に設定し、ナビゲーション テキストを垂直方向の中央に配置したい場合、この属性を設定しても役に立ちません。

CSS メソッドとは何ですか?ちなみに、これらの単語の行の高さを 2em に設定します: line-height: 2em これで完了です。

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

CSS の利点の 1 つは、コンテナ内であっても要素を任意に配置できることです。たとえば、このコンテナの場合:

#container {position:relative }

このようにして、コンテナ内のすべての要素が相対的に配置されます。次のように使用できます。

...

左から 30 ポイント、上から 5 ポイントの位置に配置したい場合は、次のようにすることができます:

#navigation {position:Absolute; left: 30px; top: 5px }
もちろん、次のこともできます:
マージン: 5px 0 0 30px
4 つの数字の順序は上、右、下、左であることに注意してください。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。

10. 画面の下部に直接表示される背景色

垂直方向の制御は CSS の機能を超えています。ナビゲーション バーをコンテンツ バーと同じようにページの一番下に直接移動させたい場合は、テーブルを使用すると非常に便利ですが、次のように CSS のみを使用する場合は次のようになります。

#navigation { background: blue ; width: 150px }

ナビゲーション バーを短くすると、まっすぐ下まで到達せず、コンテンツが途中で終了したときに終了します。それについて私たちは何ができるでしょうか？

残念ながら、不正行為を行う唯一の方法は、列幅と同じ幅の背景画像を短い列に追加し、設定された背景色と同じ色にすることです。

body {background: url(blue-image.gif) 0 0repeat-y }

現時点では em を単位として使用することはできません。その場合、リーダーが変更されると、フォントサイズ、これはトリックが明らかになります、使用できるのはpxだけです。

この記事の著者: トレントン モス。
発行 Web サイトは、http://www.webcredible.co.uk/ です。

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