cssで中央ぞろえしたboxを左へ200pxずらしてみた

2025年6月17日

近年HTML5、CSS3によりweb構築技術が急速に発達しています。
そのため、一昔前ならば実現が非常に困難だったことも今では容易にできてしまいます。

そんな中、こんなコーディングをすることがありました。
400pxのボックスを、中央位置から左へ200pxずらすというものです。
右側半分に画像を設置し、テキストは左側に配置するためです。

一見簡単そうに思えますが、以下の課題をクリアしないといけません。

• 起点が中央なので、margin-left、margin-rightはautoにしておく必要があり、微調整にmarginは使えない
• 左端または右端を起点にすると画面サイズによって位置が中央でなくなる
• absoluteを使用すると中央位置を起点にできなくなる

どうやれば実現できるのか考えてやってみました。

まずはできたものがこちら

まずは中央から左右にずらせたものがこちらです。

ボックスを中央位置から左右にずらすことができました。
いったいどうやって実現できたのでしょうか?

relativeをうまく使うと実現できます。

ボックスの中央揃えは、左右のmarginをautoにすることで実現しています。
ただmargin指定がふさがった状態になるため、左へずらす、右へずらすはrelativeを使用して実現しています。

具体的には以下のように記述します。

ボックスの中央揃えのみの場合のソース

ボックスの横幅を指定し、左右のマージンをautoにすれば、中央揃えになります。

relativeを使用してボックスを左へずらす場合のソース

たった２行追加するだけで、中央位置から指定ピクセル分左へずらすことができました。
ここで疑問がわきました。

absoluteで同じ記述をした場合は、画面の左端に配置されるのに、relativeだとなぜ中央位置を起点に配置できるのだろう？

疑問に思ったので調べてみました。

absoluteはrelativeを指定された親タグを起点に配置される

absoluteはレイアウトを無視して配置できる指定です。
ですがfixedと異なり、起点がrelative指定された親要素からになります。

つまり、absoluteの場合800px中央揃えの親ボックスを作成し、absolute left 0pxを指定すれば似たようなレイアウトになります。

absoluteを指定したタグ自身が起点にならないため、左右のmargin autoが有効にならないため、中央位置からのレイアウトが難しいのです。

relative指定は自身を起点に配置ができる

それに対しrelative指定は、relative指定したタグ自身を起点にできます。
左右のmargin autoが有効になります。
さらに、left:、right:といった指定も使うことができます。

そのため、中央を起点としたレイアウトができるのです。

relativeは、absoluteを使用する場合の外枠のイメージでしたが、単体でも有能な指定であることがわかりました。

webコーディングは細分化・複雑化しているため、特性を知ることが重要です。

一昔前であれば、中央起点でのレイアウトは「力技」でした。
力技でやるしか方法がなかったためです。

ですが、HTML5、css3になってから、レスポンシブ対応が標準になりました。
ホームページはレイアウトが絶対に変わらないものから、画面サイズに合わせて柔軟に変形するものに変わったたのです。

変形を前提とするwebは、とても複雑怪奇です。
だからこそ、丸暗記でなく特性を知ることが重要です。

例えば目的のスタイルシート記述をググって調べ、コピーペーストすればそれなりに動作はします。
ですが、次回同じことをやろうとすると、理屈がわからないためまた同じことを調べる羽目になります。

横並びを縦並びに可変させる場合の指定。
３列レイアウトを１列レイアウトに変形する場合の指定。

などどういった指定が、どんな動きをするのかを知っていれば、おのずとコーディングがはかどります。
そしてそれが、自身の能力となるのです。

---

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。

関連記事