今まで使ってコーディングが楽になったと思われるCSSテクニック（一部CSSではない部分もありますが...）などをまとめておきたいと思います。
コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。
画像の下に回り込みをしない
この方法だとソースもシンプルで済みますし、画像の横幅や高さが変わってもソースがそのままで対応出来ます。
HTML
<div class="section2">
<p class="imgL"><img src="image/001.jpg" alt="サンプル画像" width="150" height="100" /></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
CSS
.demo1 {
width: 400px;
border: 2px solid #CCC;
padding: 5px 10px;
margin-bottom: 30px;
_zoom: 1;
overflow: hidden;
}
.imgL { float: left; margin: 0 10px 5px 0; }
.demo1 p { overflow: hidden; _zoom: 1; }
横並びのブロックレベル要素の配置の調整系
上記画像の用に決めらた幅の左右にピタっとくっついた感じの配置のデザインは良くあると思います。こういう時に最初か最初だけ class を追加したり、class 名を変更したら問題ない話なのですが、これを使えば何かと効率はよいかと思います。
HTML
<div class="demo2sample">
<ul class="demo2">
<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
.demo2sample {
width: 470px;
border:2px solid #F33;
}/* ここまでは参考用のソース */
.demo2 { width: 480px; margin: 0 -10px 0 0; overflow: hidden; _zoom: 1; }
.demo2 li { float: left; margin-right: 10px; }
HTML
<div class="demo2-2sample">
<div class="demo2-2">
<div class="column">
<h4>サブタイトルみたいな？</h4>
<p>その内容みたいな？感じのテキスト</p>
</div>
<div class="column">
<h4>サブタイトルみたいな？</h4>
<p>その内容みたいな？感じのテキストテキストテキストテキストテキスト</p>
</div>
<div class="column">
<h4>サブタイトルみたいな？</h4>
<p>その内容みたいな？感じのテキストテキストテキストテキストテキスト</p>
</div>
<!--/ .demo2-2--></div>
</div>
CSS
.demo2-2 {
width: 570px;
margin: 0 -10px 0 0;
_zoom: 1;
overflow: hidden;
}
.demo2-2 .column {
width: 168px;
min-height: 110px;
_height: 110px;
padding: 0 5px 5px;
margin-right: 10px;
float: left;
border: 1px solid #999;
}
.demo2-2 .column h4 {
background: #666;
padding: 5px;
border-bottom: 1px solid #999;
color: #FFF;
margin: 0 -5px 5px;
}
リストの最初だけ border を消す
CSS Happylife さんの「とっても使えるoverflowプロパティ。その使い方色々。」で知り、かなり使えるので紹介しておきます。
HTML
<ul class="demo3">
<li>リストメニュー 1</li>
<li>リストメニュー 2</li>
<li>リストメニュー 3</li>
<li>リストメニュー 4</li>
<li>リストメニュー 5</li>
</ul>
CSS
.demo3 {
_zoom: 1;
overflow: hidden;
}
.demo3 li {
margin-top: -1px;
padding: 5px;
border-top: 1px dotted #999;
}
ページ分割系のナビゲーション
inline-block を使う事でもメリットは 3つもあります。
- クリックエリアが広い
- text-align: center; でセンター配置が可能
- クリックした際の IE のずれの解消
「ページ内分割をするナビゲーションのクリックエリア？IEバグ対応」を参考に！
上記理由から現状では inline-block を使う事が一番だと思います。
HTML
<ul class="demo4">
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
CSS
.demo4 {
text-align: center;
}
.demo4 li {
display: inline;
}
.demo4 li strong {
display: -moz-inline-box;
display: inline-block;
padding: 2px 7px 4px;
background: #EEE;
border: 1px #CCC solid;
}
.demo4 li a {
display: -moz-inline-box;
display: inline-block;
padding: 2px 7px 4px;
border: 1px #CCC solid;
}
.demo4 li a:hover {
border: 1px solid #2D88B3;
background: #2D88B3;
color: #FFF;
}
注意事項系に使える
バシャログさんの「CSSで簡単にぶら下げインデントをする方法」を見て知ったのですが、※を使った注意書きみたいな時によく使えると思います。2行目からは一文字文空けて表示してくれます。
HTML
<p class="demo5">※注意事項系に使えるようなサンプル<br />
注意事項系に使えるようなサンプル</p>
CSS
.demo5 {
margin-left: 1em;
text-indent: -1em;
}
リンクが途中で折り返しされるの防ぐ
代表的なのでいえばタグクラウドみたいなのに使えます。
HTML
<ul class="demo6">
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプルサンプル</a></li>
<li><a href="#">サンプルサンプルサンプルサンプルサンプル</a></li>
<li><a href="#">サンプルサンプル</a></li>
<li><a href="#">サンプルサンプルサンプルサンプルサンプルサンプル</a></li>
<li><a href="#">サンプルサンプルサンプルサンプル</a></li>
</ul>
CSS
.demo6 {
width: 350px;
border: 2px solid #CCC;
padding: 20px;
overflow: hidden;
_zoom: 1;
}
.demo6 li {
list-style-type: none;
float:left;
margin: 3px 10px 3px 0;
}
.demo6 a { white-space:nowrap; }
IEでテキストエリアの縦スクロールバーを非表示
これはリセット（デフォルト）系のCSSに指定しておいても良いかと思います。
HTML
<textarea class="demo7" rows="10" cols="50"></textarea>
CSS
.demo7 { overflow: auto; }
最小、最大の高さや横幅を指定
これも知っておいても便利になる事はけっこうあります。
ネガティブマージン
これは必須だと思いますので、まだ使い方がちゃんと分かってない人はしっかりと把握しておいた方が何かと特ですよ。
お！
全然気がついてなかったです…すみません。
ご指摘ありがとうございました！修正しておきました。
2010年02月14日 02:23