CSSで利用できるテクニックを集めてみました。知っていると意外と使えるものがありますし、記述する時の便利さも感じるかと思います。ご参考になれば幸いです。
ボックスを中央に配置する
ホームページのコンテンツをブラウザの中央に配置しているWebサイトが多くなりました。パソコンのディスプレイがワイドが増えたために、左側に寄っているコンテンツであれば右側がガラ空きになってしまい、間抜けな感じになってしまいます。Yahooサイトのように全体を中央におけば、左右に適度な空間ができ見やすくなります。
☆ ポイント：marginの左右をautoにする。
■ サンプルコードと結果
CSS
.content {
text-align:center;
background-color:#ccffcc;
width:300px;
height:100px;
}
#wrap {
width:200px;
margin:0 auto;
background-color:#cc66ff;
padding:20px;
margin:10px;
}
HTML
<div class="content">
<div id="wrap">
<p>ボックスが中央に配置されます</p>
</div>
</div>
垂直方向の中央に配置する
文字列をボックス要素の垂直方向（上下）の中央に配置するのは意外と面倒です。paddingプロパティを使って調整をしている人も多いかと思います。IE以外のモダンブラウザであれば、display:table-cellを使用すれば解決できますが、IEではCSSハックを使った方法で記述する方法があります。
☆ ポイント：IE用にCSSハックを使い、文字はdiv要素で囲む。p要素などを使うと初期スタイルの影響を受けるので、上下の余白が0のdiv要素を使います。
■ サンプルコードと結果
CSS
.content {
text-align:center;
background-color:#ccffcc;
width:300px;
height:100px;
}
div.content div {
display:table-cell;
vertical-align:middle;
display:inline\9;
zoom:1\9;
}
.vertical {
height:100px;
}
HTML
<div class="content">
<div>垂直方向の真ん中に配置されます。</div>
<div class="vertical"></div>
</div>
左右の高さの異なるボックスを揃える
floatプロパティを使って段組みのレイアウトを作成する際、内容の量の多さによって高さが異なることがあります。このような時は、padding-bottomとmargin-bottomプロパティを使って、調整することができます。サンプルの10000pxという数字には特に意味がありませんが、大きな数字を指定して余白を差し引くようにすることで、左右の高さを内容の多いボックスの方に揃えることができます。
☆ ポイント：段組みのpadding-bottomとmargin-bottomプロパティを使て、大きな数値で差し引きます。
■ サンプルコードと結果
左右の高さが異なる場合
CSS
.content {
width:500px;
border:1px solid #ccc;
}
.left {
float:left;
width:298px;
background-color:#ccccff;
padding:10px 0;
}
.right {
float:right;
width:200px;
background-color:#ffccff;
padding:10px 0;
}
HTML
<div class="content">
<div class="left">ここに内容が入る。ここに内容が入る。
ここに内容が入る。ここに内容が入る。ここに内容が入る。</div>
</div>
<div class="right">ここに内容が入る。</div>
</div>
左右の高さを揃えた場合
CSS
.content {
width:500px;
border:1px solid #ccc;
overflow:hidden;
}
.left {
float:left;
width:298px;
background-color:#ccccff;
padding:5px;
padding-bottom:10000px;
margin-bottom:-10000px;
}
.right {
float:right;
width:200px;
background-color:#ffccff;
padding:5px;
padding-bottom:10000px;
margin-bottom:-10000px;
}
HTML
<div class="content">
<div class="left">ここに内容が入る。ここに内容が入る。
ここに内容が入る。ここに内容が入る。ここに内容が入る。</div>
</div>
<div class="right">ここに内容が入る。</div>
</div>
ボックス要素の最低限の高さを指定する
div要素などの中のコンテンツの量が少ない場合、少なくともある程度の高さを指定したいときがあります。その時は、min-heightプロパティを使います。
例えば、最低の高さを50pxにしても、コンテンツの量が増えても自動的に高さは変化します。
☆ ポイント：min-heightプロパティを使って、ボックス要素の最低の高さを指定します。また、IE対策用としてheithtプロパティも記述します。
■ サンプルコードと結果
CSS
div.box {
min-height:50px;
height:auto !important;
height:50px;
background-color:#99ff99;
padding:10px;
}
HTML
<div class="content">
<div class="box">コンテンツ（内容）が少ない。高さは50px</div>
</div>
コンテンツの量が増えても、高さは自動調整されます。
区切り線（hr要素）に画像を使用する
文章中に区切り線を引くことによって、内容を一旦区切りを示すことができます。のっぺらな区切り線より、画像を使った方が、見栄えが良くなることもあります。
☆ ポイント：区切り線として使いたい画像を作って、background-imageプロパティで指定します。この時、borderプロパティは「0」にします。
■ サンプルコードと結果
CSS
div.content {
height:50px;
background-color:#ffffcc;
}
hr {
background-image:url(bar.png);
height:10px;
border:0;
margin:15px 0;
}
HTML
<div class="content">
<hr />
</div>
リストの一番上の線を消す
リストはメニューを作るには重宝な要素です。メニューの仕切り線にはborderプロパティを使いますが、上下の線が不要にしたい場合もあります。例えば、border-topプロパティで仕切り線を引くと一番上に不要な線が入ります。
☆ ポイント：区切り線として使いたい画像を作って、background-imageプロパティで指定します。この時、borderプロパティは「0」にします。
■ サンプルコードと結果
CSS
div.content {
background-color:#ccffcc;
padding:5px;
}
ul {
margin:0;
padding:0;
}
li {
list-style-type:none;
padding:5px;
border-top:1px solid ##6666cc;
}
HTML
<div class="content">
<ul>
<li>TOP</li>
<li>content</li>
<li>about</li>
<li>info</li>
<li>bbs</li>
</ul>
</div>
また、ulを線で囲んでしまうと上の線がダブってしまいます。ここでは、margin-topプロパティをマイナス値にすることで消します。また、IEのCSSハックとIE専用のzoomプロパティの組み合わせを使います。
☆ ポイント：IE独自の倍率を常に1にし、overflowをhiddenを指定します。上余白をマイナス値にする。
■ サンプルコードと結果
CSS
div.content {
background-color:#ccffcc;
padding:5px;
}
ul {
margin:0;
padding:0;
_zoom:1;
overflow:hidden;
}
li {
list-style-type:none;
padding:5px;
margin-top:-1px;
border-top:1px solid ##6666cc;
}
HTML
<div class="content">
<ul>
<li>TOP</li>
<li>content</li>
<li>about</li>
<li>info</li>
<li>bbs</li>
</ul>
</div>
リストをボタン化する
多くのWebサイトで利用されているメニューです。リストで構成して、マウスと重ねると色が変わるようにボタン化できます。画像よりもシンプルなメニューが作れます。
☆ ポイント：リスト内のa要素（通常インライン要素）をブロック要素にして、四角（ボタン様にする）を構成します。疑似スタイルでマウスオーバーの時に背景色を変える。
■ サンプルコードと結果
CSS
div.content {
background-color:#ccffcc;
padding:5px;
}
ul#menu {
list-style-type:none;
margin:0;
padding:0;
}
ul#menu a {
margin:0;
padding:2px 10px;
background-color:#3300cc;
color:#ffff00;
display:block;
width:350px;
text-decoration:none;
}
ul#menu a:hover {
color:#ffffff;
background-color:#cc00cc;
}
HTML
<div class="content">
<ul id="menu">
<li><a href="#">TOP</a></li>
<li><a href="#">content</a></li>
<li><a href="#">about</a></li>
<li><a href="#">info</a></li>
<li><a href="#">bbs</a></li>
</ul>
</div>
リストを横メニューにする
リストを縦方向ではなくて、横方向のメニューとして作ることができます。ページ送りのナビゲーション的な使い方として、良く利用されています。
☆ ポイント：displayプロパティの値をinline-blockにします。また、li要素にはdisplayプロパティを設定し、値をinlineにすることで、横並びのメニュー風になります。
■ サンプルコードと結果
CSS
ul#menu {
list-style-type:none;
margin:0;
padding:0;
}
ul#menu li {
display:inline;
list-style-type:none;
margin-right:5px;
border:1px solid #cccccc;
width:30px;
}
ul#menu a {
margin:0;
padding:2px 10px;
background-color:#3300cc;
color:#ffff00;
display:block;
width:350px;
text-decoration:none;
}
ul#menu a:hover {
color:#ff0000;
background-color:#ffffff;
}
HTML
<div class="content">
<ul id="menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
H要素とP要素を横並びにする
見出しにタイトル、段落に日付を記述すると、下の図のように予想通りのレイアウトになります。
日付であれば、H要素の右側におきたいものです。H要素内に日付を書くと文字も大きくなります。また、span要素で日付を囲んで、それにフォントの大きさなどを別指定しても構いませんが、ちょっと回りくどいやり方です。そのような時は、displayプロパティを利用します。
☆ ポイント：H要素とP要素に対してdisplayプロパティでinlineを指定します。
■ サンプルコードと結果
CSS
h1 {
font-size:120%;
border-left:5px solid darkgreen;
padding-left:5px;
margin-right:10px;
}
.topic h1,.topic p li {
display:inline;
}
HTML
<div class="topic">
<h1>今日の話題</h1>
<p>«2011/05/22»</p>
</div>
【CSSテクニック：レイアウト編】