- positionプロパティの基礎が理解できる
- positionプロパティを使ってレイアウトを組める
Webデザイン初心者の方がつまずきやすいCSSのposition。
便利なプロパティなだけに、使いこなしたい方もおおいのではないでしょうか？
今回の記事では、positionをまだ理解できていない方向けに、positionプロパティの基礎とその活用方法をご紹介していきます。
positionを習得すれば、サイト制作の幅が広がり、サイト制作能力が格段に向上しますので、ぜひ最後までご覧いただき、身につけていきましょう。
positionとは?
positionとは、ボックスプロパティの基準位置を指定するプロパティのこと。
とても便利なプロパティなので、CSSを勉強されている方には、ぜひ習得していただきたいCSSです。
positionはどんな使い方ができるのか？
positionの主な使い方は3つあります。
1. 要素を好きな箇所に動かす
positionプロパティを使えば、指定した要素を好きな位置に配置することができます。
2. 要素のうえに別の要素を重ねる
positionの2つ目の使い方として、要素同士を重ねることができます。
3. 要素の位置を常に固定する
positionの3つ目の使い方として、画面をスクロールしても常に同じ位置に要素を固定することができます。
floatやdisplayプロパティとの違いは？
位置を指定するプロパティとして、floatやdisplayがあります。
この2つのプロパティとpositionの違いについてご紹介します。
結論、positionは要素を重ねる場合や細かな位置を指定するときに有効です。
逆にデメリットとしては、画面の変更によるサイズの調整が難しいことです。
CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」
CSSの勉強を始めたばかりの方にとって最初の難関となるのが「Flexbox」ではないでしょうか？ここでは初心者の方に向けてFlexboxの使い方についてご紹介していきます。
positionの4つの使い方
static
staticは、positionのデフォルトで設定されている初期値です。
staticは初期値であるため、特段使用する機会はありません。
z-indexや位置の指定ができないことは覚えておきましょう！
relative
relativeは、現在の位置を起点に指定した要素を動かすことができます。
relativeの特徴
- 好きな位置を指定できる
- z-indexを指定可能
- absoluteの基準になる
relativeを指定するだけでは、特に変化はおこりませんが、topやleftを指定することで好きな位置に要素を配置することができます。
topやleftを使った位置の調整の仕方は後ほど紹介いたします。
absolute
absoluteは、relativeで指定されている要素を基準として、位置を指定します。
relative同様、absoluteを指定するだけでは、特に変化はおこりませんが、topやleftを指定することで好きな位置に要素を配置することができます。
relatibeとの違いは、
relative＝自分の現在地を起点に動かすことが可能
absolute＝relativeで指定された要素を基準に動かすことが可能
この違いをよく覚えておきましょう。
fixed
fixedは、画面に常に固定させたい要素に使用します。
例としては、メニュバーやコンタクトフォーム等に使うことがあります。
absoluteと同じ絶対配置ではあるものの、fixedは基準位置がブラウザ画面が基準となるため違いはございます。
positionとセットで覚えよう！
top・bottom・right・left
positionでrelativeやabsoluteを指定したからといって、ブラウザに変化が起きるわけではございません。
要素を好きな位置に配置するためには、top・bottom・right・leftの4つを組み合わせて、指定したい箇所に配置します。
手順1：positionプロパティで要素を動かす起点を決める。
手順2：top・bottom・right・leftプロパティで具体的な位置を決める。
z-index
positionプロパティを使用し、要素を重ねる際に、重ねる順番を決めるのがz-indexになります。
z-indexは指定した数値が大きい方が上に表示されます。
positionを使用する際の注意点
とても便利なpositionですが、使用する際に2つの注意点があります。
画面からはみ出る場合
Positionは柔軟に要素の位置を決めることができるため、意図しないうちに要素が画面からはみ出してしまうことがあります。
そのような場合、画面下に横スクロールが発生してしまい、画面が左右に揺れてしまいます。
意図せず画面からはみ出してしまった場合は、その要素の親要素に、overflow: hidden;を設定しましょう。
画面からはみ出したままにすると、ユーザビリティを損ねる原因になります。
positionを多用しない
positionは便利であるため、基礎を習得したら多用しがちになる方もいらっしゃいますが、CSSの拡張性を損なう場合があるので気を付けましょう。
要素同士を横並びや縦に並べたい場合は、display: flex;を使用するなど、適正にあったプロパティを選択し、使用しましょう。
CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」
一度使い方を理解することができれば、扱いやすいプロパティなので、使いこなせるようになっていただけるよう、初心者の方に向けてFlexboxの使い方についてご紹介していきます。
positionサンプル
position: relative;
下の図は、上から2つ目のdivに対してposition: relative;をかけ、topとleftプロパティを使用して位置を指定したものです。
もともとのレイアウトを無視した配置になっていることが分かります。
要素が本来あるべき場所を基準としています。
position: absolute;
次に、先ほど配置したdivの中にさらにdivを入れ親子関係を作ります。
その子要素に対してposition: absolute;をかけると、親要素を基準に位置を指定できます。
この時注意しなければいけないのが、必ず親要素にはstatic以外のpositionプロパティをかける必要があるということです。
まとめ
positionで大事なことは次の3点です。
- relativeとabusolute、fixedの使い方と特徴はしっかり認識する
- 重なりを意識する
- 使いすぎには気をつける
現在は多くのサイトでpositionプロパティを使用してサイトデザインを作成しています。
基礎を学び使えるようになると、とても便利なので、ぜひこの機会に習得し、サイト制作にいかしていただけると幸いです。
