sponsor

変更する前にバックアップすることをオススメします。

レイアウトの崩れの原因とその対処法

webサイト レイアウト WP CSS
webサイト レイアウト
WP CSS
sponsor

width:25%にして、4列に並べる

ボックスの中にボックスを4つ並べる時、CSSは次のように記載します。

{ width: 25%;
} 

ブラウザで100%で表示していた場合は4列で表示されますが、ブラウザを縮小して表示した場合、崩れてしまう場合があります。

webサイト レイアウト
webサイト レイアウト

4列に表示されています。

sponsor

width:25%で4列に並べたのに、3列で空白がある

webサイト レイアウト
webサイト レイアウト

4列目に空白ができ、3列に表示されています。

sponsor

width:25%で3列のレイアウトを確認する

webサイトのレイアウト
webサイトのレイアウト

boder:1px ですが、レイアウトを確認すると border:1.111 です。

ブラウザを縮小 90%にした場合

  • IEは4列で表示されている
  • Chromeでは3列で表示されている
  • Firefoxでは3列に表示されている

縮小して表示する場合、widthが4(25%)で割れない場合、ChromeやFirefoxでレイアウトが崩れる場合があるようです。拡張(ズーム)や縮小の時には、自動でピクセル値が再計算されます。その計算の方法は、利用しているブラウザによって違うようです。

sponsor

IE・Chrome・Firefoxでレイアウトの実際

IE 100%と90%縮小の border の数値の比較

上部が100%の数値で株が90%縮小の数値です。

  • 100% boder:1px
  • 90%縮小 boder:1px

100%も90%の縮小の場合も、Borderは1pxです。

Chrome 100%と90%縮小の border の数値の比較

上部が100%の数値で株が90%縮小の数値です。

  • 100% border:1px
  • 90%縮小 border 1.111px
webサイト レイアウト
webサイト レイアウト

100%と90%の縮小の場合で、borderの数値が変わっています。

Firefox 100%と90%縮小の border の数値の比較

上部が100%の数値で株が90%縮小の数値です。

  • 100% border:1px
  • 90%縮小 border 1.11667px

100%と90%の縮小の場合で、borderの数値が変わっています。

sponsor

IE・Chrome・Firefoxでレイアウトの比較

.content {
width: calc(25% - 2px);
}

縮小でChromeのborder 1.111px、Firefoxのborder 1.11667px

90%に縮小した時に、Chromeでは1pxのborderは1.111px、Firefoxでは1.11667pxで表示されています。

  • IEは1px
  • Chromeは1.111px
  • Firefoxは1.11667px
width 1349pxを90%にすると、100%は1498.8888・・・となります。   1349/0.9=1498.8888

IE 90%のwidth

width 1349pxを90%にすると、1498.8888・・・

  • width 1498.89px
  • 1498.89の25% – 2px=372.7225

IEは、90%に縮小しても4列になります。

Chrome 90%のwidth

border 1pxは、1.111・・・・pxです。自動的に widlh が算出されます。

1349px × 1.1111111640930176px=1498.88960・・・・(6を繰上げ)

  • width 1498.890px
  • 372.0708px × 4列 +(両端のborder 2.222px × 4列)= 1499.72px

Chromeは90%に縮小すると、1498.890pxに収まらず、3列になります。

Firefox 90% のwidth

border 1pxは、1.11667px  です。自動的に widlh が算出されます。

1349px × 1.11667=1506.38783px

  • width 1506.38px
  • 374.584px × 4列 +(両端のborder 2.233px × 4列)= 1507.2692px

Firefoxは90%に縮小すると、1506.38pxに収まらず、3列になります。

sponsor

IE、Chrome、Firefoxの縮小によるwidth 一覧

width 1349pxを90%にすると、100%は1498.8888・・・となります。

cssの計算式 width:calc(25%-2px)

calcで計算式を指定することができます。横幅を4分割(4列)にして、左右のborderを1pxずつにすると、次のように記載します。

  • width:calc(25%-2px)

