ウェブ制作

要素を中央基準で配置する

中央基準で配置（コピペ用）

それではまず実例から。

<div class="container">
　　<div class="box01">box01</div>
　　<div class="box02">box02</div>
</div>
.container {
  position: relative;
}
.box01 {
  background-color: #000;
  color: #fff;
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 100px);
  transform: translateX(-50%);
  top: 50px;
}
.box02 {
  background-color: #000;
  color: #fff;
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% + 100px);
  transform: translateX(-50%);
  top: 50px;
}

表示例はこちらです。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

右上のCODEPENのロゴマークをクリックすると別画面で大きく見えます。

HTMLの解説

それでは解説していきます。

<div class="container">
　　<div class="box01">box01</div>
　　<div class="box02">box02</div>
</div>

box01クラスとbox02クラスをつけたdivをcontainerクラスをつけたdivで囲っています。

containerクラスをつけたdivで囲っているのは絶対配置の際の基準とするためです。

CSSの解説

.container {
  position: relative;
}
.box01 {
  background-color: #000;
  color: #fff;
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 100px);
  transform: translateX(-50%);
  top: 50px;
}
.box02 {
  background-color: #000;
  color: #fff;
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% + 100px);
  transform: translateX(-50%);
  top: 50px;
}

絶対配置の説明については割愛します。

今回重要な部分の１つ目はleft: calc(50% - 100px);です。これを分解して考えていきます。

left:50%;という指定をした場合は、containerクラスの左端から50%の位置に.box〇〇クラスをつけたdivの左側面が位置します。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

ここでcalc関数を使用します。left: calc(50% - 100px);このようにすることで、左端から50%の位置にある要素を左側に100px戻すような動きになり、中央基準を実現しています。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

calc関数は数値を指定する場面(widthやheightなど)で使用でき、計算をすることができます。特に便利な点として、色々な単位を混ぜても機能する点が挙げられます。

さた、ここまででも十分に機能するコードになっていますが、実務では2つの要素を左右対称で配置する事も多いです。

その時にコードのまま左右対称に要素を配置するには以下の様なコードになります。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

これだとcalc関数内で50%からマイナスする数字とプラスする数字が異なってしまいわかりにくいです。

そこでtransform: translateX(-50%) ;を使用します。そうする事でleft:50%;の段階でbox〇〇は画面の真ん中に位置するようになります。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

そうする事で、左右対称に要素を配置する時に同じ数値をマイナス・プラスすれば良くなります。

See the Pen Untitled by Makoto Kokubo (@Kokumako) on CodePen.

-ウェブ制作