CSSデザインノートでタグ「position」が付けられているもの

今まで、ボックス要素を上下左右中央する場合、トリッキーな方法を用いて実現させていました。

でも、IE8以降から、次のような、簡単なCSSで実装可能になったようです。

(X)HTMLコード

<div class="box"></div>

CSSコード

.box {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:500px;
    height:500px;
}

どうして、このような書き方で実装可能なのかというのは、以下のブログに詳しく書いてあります。

私は勝手に、「top」と「bottom」、「left」と「right」は同時指定できないと思っていたのですが、勘違いでしたね。もっとしっかり仕様書を読まなければ...。

ということは、次のように、topなどで位置を決めることで、widthやheightを固定しない方法もできるのですね。

CSSコード

.box {
    position:absolute;
    top:20%;
    left:20%;
    right:20%;
    bottom:20%;
}

この場合であれば、「margin:auto;」の指定や、width、heightの指定は不要になります。

テキストを左右中央寄せにする場合「text-align:center;」でできますが、ulタグを用いた場合ではリストマークが揃いません。リストの先頭を揃えて、かつ、リスト全体を左右中央寄せ少しCSSに工夫が必要です。

CSSコード

ul {
   position:relative;
   float:left;
   left:50%;
}

li {
   position:relative;
   left:-50%;
}

ポイントは、「float:left;」を設定することと、相対配置で親要素を半分ずらした後に、子要素でさらに元の方向にその半分をずらすことで、全体的に真ん中に配置するテクニックを使うことです。

「float」を使うことで、ulに本来指定されていたdisplayプロパティ(display:block;)が無視される(つまり内容物の範囲しかブロックボックスが存在しなくなる)ため、内容物(li内のテキスト)の横幅を基準に中央寄せにすることが可能となります。

個人的メモです。
position:absolute;で絶対配置した際、bottom:0;にすると、IE6で要素が消えてしまうバグに遭遇しました。しかしなぜか、top:0;にすると表示されるのです。

(X)HTMLコード

<div>
   <p>テキストテキストテキスト</p>
   <img src="image.gif" alt="" />
</div>

CSSコード

div {
   position:relative;
}

p {
   width:500px;
}

img {
   position:absolute;
   right:0;
   bottom:0;
}

どうやら、親要素のdivのhaslyoutがtrueになっていなかったのが原因みたいです。
なので、親要素にもhaslyoutをtrueするために、widthを指定しました。

CSSコード

div {
   width:710px;
   position:relative;
}

p {
   width:500px;
}

img {
   position:absolute;
   right:0;
   bottom:0;
}

以前、IE6でもposition:fixedと同じ動作をさせるというコラムを書きましたが、実際にデザインしているときに不具合に気づきました。

例えば、fixはしたくないけどもposition:absoluteで絶対配置したいボックスが、スクロールすると画面に固定になってしまうのです。当たり前なのですが。

よってIEの場合、スクロールするためのdivボックス(scrollボックス)を用意し、fix表示したいボックスはscrollボックスより外に出すようにしなければなりません。 scrollボックスでスクロールするようにしているので、htmlおよびbodyではスクロールしないようにします。

ソースコードは以下のとおりです。

(X)HTMLコード

<div id="scroll">
   <div id="contents">
      <div class="absolute">絶対配置で表示したい要素</div>
   </div><! -- /contents -->
</div><! -- /scroll -->
<div id="fix">固定したい要素</div>

CSSコード

/* IE6用 */
* html ,
* html body {
   height:100%;
   overflow:hidden;
}

* html #scroll {
   position:relative;
   width:100%;
   height:100%;
   overflow-y:auto;
   overflow-x:hidden;
}

/* 共通 */
div#contents {
   position:relative;
}

div#absolute {
   position:absolute;
   top:0;
   right:0;
}

div#fix {
   position:fixed;
   top:100%;
   right:100%;
}

/* IE6用 */
* html div#fix {
   position:absolute;
}

参考サイト

[追記:2009/12/29]
デザインによっては動作不良を起こす事がわかりました。改訂版を用意したのでそちらもあわせてご覧ください。

[追記ここまで]

Webページをスクロールしても、ある要素を固定した位置で表示したいときがあります。例えば、「ページのトップへの戻り」のリンクやヘッダーメニューなどです。

固定配置をするためには「position:fixed;」を使用します。しかし、IE6ではfixedはサポートされていません。そこでCSSを駆使して、IE6でも擬似的に「position:fixed;」と同じ動作するように指定します。

ポイントは、普通スクロールする際、htmlタグのスクロールを使用しているのですが、それを非表示にしてbodyをスクロールさせます。

(X)HTMLコード

<div id="totop">ページのトップへ戻る</div>
<div id="text"> 
<p>テキストテキスト</p>
<p>テキストテキスト</p>
(略)
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</div>

最低限必要なCSSソースコードです。

CSSコード


#totop {
   position:fixed;
   right:0;
   bottom:0;
}

/* IE6用 */
* html {
   overflow:hidden;
}

* html body {
   height:100%;
   overflow:auto;
   margin:0;
}

* html #totop {
   position:absolute;
   right:16px;
}

注意点は、右の基点が、IE6ではブラウザの右端に対して、Firefoxなどの他のブラウザは、スクロールバーを含まない右端になります。つまり、IE6ではright:0を指定するとスクロールバーと要素が重なってしまいます。rightで位置を指定する場合、上記の例で言うと、IE6では「* html #totop」で指定、その他は「#totop」で指定します。

例えば、フッターメニューやblogのページャー(ページネーション/ページ切り替えメニュー)をリストで作成し、floatで横並びした際、メニュー全体をセンタリングさせようと思っても、「margin:0 auto;」や「text-align:center;」など一般的にセンタリングさせる方法が効きません。

その場合、「position:relative」で位置をコントロールするとうまくいきます。

(X)HTMLコード

<div id="menu">
   <ul>
   <li>メニュー1</li>
   <li>メニュー2</li>
   <li>メニュー3</li>
   <li>メニュー4</li>
   <li>メニュー5</li>
   </ul>
</div>

CSSコード

div#menu {
   position:relative;
   overflow:hidden;
}

div#menu ul {
   position:relative;
   left:50%;
   float:left;
}

div#menu li {
   position:relative;
   left:-50%;
   float:left;
}

参考サイト

最近のブログ記事