close

ホームページ作り方[ボックスの配置]

要素の配置を記述するにはpositionやfloatプロパティなどが使われます。いくつか配置の例を示します。背景色が同じボックスが一つのまとまりです。

BOX1
BOX2
BOX3

ブロックレベル要素を3つ並べました。改行され縦に並びます。

BOX1 BOX2 BOX3

インライン要素を3つ並べました。改行されずに左から右に並びます。

BOX1
BOX2
BOX3

ブロックレベル要素をdisplay:inline-block;でインラインブロック要素にして並べました。インライン要素のように左から並び、ブロックレベル要素のようにボックスサイズを指定できます。

BOX1
BOX2
BOX3

ブロックレベル要素を横に並べるときに floatプロパティも使われます。 BOX1〜3にfloat: left;と記述するとインライン要素のように左から右へ並びます。clear: left;で左寄せが終わります。

BOX1
BOX2
BOX3

BOX1と2をfloat: right;、BOX3をfloat: left;、BOX4に clear: both;で左寄せ右寄せの両方を解除しています。この文字はBOX3と4の間に記述しています。

BOX4

ボックスのスタイルシートは上のボックス群と一緒です。この文字はBOX1の前に記述しています。

BOX1

この文字はBOX1とBOX2の間に記述しています。

BOX2

この文字はBOX2とBOX3の間に記述しています。

BOX3

この文字はBOX3とBOX4の間に記述しています。

BOX4

この文字はBOX4の後ろに記述しています。

BOX1
BOX2
BOX3

ボックスの親要素にdisplay: flex;と設定し、フレックスボックスレイアウトを使ってブロックレベル要素を左から右に並べました。フレックスボックスレイアウトは水平方向と垂直方向の両方の整列やボックスの伸縮をを容易に操作することが可能です。詳しくはフレックスボックスで説明しています。

BOX1
BOX2
BOX3

親要素にdisplay: flex; flex-flow: row-reverse;、BOX1にorder: 1;、BOX3にorder: 2;と設定しました。row-reverseで水平軸で右から左の順に並びます。orderの数値が小さいほど先頭にきます。初期値は0です。なのでBOX2、1、3の順番に右から並びます。

BOX1
BOX2
BOX3

ボックスの親要素にdisplay: grid;と設定し、グリッドレイアウトを使って配置しました。2×2のマス目をつくりそこに順番に配置しています。グリッドレイアウトはtableのように要素を列と行に整列させることができます。tableよりも複雑な配置を簡単に記述できます。詳しくはグリッドレイアウトで説明しています。

BOX1
BOX2
BOX3

グリッドレイアウトで4×4のマス目を作り、grid-row、grid-columnプロパティを使ってbox1を上から4番目左から3番目、box2を2番目・2番目、box3を1番目・4番目に配置しました。

BOX1
BOX2
BOX3
BOX4
BOX5

BOX2にposition: -webkit-sticky; position: sticky; top: 50px;と設定。BOX2の上部50ピクセルを保つようにボックス群(親要素のコンテンツ領域)まで移動します。

BOX1
BOX2
BOX3

BOX2にposition: relative; top: 50px; left: 100px;と設定。BOX2の通常の位置から上から50ピクセル左から100ピクセル開けて配置されます。

BOX1
BOX2
BOX3

BOX2にposition: absolute;top: 500px; left: 600px;と設定。このページの左上を起点として上から500ピクセル左から600ピクセル開けて配置されます。

BOX1
BOX2
BOX3

BOX2にposition: fixed; top: 400px; left: 600px;と設定。ブラウザの画面の左上を起点として上から400ピクセル左から600ピクセル開けて配置されます。上のページを起点にしている場合と違ってスクロールしても画面の同じ位置にあります。

BOX1
BOX2
BOX3

z-indexプロパティを使えば要素の重なる順番を変えることができます。値が大きいほど上になります。値をBOX1に1、BOX2に3、BOX3に2と設定すると、このようになります。

cssの基礎の基礎/ボックスモデル/文字の修飾/フレックスボックス/グリッドレイアウト/レスポンシブデザイン/

MDN Web Docs

The World Wide Web Consortium