子ボックスや孫ボックスなどに position: absolute; と指定するとそれぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができますトランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

Size: px

Start display at page:

Download "子ボックスや孫ボックスなどに position: absolute; と指定するとそれぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができますトランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top"

そうきちや
5 years ago
Views:

1 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

2 子ボックスや孫ボックスなどに 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

3 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

4 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

DOCTYPE html> <html> <head> <title>positiontopleft</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="positiontopleft.

5 サンプル 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

6 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

7 #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

8 .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

overflow プロパティの指定は親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されませんボックスの外にはみ出た部分を表示させたくないときに hidden を使用しますサ

overflow プロパティの指定は親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されませんボックスの外にはみ出た部分を表示させたくないときに hidden を使用しますサ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover するとピエロの玉乗りがステージの外から入って外へ出て行きます動きの仕組みこのトランジションは次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き