CSSデザイン比較その2 - float/position - 頭の中は異空間

頭の中は異空間

ものづくり中心

CSSデザイン比較その2 - float/position

CSS HTML
f:id:notwo:20161103183054p:plain

引き続きCSSの比較。今回はちょっと変わって、要素の左右寄せの話。

有名なサイトでChromeで要素を検証、とかするとよくfloat: leftとかclear: bothとか目にすると思います。

floatは画像の左右にテキスト回り込みをさせたり、サイドバーを配置するのに使えますね。

 

しかしfloatなしでも似たような配置が出来ますよってことでposition: absoluteを活用した例を載せます。positionとfloatの比較って感じですかね。

 

表示結果

left
right
clear

no float

left
right

 

code

HTML

<body>
  <b>before left</b>
  <div class="left">
    left
  </div>
  <b>after left</b>
  <div class="right">
    right
  </div>
  <b>after right</b>
  <div class="clear">clear</div>
  <b>after clear</b>
  <hr />
  <h1>no float</h1>
  <div class="relative">
    <div class="absolute_left">
      left
    </div>
    <div class="absolute_right">
      right
    </div>
  </div>
</body>

 

CSS

.left {
  float: left;
  width: 200px;
  height: 30px;
  background: rgb(200, 100, 50);
}
.right {
  float: right;
  width: 200px;
  height: 30px;
  background: rgb(100, 50, 200);
}
.clear {
  display: block;
  clear: both;
}
.relative {
  position: relative;
}
.absolute_left {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 200px;
  height: 30px;
  background: rgb(200, 100, 50);
}
.absolute_right {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  height: 30px;
  background: rgb(100, 50, 200);
}

と、このようにfloatで左右に寄せてclearして、といった表示崩れの置きやすい方法を用いなくても回り込みは可能ですよ、という話でした。

回り込みというより単に左側に画像、その右側にテキスト、などしたい場合はdl, dd, dtを用いて並べることも可能です。見た目的にはそちらのほうが綺麗にできることが多い。

 

総括

positionを用いたやり方のfloatでやる場合に比べてのメリットは、例えばサイドバー等で予めwidth指定されてメイン要素が入り込めない位置にもright, leftをネガティブ(-値を指定)にすれば好きに配置出来る点です(position: absoluteなんだから当たり前か)。

どちらもBOXモデルを理解していないと使いこなせないのは一緒で、バグの温床になりやすいので多用するのではなく、ここぞというときにだけ使うのが良いです。