box-sizingは危険なCSS / レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う

CSS

結論

 状態:-  閲覧数:2,295  投稿日:2015-09-05  更新日:2015-09-05
box-sizing設定変更は、サイト全体に対して甚大な影響を及ぼす
・「理解している人が設定変更する場合」は問題ないが、よく分からない人が設定変更すると、泣きを見るかも
※そのサイトの「box-sizing設定が変更されていることを知らない人」、もしくは「box-sizing自体を知らない人(昨日までの私)」が、取り組むとハマる可能性がある

トラブル遭遇例1 / Bootstrap をアップデートしたら、jQueryで取得される値が変更

 閲覧数:438 投稿日:2015-09-05 更新日:2015-09-05 

Bootstrap 3.3.4


Bootstrap をアップデートしたら、jQuery offsetメソッドで取得される値が変更
・それまで整数で返ってきていた戻り値が、ある日いきなり小数点で返ってくるようになる

原因を特定できない
・ブラウザの問題?
・jQueryの問題?
※原因を想定すら出来ず、苦しむ


犯人はbox-sizing


調査した結果、判明した事実
・bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた
* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}


具体的には、下記組み合わせの場合において取得値が変更される可能性がある
・box-sizing: border-box;
・SVG viewBox
・border
※いや、普通は分からないでしょう、そんなの


box-sizing: border-box;


トラブル遭遇例2 / perspective使用時に、どうしても天地左右中央に配置できない

 閲覧数:448 投稿日:2015-09-05 更新日:2015-09-05 

天地左右中央に配置できない


display: table-cell;指定しているのに位置が微妙にズレる
・もしかして、perspectiveだから?
→ 関係なかった


犯人はbox-sizing


bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた
* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}



対応


初期値で上書き
* {
   box-sizing: content-box;
}

※ライブラリCSSは極力変更しない、という方針に基づき


floating 3D objects using nested transformations (with preserve-3d)


box-sizing をみんな賞賛し過ぎ! そんなに魅力的なプロパティとは思えない。むしろ出来れば使用を避けたい

 閲覧数:360 投稿日:2015-09-05 更新日:2015-09-05 

絶賛の嵐


タイトルだけを読めば、導入すれば全てが解決するようにもとれる
box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
borderもpaddingの数値も気にしなくていい!!cssのbox-sizing


ネット情報に反論


魔法のプロパティではない
・「ボックスサイズの算出方法」を変更する危険(影響度が大き)なCSSプロパティ
・ある一面だけ見れば魔法のように便利な側面があるかもしれないが、それはあくまでも全体の一部分でしかない

borderやpaddingの数値を気にする必要はある
・従来とは計算方法を変更するだけ
・borderやpaddingの概念や数値が、レイアウトの世界から実際に消えてなくなるわけではない
・つまり、裏では、それに伴う処理が発生している
・単純な例では自動で対応する(?)ようだが、複雑な場合(SVG viewBox × border など)は手動で対応する必要が生じてくる

トラブル遭遇例3 / 吹き出し位置がズレる

 閲覧数:409 投稿日:2016-07-11 更新日:2016-07-11 

Bootstrap読込


吹き出し位置がズレる

原因
▼bootstrap.min.css
*, ::after, ::before {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}


対応
・既存CSSを修正することなく、後から読込むことで上書き
/*既存CSS競合対策*/
*, ::after, ::before{
   box-sizing: content-box;
}



aタグのクリック範囲を、囲っているタグ範囲まで拡大する

CSS Transforms Module Level 1



類似度ページランキング
順位 ページタイトル抜粋
1 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 39
2 resizeが効かない場合は、min-heightを設定してみる 38
3 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 33
4 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 30
5 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 30
6 「z-index」が効かない時は「-1」を指定してみる 29
7 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 29
8 Illustrator間で、ベクターデータコピーがどうしても出来ない場合は、Illustrator複数起動を疑う 29
9 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 28
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 28
11 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 28
12 IE8で、フォームの縦位置がどうしても真ん中にこない場合の、最後の手段(案) 28
13 「Fireworks」後継として「Gravit Designer」を使用していくことを一度は決定したが、2022 年時点で入手可能なソフトウェアは日本語入力未対応  28
14 PhotoshopCS3 で、テキストをアウトライン 27
15 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 27
16 CSSで直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。 27
17 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる 26
18 「z-index」が効かない時は? / 「position:relative」を指定してみる / 「z-index:-1」を指定してみる 26
19 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 26
20 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ 26
2023/1/27 9:30 更新
週間人気ページランキング / 1-20 → 1-26
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 44
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 32
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 21
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 18
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
6 GIFアニメーション | 画像 12
6 「bgcolor」「background-color」「background」の違い | CSS 12
7 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 11
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 11
7 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 11
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 9
9 Design 0 9
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 9
9 ICCプロファイル | カラーマネージメント(色) 9
9 RGBの種類 / ビットカラー | RGB(色) 9
10 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 7
11 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード | アイコン(デザイン) 7
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 7
2023/1/27 1:01 更新