CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！

サンプル

まずはCSS基礎編

1. divを中央揃えにする

ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。

サンプル

#wrapper{ width: 950px; margin: 0 auto; }

2. divを横並びに

floatでdivを並べてレイアウトを組んでいきます。floatを解除する場合はclear:both;を使います。

サンプル

#main{ float: left; }
#side{ float: left; }
#footer{ clear: both; }

3. 複数のクラスを指定

実はクラスは一度に複数指定できます。スペースを空けるだけなので簡単ですね。

HTML

<p class="border float bg">いろんなクラスが！</p>

CSS

.border{ border: 1px solid #000; }
.float{ float: left; }
.bg{ background-color: #eee; }

4. マージンやパディングのプロパティを短く指定

マージンやパディングを指定する際、いちいちmargin-top:10px;、margin-left: 20px;、、、と書かなくても一行で指定することができます。margin: 上、右、下、左;と、上から時計回りの順で指定していきます。

#main{ margin: 10px 20px 30px 40px; }

/* 上下が同じ、左右が同じ幅 （margin: 上下 左右;）*/
#main{ margin: 10px 20px; }

/* 左右が同じ幅 （margin: 上 左右 下;）*/
#main{ margin: 10px 20px 30px; }

5. ボーダーの色を短く指定

同様にボーダーの色も上、右、下、左の順に指定できます。

#main{ border-color: #ccc #666 #666 #ccc; }

6. フォントのプロパティを短く指定

さらにフォントのプロパティも短くできます。body { font: font-style font-variant font-weight font-size line-height font-family; }の順に指定。全てを指定する必要はないので、必要なもの以外は省いてOK。

body { font: italic small-caps bold 14px/25px Verdana, Arial, Helvetica, sans-serif; }

7. リンクの点線を消去

リンクをクリックしたときに表示される点線を消去。

追記: 私の場合かなりの確率でクライアントから依頼があり消していますが、これをするとタブキーを使ってリンクを辿る際、どこにフォーカスしているかわからなくなります。

a{ outline: none; }

8. 画像リンクのラインを消去

画像にリンクを張ったとき、aタグに指定された色の線が表示されると思います。それを消去しちゃいます。

img{ border: none; }

9. 透明度を変更

各数値を変更して透明度を変更。

サンプル

.image{
    filter:alpha(opacity=50);  /* IE7以下用 */
    -ms-filter: "alpha(opacity=50)"; /* IE8用 */
    -moz-opacity:0.5; /* Firefox 1.5未満, Netscape用 */
    -khtml-opacity: 0.5;  /* Safari 1.x, 他khtmlに対応したブラウザ用  */
    opacity: 0.5; /* Firefox 1.5以上, Opera, Safari用 */
    }

10. ブラウザー毎にCSSを変える

IE用にCSSを変える場合、header内に以下の条件を記述することで実装できます。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IEのバージョン毎にCSSを変える場合は上記[if IE]の部分を下記に変更。

<!--[if IE 6]> →IE6のみ -->
<!--[if gt IE 6]> →IE7以上 -->
<!--[if lt IE 6]> →IE6未満 -->
<!--[if gte IE 6]> →IE6以上 -->
<!--[if lte IE 6]> →IE6以下 -->

いろいろ使える画像編

11. マウスオーバーで画像を変更

これにはいろんなやり方があります。以前書いたCSSスプライトもその一つ。今回は２枚の画像を使ったやり方を紹介します。まずはdivにマウスオーバー時に表示される画像を背景画像として指定。その中に通常時の画像を置きます。そしてvisibility: hidden;でマウスオーバーしたときに通常時の画像を隠します。

サンプル

HTML

<div class="btn">
    <a href="#">
        <img src="btn.jpg" width="200" height="60" />
    </a>
</div>

CSS

div.btn{
    background: url(btn-hover.jpg) no-repeat;
    width: 200px;
    height: 60px;
    }
    div.btn a { display: block; }
        div.btn a:hover{ background: none; }
	    div.btn a:hover img { visibility: hidden; }

12. ファビコン

URLアドレスバーの横にちょこんとある小さな画像、ファビコンを作成。まずはPhotoshop、Illustratorなどで16px四方の画像を作成し、.gifか.pngで保存。その画像を.icoに変換してくれるサイトなどで.ico画像を作ります。その後header内に以下を記述すればファビコン設置完了です。（わざわざ.gifから.icoに変換しなくてもWindowsのPhotoshopなら別名保存から.icoで保存できるらしい。。？Windows使わないのでこの辺よくわかりません。。）

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

13. ページサムネイル画像

ソーシャルブックマークサイト等に表示されるサムネイル画像を指定します。（動作しないサイトもあり？）headerに下記を記述。

<link rel="image_src" href="thumb.jpg" />

14. 画像の好きな部分を切り抜く

clipを使って画像を好きな位置で切り抜きます。サムネイル画像なんかに使えそうですね。divにposition: relative;を、中に入れる画像にposition: absolute;を使うのがポイント。clip: rectの値は少しわかりづらいのですが、下の図を参考にしてみてください。

サンプル

div {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
div img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

かゆいところに手が届く応用編

15. 長いURLを途中で折返す

URLなどの長い英単語が続くとうまく改行せず続けて表示されてしまいます。その問題はword-wrapで解決。

サンプル

ul li{ word-wrap: break-word; }

16. 逆に途中で折り返さず、次の行に

図のように次の行に表示させたい場合はこちらが有効。

サンプル

p span { white-space: nowrap; }

17. リストの最初の仕切り線を消去

仕切りのボーダーを表示する際、各リストにボーダーを指定すると思いますが、その場合トップ（もしくはボトム）にも線がついてしまって悩んでいるあなた！overflow: hidden; を使えば簡単に解決できます！

サンプル

HTML

<ul>
    <li>リストメニュー 1</li>
    <li>リストメニュー 2</li>
    <li>リストメニュー 3</li>
    <li>リストメニュー 4</li>
    <li>リストメニュー 5</li>
</ul>

CSS

ul {
    _zoom: 1;
    overflow: hidden;
    }
    ul li {
	margin-top: -1px;
	padding: 5px;
	border-top: 1px dotted #999;
	}

18. ２行目以降にスペースを

※を使った注意事項などに使える小技。最初の行は通常に、次の行からは一文字分開けて表示します。

サンプル

HTML

<p>※注意事項系に使えるようなサンプル<br />
注意事項系に使えるようなサンプル</p>

CSS

p{
    padding-left: 1em;
    text-indent: -1em;
    }

19. min-height

divなどの最低限表示する高さを指定。例えば最低500pxは表示させ、あとはコンテンツによってどんどん長くなる。。というdivに有効です。IE6ではmin-heightが動いてくれないので、下記のように指定すると動いてくれます。

サンプル

.minheight {
  min-height:500px;
  height:auto !important;
  height:500px;
}

20. 横並びブロックのマージンを調節

div内にある横並びブロックにマージンを、でも最初と最後のブロックをdivの幅に合わせる方法。何かと使う機会が多いです。

サンプル

HTML

<div>
    <ul>
             <li><img src="image/001.jpg" alt="サンプル画像1" width="150" height="100" /></li>
             <li><img src="image/002.jpg" alt="サンプル画像2" width="150" height="100" /></li>
              <li><img src="image/003.jpg" alt="サンプル画像3" width="150" height="100" /></li>
   </ul>
</div>

CSS

div{
    width: 470px;
    border:2px solid #F33;
    }

   div ul {
             width: 480px;
             margin-right: -10px;
             overflow: hidden;
             _zoom: 1;
             }

             div ul li {
                          float: left;
                          margin-right: 10px;
                          }

参照サイト:

• Web Designer Wall
• CSS Lecture
• instant Shift