アイコンWeb制作実験

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

floatで段組:可変幅(%指定)+可変幅(%指定)

イメージ

公開:2015-03-11

更新:

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

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

基本形

2つのBox共にfloatをし、それぞれwidth:○%で幅指定します。ここではboxA:30%、boxB:70%とします。

floatの%で幅可変2段組

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

.boxB	{
  border:10px solid blue;
  width:70%;
  box-sizing:border-box;
  float:left;
}

width指定だけではborderの幅を含まず、全体の幅は30%+70%+border分(10px x 4本分)で100%を超えてしまいます。そこでbox-sizing:border-boxborderを含めた割合にしてあります。borderpaddingがない場合はbox-sizing:border-boxの行はいりません。

PCでウィンドウの横幅を変化させると、それに応じてそれぞれのboxの幅の率に応じて伸縮しました。

floatの%で2段組の幅変化

実際の様子

「基本形」の実験

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

最大幅と最小幅を指定

HTMLはそのままで、CSSのみboxAにmax-widthmin-widthを追加します。

.boxA	{
  border:10px solid red;
  width:30%;
  box-sizing:border-box;
  max-width:200px;
  min-width:150px;
  float:left;
}

float2段組片側の最大幅と最小幅

PCでウィンドウの横幅を変化させるとboxAは

  • 200pxより広がらなく
  • 150pxより狭まらなく

なりました。

また、幅を狭めていくとboxBがboxAの下に落ちました。これは

  • PCなど広い画面では横並びに
  • スマホなど狭い画面では縦並びに

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

%指定+%指定のまとめ

サイトの構成によってはシンプルでいいでしょう。

片側をメニューにする場合

  • 幅が狭い際にメニュー項目が折り返し(2行)になりかねなく、幅と見た目を考慮する必要があります。
  • メニューは一般的に固定幅の方が見やすいと思われます。
  • 広告にする場合多くは幅固定のため、広げた際に余白ができたり、狭めた場合にスクロールバーが出たりします。

min-widthを広告幅以上にするか、下記記事の「固定幅+可変幅」にするといいです。