2023年02月25日

【これでもうデザインが崩れない】positionプロパティの仕組み

Lesson10

HTML/CSS

自分でpositionプロパティを使用してみると、何故かデザインが崩れてしまった!という体験をした方は多いのではないでしょうか?
positionプロパティは、要素の配置方法を指定するプロパティです。
好きな場所に要素を配置できたり、要素を固定したりと便利なプロパティですが、仕組みを知っておかないと上手く扱うことができません。
positionプロパティの値の指定方法は幾つかありますが、今回は「absolute」と、「relative」の仕組みについて解説します!


ここで聞きなれない言葉「通常フローで配置」「絶対配置」が出てきました。

「通常フローで配置」というのは、htmlに記述した順番通りに縦積みで要素が配置されている状態です。

では、「絶対配置」とは何でしょうか?
絶対配置とは、他の要素に関わらず、指定した箇所に配置できる状態の事を指します。
実際に、top、right、bottom、leftの値を指定することで、好きな場所に要素設定することができるのは、絶対配置となっているためなのです。

ですが、絶対配置にする、ということは「デザインが崩れる原因」となる可能性があります。
その注意点を画像にまとめましたので、確認してみてくださいね。
positionプロパティは便利なプロパティなので、仕組みを理解して扱えるようになりましょう!

positionプロパティの仕組み.jpg

スマブレ

コメント(全0件)

人気の記事ランキング

【相対パスの通し方】ファイルや画像を読み込む方法


【本当に横並び?】floatプロパティについて


【ブラウザに表示されない?】PHPファイルのブラウザ表示方法


【何が原因?】PHPのエラーを理解しよう!


【PHP入門】GETとPOSTの違いについて


【表示切り替えができない?】タブ切り替えについて


【質問】制作データの持ち主を問わずリンクを機能させる方法