知っておきたい使えるCSSテクニック25

Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。

いくつかご紹介しますね。

・テキストハイライト時の色を変更する

SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下

::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}

・プリント時にページを指定箇所で分割する

以下のクラスを指定することで印刷時のページを分割できる

.page-break{ page-break-before:always; }

・テキストの代わりに画像を表示する

よく見られるSEOテクニック。ユーザーには画像を見せ、検索エンジンにはテキストを見せる

.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}

・クロスブラウザで（IEでも）動作するmin-height

IEはmin-heightを解釈しないが、IEでもmin-heightを適用する方法

#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

・line-heightで垂直方向のセンタリングを実装する

高さ固定のコンテナの中でテキストを天地中央に持ってきたい場合、line-heightを指定することで解決する

・IEのスクロールバーを解除する

IEはコンテンツの高さに関わらず垂直方向のスクロールバーが表示されるが、それを見せない方法

textarea{overflow:auto;}

・リンククリック時の点線を消す

FirefoxやIEではリンククリック時にテキストの周りに点線が表示されるが、それを消したい時に

a:active, a:focus{ outline:none; }

ほかにもベースのフォントサイズをbodyで62.5%（1emが10pxになる）に指定するテクニックや、CSSリセットのコード等、参考になりそうなのが揃っています。

ぜひ一度見てみてください。

» 25 Incredibly Useful CSS Tricks You Should Know