[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
まず、そもそもposition: relativeとは何でしょうか。
CSSのpositionプロパティはボックスの配置方法を決めるためのプロパティで、その値としてはstatic、absolute、relative、fixedの4種があります。初期値はstaticです。位置の指定はtop、bottom、left、rightの各プロパティで行います。
それぞれの値の意味は下の表のようになります。
| 値 | 説明 |
|---|---|
static |
HTMLに記述された順序に従い通常の方法でブロックを配置します。 |
relative |
staticの場合の位置を基準にブロックを相対配置します。後続のブロックの配置はそのままです。 |
absolute |
親要素またはbody要素（つまりページ全体）を基準にブロックを絶対配置します。後続のブロックは詰めて配置されます。 |
fixed |
ウインドウを基準にブロックを絶対配置します*1。さらにウインドウ内での位置は固定されスクロールしても位置が変化しなくなります。 |
すなわちposition: relativeを指定すると通常の位置からtop、bottom、left、rightの各プロパティの値の分だけずらして要素を配置することができます。top、bottom、left、rightの各プロパティにはマイナス値も使えます。例えば、top: 10pxと組み合わせれば通常位置を基準に上から10pxの位置（すなわち通常位置の10px下）に、top: -10px; left: 10pxと組み合わせれば通常位置を基準に上から-10px左から10pxの位置（すなわち通常位置から上に10px右に10pxずれた位置）にボックスが配置されます（下図）。
ただ、実際のところposition: relativeでは位置をずらした分後続の要素を詰めないので通常の配置の位置にぽっかりと無駄なスペースが空いてしまい、CSSでWebデザインをする上ではあまり使い勝手が良くありません。また、IEではバグにより本来のスペース以上に広く空白が空くことがあるのでposition:relative;を使う場合にはIEでの表示にも注意する必要があります。
それではposition: relativeは使わないかというとそんなことはありません。確かに相対配置は使いにくいのですが、position: relativeという設定自体はpositionプロパティを利用したデザインの上で欠かせない存在だと思います。
次にどのような場面でposition: relativeという設定を使うのか、使いドコロを見ていきましょう。
1つ目の使いドコロはposition: absoluteと組み合わせる使い方です。
先程の表のposition: absoluteの説明で「親要素またはbody要素を基準に…」と書きました。では親要素とbody要素のどちらを基準にするかはどのように決まるのでしょうか？
実はこれは親要素のpositionプロパティの値によって決まります。position: absoluteを指定した要素の親要素にpositionプロパティの値がrelative、absolute、fixedのものがあればそのうち最も近い階層の親要素が、relative、absolute、fixedのものがなければbody要素が絶対配置の基準となります。つまり絶対配置でbody要素以外を基準にしてボックスを配置したい場合、基準としたい親要素のpositionプロパティをrelative、absolute、fixedのいずれかに設定しておけばよいわけです。
このとき便利なのがposition: relativeです。デザイン上の必要性があり基準としたい親要素に既にrelative、absolute、fixedのいずれかが設定されていればそれをそのまま利用できますが、そうでない場合position: relativeにしておけば、absoluteやfixedのように後続の要素を詰めないのでデザインを崩しませんし、top、bottom、left、rightの各プロパティの値を設定しなければ通常位置のまま絶対配置の基準とすることができます。
この使い方は言うならば「絶対配置の基準を定めるposition: relative」といったところでしょうか。
2つめの使いドコロはz-indexプロパティの指定と組み合わせる使い方です。
position: absoluteなどを使ってブロックを色々な場所に配置しているとブロックの重なり方を制御する必要性が出てきます。このようなブロックの重なる順序を制御するのがz-indexプロパティです。z-indexプロパティは通常の値を0として値が大きいものほど手前に重ねて表示します。
z-indexは凝ったデザインを作る際に便利なプロパティですが、これを有効にするためには適用する要素のpositionプロパティの値がrelative、absolute、fixedのいずれかである必要があります。
使いドコロ1の場合と同じくここでもposition: absoluteが便利です。通常位置に配置しながらz-indexプロパティを指定したい場合にtop、bottom、left、rightの各プロパティを設定せずにpositionプロパティの値をrelativeに設定すれば、デザインを崩さずにz-indexプロパティの指定を適用することができます。
CSS3では色の指定の他に透明度を指定することができます。
rgbaとは、赤（red）・緑（green）・青（blue）・透明（alpha）の事。
指定する順番もこの順番になります。
色の指定は『#FFFFFF』のような16進数は使えず、『0-255』または『0%-100%』で指定します。
透明度の指定は『0.0-1.0』で指定します。
background-color: rgba(赤,緑,青,透明);
現在のところ Safari、Google Chrome では -webkit-border-radius、Firefox では -moz-border-radius と指定するようになってます。
IE や Opera にも実装させるなら JavaScript 等を使用しなくてはいけません。
HTML文書の<head>要素内に<style>要素を記述して、文書単位にスタイルシートを設定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために<style>要素のtype属性の値にはtext/cssを指定します。
尚、スタイルシート部分を<!-- -->でコメントにするのは、スタイルシートに対応していない古いブラウザで<style>要素の内容がそのまま表示されてしまうのを防ぐためです。ただし、近年ではほとんどのブラウザは<style>要素をサポートしているので、<!--と-->を省略してもほぼ問題ないでしょう。
HTML でリストを書くには、ul, li 要素を用いる。
<ul id="list0"> <li>hoge</li> <li>piyo</li> <li>fuga</li> </ul>
このリストの項目の前に、マーカーとして画像
(star.png) を付けるには、CSS で指定する。
#list0 { list-style-image: url("star.png"); list-style-position: inside; }
![img05-30-2010[1]](http://lh4.ggpht.com/_2IbZQWoiKQ0/TANGjiMmtpI/AAAAAAAAAnk/riml3nLTbtc/img053020101%5B2%5D.png?imgmax=800 "img05-30-2010[1]")
これにより、右図のように表示される。
マーカーの中心に文字の位置を合わせるには、マーカーをリスト項目の背景画像として設定する。
#list0 li { list-style: none; background: url("star.png") no-repeat top left; padding: 15px 0px 15px 60px; }
![img05-30-2010[2]](http://lh6.ggpht.com/_2IbZQWoiKQ0/TANGkGz25lI/AAAAAAAAAno/32kHwRItLQY/img053020102%5B2%5D.png?imgmax=800 "img05-30-2010[2]")
文字が真ん中に位置するように padding で上下の間隔を調整する。
画像と文字の位置を、垂直方向に真ん中で揃えたい場合は vertical-align を使う。
<img src="star.png" style="vertical-align:middle;" /> <span >hoge piyo fuga</span>
![img05-30-2010[4]](http://lh5.ggpht.com/_2IbZQWoiKQ0/TANGlKxtQRI/AAAAAAAAAns/K_F1P08uUkc/img0530201043.png?imgmax=800 "img05-30-2010[4]")
水平方向に対して、要素を中央に配置したい場合は text-align を用いる。
text-align が適用される対象は、
Applies to: block-level elements, table cells and inline blocks
div 要素の子要素として画像を配置。
<div style="text-align:center;"> <img src="star.png" /> </div>
または、display と 要素をセンタリング するための margin の設定を併用し、
<img src="star.png" style="display:block; text-align:center; margin:auto;" />
