アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

floatで段組:固定幅(px指定)+可変幅(幅指定なし)

イメージ

公開:2015-03-11

更新:

CSSのfloatプロパティを使って2段組みレイアウトを作ります。固定幅(px指定)+可変幅(幅指定なし)の組み合わせでの実際の動作の様子です。

レスポンシブデザインの基本となります。

基本形(回り込み)

2つのboxを用意し、boxAのみにwidthで幅を固定、floatを指定します。

<div class="boxA">
			(内容)
</div>
<div class="boxB">
			(内容)
</div>
.boxA	{
  border: 10px solid red;
  width: 100px;
  float: left;
}

.boxB	{
  border: 10px solid blue;
}

PCでウィンドウの横幅を変化させると、boxAは幅固定のままで、boxBは幅と高さが伸縮しました。

floatの固定+可変

また、boxBの内容(Bの文字)がboxAを避けるように回り込みしています。

floatで回り込み

  • 各boxの中の内容は<P>タグで適当に文字を入れています。
  • 見やすくするためにCSSは上記以外に多少の装飾をしています。
  • HTMLとCSSで上記以外にfloat(段組み)の解除処理をしています。ここでは説明を省きますが詳しくはこちら→ floatの解除。)

overflow:hiddenで2段組

boxBにoverflow:hiddenを指定してみます。

.boxB	{
  border: 10px solid blue;
  overflow: hidden;
}

floatの固定+可変で2段組(overflow:hidden)

boxBの文字はboxAに下にこなくなり、左右に分割しました。

margin-leftで2段組

上記のoverflow:hiddenの替わりにmargin-leftを指定してみます。値は

  • boxAの幅(width)=100px
  • 枠線border左右分=10 x 2 = 20px

を足した120pxです。

.boxB	{
  border: 10px solid blue;
  margin-left: 120px;
}

これでも上記のoverflow:hiddenの場合と同じ結果となりました。

固定幅+可変幅のまとめ

少しややこしいので表にしてみました。

boxA(左=赤)B(右=青)
float有り無し
幅指定px指定(固定幅)無し(可変幅)

回り込み

画像の周りに説明文などにいいです。

左右に分けた以下は共に段組みとして、片側にメニュー・もう片側にコンテンツで、画面幅に合わせて折り返したい場合に使われます。

overflow:hidden

  • 固定側の横幅があらかじめわからなくても可能。
  • 中の要素が大きくても横スクロールバーが出なくなる。(※)

margin-left

  • 固定側の横幅があらかじめわかっている場合に限られる。
  • 横スクロールバーの制御は別途overflowの指定で可能。(※)

という使い方が向いているようです。

※はこの記事では触れませんが、いずれ機会があれば別の記事で書いてみたいと思います。