★このページでは、CSSの基本的な仕様について解説しています。
動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。
|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL９. 配置に関する設定 その１ ★ 配置方法と位置指定
１．配置方法 position: <値>; 画面上での要素の表示位置は主に数値で指定することになっていますが、その数値がどこを基点としているかを先に定める必要があります。このプロパティに<値>として指定できるのは以下の4つです。 static ... 配置方法を特に指定せず、標準的な位置に表示する。（デフォルト） relative（相対配置） ... 「static」の時に通常表示される位置を基準として、指定された数値分移動した場所に表示する。 absolute（絶対配置） ... 親要素を基準として、指定された数値分移動した場所に表示する。 fixed（固定配置） ... 親要素を基準とするのは「absolute」と同じだが、位置は完全に固定されて、画面がスクロールしてもそこから動かない。（ただし、IE6.0はfixedに対応していません。他のバージョン、ブラウザでも未対応のものが多いようです。）
では、<body>という親要素内に<div>を配置した時に、各<値>が表示にどのように反映されるかを例に取って図で見てみましょう。 ⅰ）「position: static;」 ※HTML上で記述されている順に、縦または横方向に指定通り並びます。
ⅱ）「position: relative;」で、<div1>を「left: 100px; top:60px;」、<div2>を「left: 80px; top:60px;」に指定。 ※それぞれ下図のように、「position: static;」の時の位置を基準として指定数値分移動します。
ⅲ）「position: absolute;」で、数値をⅱ)と同じに指定。 ※それぞれ下図のように、親要素である<body>を基準として指定数値分移動します。
ⅳ）<div3>にのみ「position: fixed;」、「right: 0px; top:0px;」を指定。
画面がスクロールして他のボックスがフレームアウトしても、 「position: fixed;」が指定されている<div3>は、常に画面上で定められた位置から動かない。
以上のように、「position:」の<値>を元にして、指定された数値が表示に反映されます。なお、実際にCSSで<div>にいくつか個別の指定を行う時は、クラスセレクタかidセレクタを使って以下のように記述します。
２．位置指定 配置方法が決まったら、次は実際の位置を指定します。「position: relative（absolute，fixed）;」の時に、基準となる位置から上下左右どの方向にどれだけ移動するかを個別に設定することが出来ますが、boxは四角ですから、4つの角のどれかの座標が定まれば必然的に表示位置が決定されます。また、特にboxのサイズが指定されていない限りは、内容によってサイズも変化しますので、場合に応じて必要なプロパティのみを設定しておけば良いでしょう。ちなみに「position: static;」は自動的に表示位置が定まる設定ですので、位置指定は必要なく、設定した場合でも無視されます。 top: <値>; ... 基準の上端からの位置 right: <値>; ... 基準の右端からの位置 bottom: <値>; ... 基準の下端からの位置 left: <値>; ... 基準の左端からの位置
ⅰ）「数値+単位」で指定する （スタイルシートで使用できる単位については、「Column8.スタイルシートと単位」を参照して下さい。） ex. div { position: relative; top: 60px; left: 100px; }
ⅱ）「%」で指定する 「top、bottom」は親要素の高さ、「right、left」は親要素の幅に対する割合で位置が決定されます。この場合は、「position: relative;」であっても、親要素のサイズに対する割合となります。例えば親要素が幅300pxの場合に5%を指定すると、表示は右、もしくは左から15ピクセルの位置となります。 ex. div { position: absolute; top: 3%; left: 5%; }
ⅲ）キーワードで指定する これらのプロパティに対応するキーワードは「auto」のみです。これを指定すると、他の要素との相関関係によって自動的に位置が決まります。ただし、これがデフォルトなので、特に指定しなくても同じ結果になります。
初級篇2.VOL8. テキスト表示に関する設定・その4 <<
|
2007.2.10.
→ 