cssスタイルシートの十大テクニック

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 bold italic small-caps verdana,serif

今はだいぶよくなったでしょうが、この簡単な書き方を使うには、少なくともfont-sizeとfont-familyのプロパティを指定し、他のプロパティ(font-weight、font-style、font-varientなど)は指定しないと自動的にデフォルト値を使用します.
2.同時に2つのclassを使用
通常、属性にはclassを1つだけ指定しますが、これは1つしか指定できないわけではありません.実際には、指定したいだけ指定できます.たとえば、次のようにします.
　　...
カンマではなくスペースを使用して2つのclassを同時に使用することで、この段落には2つのclassで作成されたルールが同時に適用されます.両方のルールが重複している場合、後者は実際の優先アプリケーションを取得します.
3.cssのボーダーのデフォルト値
枠線のルールを作成すると、通常は色、幅、スタイルを指定します(任意の順序で使用できます).たとえばborder:3 px solid 0000(3画素幅の黒い実線フレーム)ですが、この例で唯一指定する値はスタイルだけです.スタイルを実線(solid)に指定すると、残りの値はデフォルト値を使用します.デフォルトの幅は中等(3～4ピクセル相当)です.既定の色は枠線のテキスト色です.これがあなたが望む効果であれば、cssで指定しなくてもいいです.
　　4.!importantはIEに無視されます
cssでは、通常最後に指定されたルールが優先されます.しかし、IE以外のブラウザでは、後に表示されます!importantの文は、次のような絶対的な優先度を取得します.

　　margin-top: 3.5em !important; margin-top: 2em

IE以外のすべてのブラウザの上部境界は3.5 emであり、IEは2 emである場合、特に相対境界値を使用する場合(この例のように)、IEと他のブラウザとのわずかな違いを示すことができる場合がある.
(cssのサブセレクタもIEに無視されることに気づいた人も多いかもしれません)
5.画像置換のテクニック
画像ではなく標準的なhtmlを使用して文字を表示するのは、通常より賢明であり、ダウンロードを速めるだけでなく、より良い可用性を得ることができます.しかし、訪問者のマシンにないフォントを使うと決心した場合は、画像しか選択できません.
例えば、各ページの上部に「Buy widgets」というタイトルを使いたいと思っていますが、検索エンジンに発見されることを望んでいます.珍しいフォントを美しくするためには、画像で表示しなければなりません.
もちろんそうですが、検索エンジンが実際のテキストをaltテキストよりも重視している証拠があります(altテキストをキーワードとして使用しているサイトが多すぎるため)、別の方法を使用しなければなりません.

　　Buy widgets



　　，           ?   css     ：



　　h1



　　{



　　background: url(/uploadfile/200806/17/96162027360.gif) no-repeat;



　　}



　　h1 span



　　{



　　position: absolute;



　　left:-2000px;



　　}

今、あなたはきれいな画像を使って、実際のテキストをよく隠しています.cssを借りて、テキストは画面の左側-2000ピクセルに位置しています.
6.cssボックスモデルhackの別の選択
cssボックスモデルhackは、IE 6以前のブラウザ表示の問題を解決するために使用され、IE 6.0以前のバージョンでは、ある要素の枠線値と塗りつぶし値が幅に含まれる(幅値に加算されるのではなく).たとえば、次のcssを使用して、コンテナのサイズを指定することができます.

　　#box



　　{



　　width: 100px;



　　border: 5px;



　　padding: 20px;



　　}

htmlに適用します:...
ボックスの総幅は、ほとんどのブラウザで150ピクセル(100ピクセル幅+5ピクセルの枠線2本+20ピクセルの塗りつぶし)であり、IE 6以前のブラウザでは100ピクセル(枠線値と塗りつぶし値が幅値に含まれている)であったが、ボックスモデルのhackはこの問題を解決するためであるが、面倒をもたらす.より簡単な方法は次のとおりです.

　　css:



　　#box



　　{



　　width: 150px;



　　}



　　#box div {



　　border: 5px;



　　padding: 20px;



　　}



　　html:



　　...

これにより、どのブラウザでもボックスの総幅は150ピクセルになります.
7.ブロック要素を中央に配置
あなたのサイトが固定幅のレイアウトを使用していると仮定し、すべてのコンテンツを画面の中央に配置し、以下のcssを使用することができます.

　　#content



　　{



　　width: 700px;



　　margin: 0 auto;



　　}

htmlのbody内の任意の項目を中に置くことができます.この項目は自動的に等しい左右の境界値を取得し、中央表示を保証します.ただし、これはIE 6以前のバージョンのブラウザではまだ問題があり、中央には表示されませんので、次のように変更する必要があります.

　　body



　　{



　　text-align: center;



　　}



　　#content



　　{



　　text-align: left;



　　width: 700px;



　　margin: 0 auto;



　　}

bodyの設定は本体コンテンツを中心にしますが、すべての文字も中心にします.これはおそらくあなたが望んでいる効果ではありません.このため、contentのdivにはtext-align:leftという値を指定します.
8.cssによる垂直中央
垂直中央はテーブルにとっておかずの一皿であり、vertical-align:middleとしてセルを指定するだけでよいが、これはcssレイアウトでは役に立たない.ナビゲーションメニューの高さを2 emに設定し、cssで垂直に位置合わせするルールを指定すると、テキストがボックスの上部に並べられ、何の違いもありません.
この問題を解決するには、ボックスの行の高さをボックスの高さと同じにするだけでよい.この例では、ボックスの高さは2 emで、cssにline-height:2 emを追加するだけで垂直中心を実現することができる.
9.容器内のcss位置決め
cssの最大の利点の1つは、ドキュメントの任意の場所にオブジェクトを配置することができ、同じようにコンテナ内にオブジェクトを配置することもできます.コンテナにcssルールを追加するだけです.

　　#container



　　{



　　position: relative;



　　}

容器内の任意の要素の位置は、容器に対して相対的である.次のhtml構造を使用するとします.
　　...
navigationをコンテナ内の左境界から30ピクセル、上部から5ピクセルに配置するには、次のcss文を使用します.

　　#navigation



　　{



　　position: absolute;



　　left: 30px;



　　top: 5px;



　　}

10.画面下部に広がる背景色
cssの欠点の1つは、垂直方向の制御が欠けていることであり、テーブルレイアウトに問題が発生しないことです.ページの左側にWebサイトを配置するためのナビゲーションの列を設定したとします.ページは白いバックグラウンドですが、ナビゲーションする列を青いバックグラウンドにしたい場合は、次のcssを使用します.

　　#navigation



　　{



　　background: blue;



　　width: 150px;



　　}

問題は、ナビゲーション項目がページの下部まで伸びず、自然と背景色が下部まで伸びないことです.すると左列の青い背景がページで途中で遮断され、あなたのデザインを無駄にしました.どうしようかな?残念なことに、bodyの背景を左列と同じ色の幅の画像に指定するには、詐欺の方法しかありません.cssは以下の通りです.

　　body



　　{



　　background: url(blue-image.gif) 0 0 repeat-y;



　　}

背景図は幅150ピクセルの青い画像であるべきです.この方法の欠点は,emを用いて左列の幅を指定することができず,ユーザが文字の大きさを変更してコンテンツの幅を拡張した場合,背景色の幅はそれに伴って変化しないことである.