HTMLの組み込みで使えるCSSの便利な記述6選

今回はhtmlの組み込み作業でよく使う便利なテクニックを厳選してご紹介いたします。
IE6などの古いブラウザにも対応したクロスブラウザ仕様のものをご紹介しております。
独自のページのCSSの頭に入れておくと使いやすいです。

1.floatの解除「.clear」

flaotを解除する場合に良く使うクラスです。
空タグの<br />などはIE6で行間分隙間が開いてしまうので、
その対応もしております。

<br />
.clear { clear:both; }<br />
br.clear { line-height:0px; font-size:0px; height:0px; }<br />

2.floatの高さを計算してくれる「clearfix」

floatをしていると、昔のブラウザでは外枠の高さが認識してくれない場合があります。
そのためのテクニックとしてclearfixというものがあります。
こちらはコピペでfloatを使用しているボックスの外枠にクラスを指定しましょう。

<br />
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }<br />
.clearfix { min-height: 1px; }<br />
* html .clearfix { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }<br />
.clearfix + *{ clear: both; }<br />

使用例

<br />
&lt;div&gt;<br />
&lt;div style="float:left;"&gt;テスト&lt;/div&gt;<br />
&lt;/div&gt;<br />

3.ブロック要素とインライン要素の中間。並べれるボックス「inline-block」

こちらも有名なテクニックですね。
要は画像のような扱いのブロックを実装できます。
「*display:inline」と「*zoom:1」でIEハックを使いインラインブロック化しております。

<br />
.inline_block{<br />
display:inline-block;<br />
display: -moz-inline-box;<br />
*display:inline; *zoom:1;   // IE6,7用<br />
}<br />

4.iphoneなどスマホ用にも対応

スマホでの見え方の違いを直します。
「webkit-text-size-adjust」・・・・iphoneで縦横を切り替えた際に文字が大きくなるのを防ぐ。
「」

<br />
*{<br />
-webkit-text-size-adjust:100%;<br />
}<br />

5.よく使うスタイルをクラス化

floatや太字など、それだけのスタイルをいちいち指定するのが面倒なので、
頭につけておけば作業効率がはかどります。

<br />
.acenter{ text-align:center; }<br />
.aright{ text-align:right; }<br />
.aleft{ text-align:left; }<br />
.fleft{ float:left; }<br />
.fright{ float:right; }<br />
.vtop{ vertical-align:top; }<br />
.vmiddle{ vertical-align:middle; }<br />
.vbottom{ vertical-align:bottom; }<br />

6.共通のCSSを読み込む「@import」

私の場合、ページごとにCSSを用意しているのですが、(例えばトップページなら「top.css」)
共通部分のCSSをページごとに記述するのは修正が入る場合作業が大幅に増えます。
そこで、共通のCSSを読み込む記述をページごとのCSSに記述しておきます。

<br />
@import url(base.css);<br />

こうすれば、同じ指定を2度3度書かなくても良くなります。

リセットCSSの配布について

終わりにHTML5でも使える今回の便利な指定を踏まえたreset.cssを配布いたします。
ご自由にお使い下さい。

→reset.cssをダウンロード(2KB)