coding tips

posted：2014.07.15

[html] ボックスの位置を座標のように設定

ボックスの位置を座標のように設定する方法を紹介します。

サンプルをダウンロード
from GitHub

ボックス位置指定と親子関係

座標と言ってますが、厳密には親となるボックスの枠からの距離を数値指定する方法です。

親ボックスの四辺それぞれからの距離を指定し、子ボックスの位置を制御します。

図1.では水色（skyblue）のボックスが親となり、この四辺を基準にして、子要素の赤（red）、および緑（green）のボックス位置を指定しています。

ボックス位置の絶対指定
図1. ボックス位置の絶対指定

まずはhtmlについてですが、divなどのブロックレベル要素を入れ子にします。outerが親ボックス、inner01、inner02が子ボックスになります。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>sample position</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="outer">
  <div id="inner01">inner01</div>
  <div id="inner02">inner02</div>
</div>
</body>
</html>

cssについては、親要素に明示的なサイズの指定（height、width）を指定し、positionにrelativeを指定します。これで、親のボックスが基準となる準備ができました。

子ボックスについてはpositionにabsoluteを指定します。これにより四辺からの距離を入力することでボックスが移動するようになります。

親の四辺からの距離はそれぞれ、top(上)、right（右）、bottom（下）、left（左）の属性の中から必要なものを抽出し、距離を数値で入力すれば、縦横の位置を調整することができます。

レイアウトによって変わるかと思いますが、特に問題がなければtop、leftからの距離をセットにして指定すればよいでしょう。

@charset "UTF-8";

#outer{
  background-color: skyblue;
  width: 500px;
  height: 300px;
  position: relative;
}

#inner01 {
  background-color: red;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 50px;
  top: 100px;
}

#inner02 {
  background-color: green;
  width: 100px;
  height: 50px;
  position: absolute;
  right: 50px;
  bottom: 100px;
}
動作確認環境