意外と知らないCSSの使い方テクニック7つ
フォント ・ レイアウト ・ 画像結構基本的なこともありますが、意外と知らないかもしれない、でも知っていると便利な、CSSの使い方を7個紹介します。
1．フォントに関する記述
font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif
以下のように省略できます。
font: bold italic small-caps 1em/1.5em verdana,sans-serif
すっきりしますね。
日本語フォントだとitalic、small-capsは関係ないですが・・・。
注意点は、この省略する方法は、font-familyとfont-sizeの両方が記述されていないと無効になります。
それ以外は省略してもOKです。
またfont-familyは一番最後に記述します。
2．同時に2つ以上のクラスを指定
通常は1つのクラスしか指定しないと思いますが、半角スペースで区切って2つ以上のクラスを同時に指定できます。
カンマではなくスペースなので注意です。
<p class="text side">...</p>
上記のようにすると、このPタグには、CSSで記述したtextというクラスとsideというクラス両方の値が反映されます。もし重複した値がある場合はCSSでの記述が後のものが適用されます。
3．border（枠）のデフォルトの値
CSSでborderを記述する時、通常はcolor、width、styleを指定すると思います。
border: 3px solid #000;
例えば上記のようにすると、黒い3pxの太さの枠ができます。
しかし！実はstyleだけ指定すればOKなんです。
border: solid;
上記のようにすると、デフォルトのボーダーが適用されます。
デフォルトはミディアムとなっており、3～4pxの太さ、色はテキストの色になります。
CSSの記述はできるだけ少なく簡素に記述する方が良いですので、知っていると役立ちますね。
4．印刷用のCSS
HTMLのheadに2種類のCSSします。
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"/> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/>
上記の場合、1つ目は画面表示用、2つ目は印刷用のCSSになります。
印刷時に変更したいCSSの部分をstylesheet.cssからprintstyle.cssへ持っていきCSSのプロパティや値を変更します。
また、display: none;を使って必要のない部分（メニュー、サイドバー、パンくずリストなど）は印刷されないようにします。
5．画像の配置テクニック
文字を書いた画像を使うよりも、HTMLで文字を直接書く方が、サーチエンジンや表示速度の面では有利とされています。
しかしデザインを重視したい場合や、強調したい場合などは画像を使いたかったりします。
例えば、ウィジェットを販売するサイトで、「ウィジェットを購入」というキャッチフレーズをサーチエンジンでも見つかるように見出しにし、文字ではなく画像を使いたい場合。
<h1><img src="widget-image.gif" alt="ウィジェットを購入" /></h1>
上記のようにするのが一般的です。
しかし、最近ではaltのテキストはサーチエンジンで重視されていません。
つまりaltにテキストを入れてもSEOでは無意味なのです。
そこで下記のように。
<h1>ウィジェットを購入</h1>
h1{
background: url(画像のパス/widget-image.gif) no-repeat;
height: 50px;
text-indent: -2000px
}
heightは必ず指定しましょう。
この方法は、text-indentで画面の外に文字を飛ばしています。
1つ問題点を挙げるとすれば、画像を非表示にしているユーザーには画像もテキストも何も表示されないという点です。
しかし、見出しを文字としているのでサーチエンジン対策にはなりますね。
6．上下のアライン
上下のスペースが均等に文字を中央に配置したいとき。
vertical-align: middle;というのがあるのですがこれは全然使えません。
height:2em; line-height:2em;
上記のように要素のheightとline-heightを同じにするとうまくいきます。
注意点は文字が1行の場合のみ上下方向の中央に文字が配置されます。
7．positionについて
positionプロパティがうまく使えるようになるとデザインの幅がかなり広がります。
<div id="container"><div id="navigation">...</div></div>
#container{
position: relative
}
#navigation{
position: absolute;
left: 30px;
top: 5px
}
上記のようにするとクラスnavigationはクラスcontainer内ののleftが30px、topが5pxの位置にきます。
position:absolute;を使わずにmargin:5px 0 0 30px;としても同じですが、z-indexを使用する場合などはpositionを利用しますので場合によって使い分けるのが良いですね。
