久しぶりにCSSの記事を書こうと思います。
今回のお話はpositionって言って、ボックスの配置方法を指定するプロパティです。
ヘッダーにボタンを設置したり、ここにこれを配置したい！って時に使います。
アメブロのカスタマイズでもよく使うのですが、上手くお伝え出来るかどうか正直自信が無いです(^▽^;)
難しく考える必要は全くないのですが、慣れが必要だと思います。
では、まず下記の表を元に説明して行きます。（この時点では意味は分からなくて大丈夫！）
position
| プロパティ | 値 | 〆 | 説明 |
| position: | static | ; | 通常の位置（何も指定しない初期状態と同じ） |
| relative | 通常の位置からの相対的な位置 | ||
| absolute | 親ボックスを基準とした絶対的な位置 | ||
| fixed | ウィンドウを基準とし、さらに位置固定 |
| プロパティ | 値 | 〆 | 説明 |
| top: | pxまたは%（他の単位でも可） 例：10pxや50%こんな感じに指定する | ; | 上からの距離を指定する |
| right: | 右からの距離を指定する | ||
| bottom: | 下からの距離を指定する | ||
| left: | 左からの距離を指定する |
この表を見ながら、ひとつひとつゆっくり説明して行きます。
まず何から説明しようか迷いましたが、絶対的な位置とか相対的な位置とかってわかりにくいですよね・・・
この辺をもっと簡単に説明すると・・・・
「あなたはどこを基準に動きますか？」ってことです(・∀・)
あなたは家に居ます。自分の家を基準に動きますか？それとも町内を基準に動きますか？って感じですw
図で説明するとこうです！
自分が右下の青のボックスの中にいます。
青のボックスを基準として、左上に動いた場合はこうなりますよね？
じゃあ赤のボックスを基準に左下に動いた場合はもちろんこうなります！
イマイチこれで何が出来るかわからない！そう感じたらこれを見て下さい。
僕のブログ全体を基準にしたら、どこへでも行ける様になります！
フリープラグインやフリースペースは普通ならサイドバーにしか表示出来ません。
でもこのpositionを使えばどこでも配置出来る様になります！
僕のブログの一番上に表示されてる横並びのメニューボタンも、当然positionで上に配置してます！
どうでしょうか。なんとなくやれる事が見えてきたのではないでしょうか？
では実際にやって行きます！
positionの基準を作る
まずは基準をどこにするのか？これを指定しないと始まりません。
家を基準にするのか？それとも町内を基準にするのか？
この指定がとても重要になります。
基準の作り方はとても簡単！
親要素にpositionを指定するとそこが基準となります。
ん？イマイチわかりにくいですね。
図で説明しますw
こういう感じで何層にも入れ子状態になってます。
赤のボックスの中には青のボックスがあり、さらにその中に自分が居ます。
自分を包み込む要素、それが親要素となります。
上記画像で言うと、赤のボックスと青のボックスが親要素になります。
じゃあこれはどうでしょうか？？
自分の親はどれだかわかりますか？？
赤のボックスの中に緑のボックスと友達が新たに加わりました。
でも自分の親は赤のボックスと青のボックスとなります！
緑のボックスと友達は自分には関係ありません！
最初はここが本当に間違えやすいので気をつけて！
あくまで”自分を包み込む要素、それが親要素”これを覚えておくと良いと思います。
実際にやってみる
では実際にhtmlとcssでやってみます。
まず赤のボックスを作ります。
赤のボックスの中に自分というイメージを入れてます。
こんな感じで書きます。
[ html ]
<div id="red"><img src="自分の画像URL" id="jibun" /></div>
[ css ]
#red { /*idにredが付いた要素を*/
width:690px; /*横幅690pxに指定*/
height:400px; /*縦幅を400pxに指定*/
border:5px #ff0000 solid; /*赤色の外枠を付ける*/
}
次は赤のボックスを基準とする為の指定を入れます。
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
これで赤のボックスが基準となりました！
親要素にpositionを指定する事で、その要素を基準として動かせる様になります。
ではここからまた最初に書いた表で一つずつ説明して行きます。
まずはposition: static;
実は・・・僕これを使った事が無いかもw
これは何も指定してない状態と同じなので、おそらく使う事はありません。
次はposition: relative;
これは通常の位置からどう動くかの指定です。
仮に左に50px、下に50px動いてみます。こんな感じに書きます。
[ html ]
<div id="red"><img src="自分の画像URL" id="jibun" /></div>
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#jibun {
position: relative;
top:50px; /*今居る位置を基準に上から50pxの位置に*/
left:50px; /*今居る位置を基準に左から50pxの位置に*/
}
[ プレビュー ]
50pxズレたのがわかりますね！
じゃあこうするとどうなるか。
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#jibun {
position: relative;
bottom:50px; /*今居る位置を基準に下から50pxの位置に*/
right:50px; /*今居る位置を基準に右から50pxの位置に*/
}
[ プレビュー ]
半分かくれてしまいました。
今居る位置を基準に上下左右の指定で動かせます。
では次はposition: absolute;
これは完全に親要素を基準に動きます。
どう言う事かというと・・・実際やってみます。
[ html ]
<div id="red"><img src="自分の画像URL" id="jibun" /></div>
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#jibun {
position: absolute;
top:50px; /*親要素を基準に上から50pxの位置に*/
left:50px; /*親要素を基準に左から50pxの位置に*/
}
[ プレビュー ]
赤いボックスを基準に上から50px、左から50pxの位置に配置。
これはそのままですね。
次はこうしてみます。
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#jibun {
position: absolute;
bottom:50px; /*親要素を基準に下から50pxの位置に*/
right:50px; /*親要素を基準に右から50pxの位置に*/
}
[ プレビュー ]
親要素が基準となって動いているのがわかりますね！
次はposition: fixed;
これは親とか関係無しにウィンドウを基準にします。しかも固定表示で。
固定表示はスクロールしても付いてきます。
これもサンプルでの表示は出来ませんが、僕のブログの一番上にアメーババーと呼ばれる、
スクロールしても付いてくる帯がありますよね！
これがまさにposition: fixed;です！
では次の例を作ってみます。
まずは前回同様赤のボックスを作り、そこを基準とします。
[ html ]
<div id="red"></div>
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
[ プレビュー ]
今作った赤のボックスの中に青のボックスを配置します。
[ html ]
<div id="red"><div id="blue"></div></div>
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#blue {
width:300px;
height:250px;
border:5px #0071BC solid;
}
[ プレビュー ]
さらに青のボックスの中に自分を入れます。
[ html ]
<div id="red"><div id="blue"><img src="自分の画像URL" id="jibun" /></div></div>
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#blue {
width:300px;
height:250px;
border:5px #0071BC solid;
}
#jibun {
position: relative;
}
[ プレビュー ]
一番近い親要素のpositionが基準となりますので、赤いボックスが基準です。
んじゃあ赤いボックスの右下に自分を配置するにはこうします。
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#blue {
width:300px;
height:250px;
border:5px #0071BC solid;
}
#jibun {
position: absolute;
right:0px;
bottom:0px;
}
[ プレビュー ]
青の箱を無視して赤いボックスの右下に移動します。
では、今度は青の箱を基準にしてみます。
[ css ]
#red {
width:690px;
height:400px;
border:5px #ff0000 solid;
position: relative;
}
#blue {
width:300px;
height:250px;
border:5px #0071BC solid;
position: relative;
}
#jibun {
position: absolute;
right:0px;
bottom:0px;
}
[ プレビュー ]
青のボックス#blueにposition: relative;を追加したので青が基準となりました。
でもよく見ると、赤のボックスにも基準となるposition: relative;が入ってるのになぜ？って思ったらこう考えて下さい。
自分から一番近い親要素の基準が適用される！
赤いボックスより青いボックスの方が自分に近いので、青のボックスが基準となります。
以上こんな感じですが、ちょっとややこしいですよね(x_x；)
これは本当に慣れだと思います。何回も試してみて下さい！
因みにアメブロで言うとブログ全体を基準にするには#frameだと思います！
#frameにpositionを指定して色々試してみるのも良いかもしれません。
では、今日はこの辺で(°∀°)b