10 の古典的な CSS テクニック_CSS/HTML

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

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

font-weight:bold;
font-style:italic;
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 つの要素には 1 つのクラス (Class) のみを設定できますが、これは 2 つのクラスを同時に使用できないという意味ではありません。使用されます。実際、これを行うことができます:

...

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

補足: ID の場合、

...

と書くことはできません。

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

通常、次のようにボーダーの色、幅、スタイルを設定できます。

border: 3px Solid #000

これは、境界線を幅 3 ピクセルの黒の実線として表示します。しかし実際には、ここでスタイルを指定するだけで済みます。

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

4. 文書印刷用 CSS

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

つまり、ページに 2 つの CSS ファイルを指定できます。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 }

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

6. CSS ボックス モデルの別の調整テクニック

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

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

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

< p id="box">...

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

しかし、CSS を使用して表示の一貫性を持たせることで同じ目的を達成できます。

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

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

...

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

7. ブロック要素の中央揃え

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

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

すべての要素を囲むには

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

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

これにより、Web ページのコンテンツが中央に配置されるため、コンテンツに text-align: left が追加されます。

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

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

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

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

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

#container {position:relative }

このようにして、コンテナ内のすべての要素を相対的に配置することができます。このように:

...

左に 30 ポイント、上に 5 ポイントを配置したい場合は、次のようにします。 >

もちろん、次のようにすることもできます:

margin: 5px 0 0 30px

4 つの数字の順序は次のとおりであることに注意してください。 、右、下、左。もちろん、場合によってはマージンよりも位置決めの方が良い場合もあります。

10. 画面下端の背景色

は縦方向に制御されており、CSS では制御できません。ナビゲーション バーをコンテンツ バーと同じようにページの下部に直接移動させたい場合は、テーブルを使用すると非常に便利ですが、次のように CSS のみを使用する場合:

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

短いナビゲーション バーは真っ直ぐ下まで到達せず、コンテンツが途中で終了すると終了します。何をするか？ 残念ながら、不正行為を行う唯一の方法は、短い列に列幅と同じ幅の背景画像を追加し、設定された背景色と同じ色にすることです。

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

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