boder の値、2pxを引いていますが、ChromeとFirefoxで90%に縮小した場合のborderの値は2pxではありません。

※margin 0px border 1px

ブラウザ 縮小borderwidth:calc(25%-2px)width
IE 100%1335.251349
IE 90%1372.721498.89
Chrome 100%1335.2501349
Chrome 90%1.111372.7081498.890
Firefox 100%1325.251349
Firefox 90%1.11667374.5841506.38

margin 5pxにした場合(margin 5px border 1px)

左右のmargin 5pxと左右のborder 1pxで 25%-12px となります。

ブラウザ 縮小borderwidth:calc(25%-12px)width
IE 100%1335.251349
IE 90%1362.721498.89
Chrome 100%1335.251349
Chrome 90%1.111362.7081498.890
Firefox 100%1335.251349
Firefox 90%1.11667364.5841506.38
sponsor

IE・Chrome・Firefoxでレイアウトが崩れない方法

box-sizing プロパティで指定する

{
box-sizing: border-box;
}

box-sizingプロパティ は、boxの幅(width)や高さ(height)の算出方法を指定します。widthやheightにpaddingやborderの幅と高さを含めるか含めないかを設定できます。

content-boxpaddingとborderの幅と高さを含めない
border-boxpaddingとborderの幅と高さを含む
inherit親要素の値を継承する
sponsor

Chrome box-sizing プロパティで指定した場合の変化

  1. box-sizingプロパティを指定しない場合
  2. box-sizing:content-box
  3. box-sizing:border-box

Chrome 100%の場合のborderとwidth

ブラウザ100%borderwidth:calc(25%-2px)width
1.指定なし1335.2501349
2.content-box1335.2501349
3.border-box1333.2501349

box-sizing:border-box を指定している時、Chrome100%で表示した場合の計算

widthはborderの幅を含みます。

  • 335.250px-2px-333.25px

Chrome 90%に縮小した場合のborderとwidthの変化

ブラウザ90%縮小borderwidth:calc(25%-2px)width
1.Chrome 90%1.111372.7081498.890
2.content-box1.111372.7081498.890
3.border-box1.111370.4861498.890

box-sizing:border-box を指定している時、Chrome 90%で縮小表示した場合の計算

widthはborderの幅を含みます。

  • 372.708px-2.222px=370.486px

90%に縮小しても、1498.890pxに収まり、4列になります。

sponsor

Firefox box-sizing プロパティで指定した場合の変化

  1. box-sizingプロパティを指定しない場合
  2. box-sizing:content-box
  3. box-sizing:border-box

Firefox 100%の場合のborderとwidthの変化

ブラウザ 縮小borderwidth 25%width
Firefox 100%1335.251349
box-sizing:content-box1335.251349
box-sizing:border-box1333.251349

box-sizing:border-box を指定している時、Firefox 100%で表示した場合の計算

widthはborderの幅を含みます。

  • 335.25px-2px(border含む)=333.25px

Firefox 90%に縮小した場合のborderとwidthの変化

ブラウザ 縮小borderwidth 25%width
Firefox 90%1.11667374.5841506.38
box-sizing:content-box1.11667374.5841506.38
box-sizing:border-box1.11667372.351506.38

box-sizing:border-box を指定している時、Firefox 90%で縮小表示した場合の計算

  • borderの1.11667px×2=2.23334px
  • 374.584px-2.23334px(border含む)=372.35066px

90%に縮小しても、1506.38pxに収まり、4列になります。

sponsor

box-sizingプロパティを利用する時の注意点

box-sizing:content-box で指定する時の注意点

例えば横幅、width をパーセントで指定する場合、全体を100%にしますが、border(線)やpaddingの値を考慮すること。子要素の幅が親要素の幅を超えると、レイアウトが崩れてしまいます。

box-sizingの対応プラウザ

Internet Explorer 8以降、Google Chrome、Firefox、Safari バージョン3以降、Opera バージョン8以降。