知っておきたい15個のCSS TIPS

IN THE WOODSでまとめられている15 CSS Tricks That Must be Learnedを紹介します。

原文は素敵なイラスト付きで解説されていますので、合わせてチェックしてください。

positionがabsoluteの要素をpositionがrelativeの要素の中に入れる

positionがrelativeを指定した要素の中にpositionがabsoluteを指定した要素を入れることにより、計算した場所に配置することができます。

参考:positionプロパティの考察

z-indexによる配置

z-indexを利用する場合は、「position:relative」と共に利用することにより要素の重なり順を制御することができます。

margin auto

widthを指定した要素の左右にmargin:autoを指定すると中央表示することが可能です。

参考:CSSで中央表示を実装する

paddingは慎重に適切に使おう

CSSのボックスモデルではpaddingやborderはwidthに含まれない。

#div {
	width:200px;
	padding: 30px;
	border:2px solid #000;
}

例えばこの場、合要素の横幅は264px (200 + 30 + 30 + 2 + 2)になる.

text-indentを利用してテキストを消す

WEBサイトのロゴに画像を利用する場合に、この画像をh1要素で包むとします。これはSEO的にはよいのですが、h1要素に直接テキストを書いたほうが検索エンジンは読み取りやすいです。

display:noneを利用する方法もありますが、text-indentにマイナスの値を指定してもテキストをh1要素の中身から切り離すことができます。

h1 {
	text-indent:-9999px;/*Hide Text, keep for SEO*/
	margin:0 auto;
	width:948px;
	background:transparent url("images/header.jpg") no-repeat scroll;
}

このテクニックを利用する場合は表示される画像と、消されたテキストが同じようになるように注意しなくてはいけない。

参考:画像置換

to-R補足

まず、このテクニックは画像は非表示でCSS offの環境では情報に対してアクセスできない。
SEO的には最近のGoogleの傾向を見る限りはテキストのほうがaltより有利ということはないです。あるとしてもどんぐりの背比べ。
(一昔前はaltの中身は評価されてなかったし、今後どうなるかはわからないですが)

Yahoo!はaltの中身を評価していないので、やはりSEO的に画像置換が有効なのは間違いないです。

ただし、Googleは画像置換に関する品質チェックには力を入れているので、キーワード・スタッフィングを目的としたスパム利用はやめたほうがよいです。

IEでfloatとした要素のmarginが倍になるバグ

floatを指定した要素にmarginを指定すると倍になるというバグがIE6に存在する。このバグの解決方法はいたってシンプルで、flaotを指定した要素のdisplayプロパティにinlineを指定しよう。

.yourClass {
	float: left;
	width: 350px;
	margin: 20px 0 15px 100px;
	display: inline;
}

参考:float方向のmarginが倍増するバグへの対応

激しいスパムにはCSSを利用しよう

CAPTCHA画像の表示などにはimg要素ではなくCSSのbackgroundプロパティを利用しよう。
これは、XHTMLを読み取るようなスパムプログラムに有効である。

IE6で透過pngを利用しよう

IE6では透過pngが利用できない。これはマイクロソフトの独自のfilterを利用することにより解決できる。
条件付コメントなどを利用してIE6にMicrosoft AlphaImageLoaderを利用しよう。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

参考:IEとそれ以外のブラウザでアルファ画像を使う方法
参考:アルファ画像を扱うalphafilter.jsライブラリ
参考:IE6以下をWeb標準に準拠させるライブラリ『IE7.js』

クロスブラウザで透明度を利用する

IEやFirefox, Safari, OperaまたNetscape Navigatorのような古いブラウザで透明度を利用する為のCSSです。

.yourClass {
	filter:alpha(opacity=50);/*Needed for IE*/
	-moz-opacity:0.5;/*Older mozilla broswers like NN*/
	-khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/
	opacity: 0.5;/*FF, Safari, and Opera*/
}

CSS Image Spritesを利用しよう

CSS Image Spritesは複数の画像を一度に読み込みhttpリクエストの数を減らす為にCSSテクニックです。また、hover時の画像のちらつきを防ぐことも可能です、

複数の画像を一つの画像として用意してheightとwidthを指定した要素に、背景画像をbackground positionを利用して配置します。

IE6向けに条件付コメントを利用しよう

条件付コメントを利用すればIE6に対してのみCSSを適用することが出来ます。

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

CSSの固有性

複数のCSSセレクタで固有性が少ない場合、固有性が大きいスタイルに上書きされます。

固有性はCSSセレクタで「要素」が1point、「class」が10point、「id」が100points、「インラインスタイル」が1000pointsで計算されて、合算されたものです。

固有性を無視して適用したい場合は!important を利用しましょう。

to-R補足

CSS2.1からはidセレクタがより多いもの、idセレクタが同じならclassセレクタが多いもの、idセレクタとclassセレクタが同じなら要素セレクタが多いもの、idセレクタとclassセレクタと要素セレクタが同じならユニバーサルセレクタが多いものが固有性が高いとして計算されます。

すべてのブラウザで最小の高さを実装する

すべてのブラウザでmin-heightを再現する方法

#yourId {
	min-height:300px;
	height:auto !important;
	height:300px;/*Needs to match the min height pixels above*/
}

min-heightに対応していないIEにはimportantハックを利用してheight:300pxを指定する。

*ハック

*を利用するとIE6に対してのみスタイルを指定できます。

* html body div#sideBar {
	display:inline;
}

Sliding Doorsテクニックを利用する

ナビゲーションなどでボタンを利用していると内容量に合わせて大きくなったり、小さくしなくてはいけないことがあります。

Sliding Doorsを利用すれば2つの画像を利用して、ボタンをテキストにあわせたサイズを指定することが出来ます。

<a class="myButton">
	<span>Your Title</span>
</a>
a.myButton {
	background: transparent url('right.png') no-repeat scroll top right;
	display: block;
	float: left;
	height: 32px; /* Image height */
	margin-right: 6px;
	padding-right: 20px;/*Image Width*/
/*Other Styles*/
}
	a.myButton span {
	background: transparent url('button_left.png') no-repeat;
	display: block;
	line-height: 22px; /* Image Height */
	padding: /*Change to how you see fit*/
}

関連エントリー

「CSS Reloaded」CSS3の実践的な使い方をご紹介!の感想
marginの相殺
CSSのレイアウトテクニック - Faux Absolute Positioning
CSS で簡単にメニューの上下中央揃えを実現する
javascriptなしで背景が透けるカラムを実装するスタイルシート

スポンサードリンク

«MT4.2でのconvert_breaksに関するバグ | メイン | 現場のプロから学ぶXHTML+CSS 増刷決定»