1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます プロパティ position ボックスの配置方法 ( 基準位置 ) を指定します static relative absolute fixed 値説明特に配置方法を指定しない この値の時にはtop bottom left rightは適用されない ( 初期値 ) 相対位置への配置になる positionプロパティのstaticを指定した場合に表示される位置が基準位置になる 絶対位置への配置になる 親ボックスにpositionプロパティのstatic 以外の値が指定されている場合には 親ボックスの左上または右下が基準位置になる 親ボックスにpositionプロパティのstaticが指定されている ( またはpositionが指定されていない ) 場合には ウィンドウ全体の左上または右下が基準位置になる ウィンドウの表示領域を基準にした絶対配置になる スクロールしても位置が固定されたままになる position プロパティを使用してボックスの配置方法を指定し 実際のボックスの配置位 置は次のように top プロパティ bottom プロパティ left プロパティ right プロパテ ィを使用して指定します top と left で指定し 親ボックスの左上端から配置するボックスの上端 (top) の距離と左端 (left) の距離を指定します top と right で指定し 親ボックスの右上端から配置するボックスの上端 (top) の距離と右端 (right) の距離を指定します bottom と left で指定し 親ボックスの左下端から配置するボックスの下端 (bottom) の距離と左端 (left) の距離を指定します bottom と right で指定し 親ボックスの右下端から配置するボックスの下端 (bottom) の距離と右端 (right) の距離を指定します 通常は top プロパティと left プロパティで指定します 重要 top left bottom right の指定は position プロパティの値が static の場 合 ( または position の指定がない場合 ) には適用されません 1
子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top bottom left right 上下左右からの距離で配置する位置を指定します 値説明数値 + 単位数値 +pxなどの単位を付けて指定 パーセント (%) 親ボックスの幅 高さを基準とした割合をパーセント (%) で指定 auto 要素の種類などに応じて自動的に調整される ( 初期値 ) top bottom left right は 配置するボックスの position プロパティの値が absolute relative 又は fixed の時に有効です Position プロパティの値の違いによる top bottom left right の適用の違い 親ボックスの position プロパティの値を absolute relative または fixed に指定した場合に 子ボックスの position プロパティの指定の違いにより 子ボックスの配置がどのように違うのか見てみましょう ここでは親ボックスの position プロパティの値は absolute に指定しています 親ボックス (parent) と子ボックス (child1~child6) の配置位置 幅 高さ 色を次のように指定した場合で説明します parent 幅 200px 高さ 200px child1 top 50px left -100px 幅 50px 高さ 50px 色 lightgreen child2 top -30px left -30px 幅 50px 高さ 50px 色 skyblue child3 top 50px left 30px 幅 50px 高さ 50px 色 salmon child4 bottom 50px right 30px 幅 50px 高さ 50px 色 yellow child5 bottom -30px right -30px 幅 50px 高さ 50px 色 orange child6 bottom 50px right -100px 幅 50px 高さ 50px 色 violet position: absolute; の場合 親ボックスに position プロパティの absolute relative または fixed が指定さ れている場合には 親ボックスの左上端または右下端が基準位置となります ( 注 : 親ボックスに position プロパティの absolute relative または fixed が指 定されていない場合に 子ボックスを position: absolute; で指定し top bottom left right で配置位置を指定しようとしても top bottom left right の指 定は適用されません ) 2
left: -30px; child2 top: -30px; top: 50px; top: 50px; left: -100px; child1 left: 30px; child3 parent child4 right: 30px; child6 bottom: 50px; right: -100px; bottom: 50px; child5 bottom: -30px; right: -30px; position: static;( または position の指定がない場合 ) の場合 特に配置方法を指定しません この値の時には top bottom left right は 適用されません child1 parent child2 child3 child4 child5 child6 position: relative; の場合 position プロパティの static を指定した場合に表示される位置が基準位置となり ます 3
top: 50px; top: -30px; left: -30px; left: child1 child2-100px; parent child1 child2 child3 child4 top: 50px; right: 30px; left: 30px; child4child3 bottom: 50px; child5 child6 child5 child6 bottom: -30px; right: -30px; right: -100px; bottom: 50px; position: fixed; の場合ウィンドウの表示領域を基準にした絶対配置となります ウィンドウの表示領域の左上端または右下端を起点とした配置になります 背景画像などの場合に指定する場合があり スクロールしても画像の位置が固定されたままになります なお サンプルではトランジションが動くステージ ( 舞台 ) として幅 500px 高さ 400px のボックス (id 名 #stage) を指定していますが このステージのボックスを HTML 文書に埋め込みたい場合は このステージのボックスの position プロパティの値を relative に指定すれば ステージとその周囲のコンテンツとの配置を従来通り margin で指定でき しかも子ボックスや孫ボックスには position プロパティの値を absolute で指定できます 4
サンプル CSS ではボックスや画像の大きさを変えても その後のボックスや画像の位置が移動しないようにさせてみましょう 変化前 変化後 PositionTopLeft の説明 HTML の記述 (PositionTopLeft.html) BoxChange.html と違うところは <div> 要素に id 属性で stage と名づけたボックスを 変化させる4つのボックス (id 名 box1~box4) を囲むように記述します これで id 名 stage のボックスが親ボックスとなり 変化させる4つのボックス (id 名 box1~box4) が子ボックスとなったわけです <!DOCTYPE html> <html> <head> <title>positiontopleft</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="positiontopleft.css"> </head> <body> <p> ボックスの大きさを変えても位置が移動しないようにする </p> <div id="stage"> <div id="box1" onclick="classname='anime1'"><font class="font1">click</font></div> <div id="box2"><font class="font1">hover</font></div> <div id="box3" onclick="classname='anime3'"><font class="font1">click</font></div> <div id="box4"><font class="font1">hover</font></div> </div> </body> </html> 5
CSS の記述 (PositionTopLeft.css) 先ず id 名 #stage と名づけたボックスを指定します トランジションが動くステージ ( 舞台 ) と考えてください ここではステージが親ボックスとなります ステージの position プロパティの値は relative で指定します #stage { margin: 0px; width: 450px; height: 400px; background-color: white; border: solid 1px black; position: relative; 次に 子ボックスを 4 つ使用するので BoxChange.css のように それぞれ変化させる方法 を記述します このときそれぞれのボックスには position: absolute; と指定します 配 置する位置は top と left で指定します Position プロパティによる絶対位置の配置方法 親ボックス (<div id="stage">) 50px 50px 子ボックス 1 <div id="box1"> Click 220px 50px 子ボックス 3 <div id="box3"> Click 200px 200px 50px 子ボックス 2 <div id="box2"> Hover 220px 子ボックス 4 <div id="box3"> Hover #box1 { top: 50px; left: 50px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; 6
#box1.anime1 { width: 120px; height: 120px; background-color: yellow; border-color: orange; #box2 { top: 200px; left: 50px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; #box2:hover { width: 120px; height: 120px; background-color: pink; border-color: magenta; #box3 { top: 50px; left: 220px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; #box3.anime3 { left: 300px; background-color: lightgreen; border-color: limegreen; #box4 { top: 200px; left: 220px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; text-align: center; position: absolute; #box4:hover { left: 300px; background-color: skyblue; border-color: blue; 最後に 各ボックスの中に表示するテキスト文字のフォントを.font1 クラスとして指定し ます 7
.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 100px; では PositionTopLeft.html をブラウザで表示させて クリックや hover してみましょう ボックスの大きさを変化させても 周りのボックスの位置が移動しなくなったでしょう これは PositionTopLeft.css で 変化させる4つの子ボックス (id 名 box1~box4) に指定した position: absolute; により 親ボックス (id 名 stage のボックス ) の左上端を基点にして絶対位置に配置されているため 周りの子ボックスからの影響を受けないからです 8