absolute

CSS実践編:CSSでのレイアウトstep8

前回は、floatを使った段組みレイアウトつきまして、ソースコードを交え詳しく記載いたしました。

実際にソースコードをご確認頂ければ、理解できることと思いますが、
floatを使用すると、大枠となる段組みレイアウトが比較的簡単に記載できます。

また、HTMLの記載順序とclearプロパティ、大事ですね…。

この記載順序を理解しておくことでッ、レスポンシブでCSSの記載をおこなう際も、
ヘッダーの次にメインコンテンツが記載されますので、
スマホ用のレイアウトをCSSでおこなう場合は、さらに簡単になりますね!!

ヘッダーの後にサイドナビなどを記載してしまいますとッ、
スマホでのレイアウトをおこなう際は、ものすごく大変で、
ぼくだったら、迷わずdisplay:none;などと指定してしまうかもです…。

なのでッ、やっぱり順番て重要ですね…。

それでは今回はッ、

・相対配置と絶対配置
・positionプロパティ
・配置方法の使い分け

上記について、記載していきます…。

相対配置と絶対配置

floatやmargin、paddingなどのプロパティを使用したレイアウトのほかに、
上下左右の距離を指定してボックスを自由な位置に配置できるpositionプロパティ。

このpositionを理解できると、自由度の高いレイアウトの実現が可能になります。

それでは実際にソースコードを記載してみます。

何も指定していない(static)の配置

See the Pen
vYOZxzK
by masakado (@kadokado354)
on CodePen.

相対配置(relative)の配置

See the Pen
dyoRvwG
by masakado (@kadokado354)
on CodePen.

positionプロパティ

2段組み・3段組みレイアウトを作成する際は、通常floatプロパティで、
ボックス領域を左右に並べる方法が一般的になりますが、
このpositionプロパティを使用することでボックス領域を任意の位置に
並べることも可能です。

positionは特定の要素を本来の位置から切り離して、自由な位置に
配置できるプロパティになります。

ほかの要素の表示には影響しないので、画像の上に要素を重ねるような
複雑な配置や、良くみかけることのあるスクロールしてもナビゲーションが
固定されているレイアウトなども可能になります。

positionプロパティに指定できる値

指定できる値 説明
static 配置方法を指定しない(デフォルトの状態)
relative staticで配置される位置から相対的な指定
absolute 親要素(relative)を基準とした絶対的な指定。親要素の指定がない場合、ウィンドウが全体の基準
fixed スクロールしてもその要素が移動する
配置方法の使い分け

positionプロパティを使用すると、通常の表示位置からずらしたり、
任意の場所を指定して配置したり、スクロールしても常に固定されて表示されるようにすることが出来ます。

positionプロパティで配置方法を選択したら、top、bottom、left、rightの4つのプロパティから
ふたつを選択し、基準位置からの距離をpxや%で指定します。

例えると、「左上からの位置」を指定したい場合は、topプロパティと、
leftプロパティを使って指定します。

「右上からの位置」の場合は、topプロパティとrightプロパティを使用します。

relative(相対配置)

position:relativeのCSS
#container {
background: #d7ddff;
color: #fff;
width: 450px;
height: 450px;
}
#box1{
width: 200px;
height: 200px;
background:#4c5482;
position: relative;
top: 50px;
left: 150px;
}
#box2{
width: 200px;
height: 200px;
background:#7b86ca;
}
sample_相対配置

top・bottom・left・rightを使用して通常の表示位置から、ずらして配置する。
position:relativeを指定したボックスの後に続くボックスは、
通常フローでの配置を維持します。

absolute(絶対配置)

position:absoluteのCSS
#container {
background: #d7ddff;
color: #fff;
width: 450px;
height: 450px;
}
#box1{
width: 200px;
height: 200px;
background:#4c5482;
position: absolute;
top: 50px;
left: 150px;
}
#box2{
width: 200px;
height: 200px;
background:#7b86ca;
}
sample_絶対配置

position:absoluteを指定したボックスは、親ボックスにpositionプロパティのstatic以外の値が指定されている場合、
親ボックスの左上が基準位置に、親ボックスにpositionプロパティのstatic以外の値が指定されていない場合、
ウィンドウ全体の左上が基準位置として、top、bootom、left、rightを指定して
絶対配置に配置されます。

position:absoluteを指定したボックスは、通常の配置位置とは独立して扱われることになります。

BOX1は独立したボックスとして配置され、フロートの状態と同じような状態になる事から、
BOX2は、本来BOX1が配置される場所にそのまま配置されます。

fixed(固定配置)

position:fixedのCSS
#box1 {
position: fixed;
top: 30px;
left: 0;
width: 100px;
height: 100px;
background:#4c5482;
}
sample_fixed

position:fixedを指定したボックスもabsoluteと同様に通常の配置位置とは独立して扱われます。

指定したボックスは、ウィンドウの枠を基準とした配置になり、
ブラウザ上でページをスクロールしても指定した位置で固定されます。

今回は、positionを使ったレイアウトについて記載してみました。

レイアウトを自由自在に操りたい場合は、マストなスキルですねッ…。

個人的には、レスポンシブでのコーディングの際、position:absoluteを使用し、
PC用ブラウザで確認している時にッ、いつもどこ行っちゃったのかなぁ~ッ…、
などとなりますが、その際配置もposition:staticを一度指定してから、おおよその見当をつけ、
再度、PC用にposition:absoluteでブラウザ内に入った所で、staticを消して、
レイアウトをやり直したりしておりますッ…。

まッ、コレも慣れではございますが、初心者の方には訳が分からず大変かと思います…。

ですので、CSSを上書きする際は、一度スタイルを戻すことを覚えておくと便利です…。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。