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

CSS

結論

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

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

 閲覧数:632 投稿日: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使用時に、どうしても天地左右中央に配置できない

 閲覧数:645 投稿日: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 をみんな賞賛し過ぎ! そんなに魅力的なプロパティとは思えない。むしろ出来れば使用を避けたい

 閲覧数:551 投稿日: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 / 吹き出し位置がズレる

 閲覧数:634 投稿日: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 box-sizingは危険なCSS / レイアウトや位置がどうしても意図した通り設定できない場合は、box-sizingを疑う 73
2 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 39
3 resizeが効かない場合は、min-heightを設定してみる 38
4 作成した素材がどうしても見つからないときは、「png形式」を疑ってみる 33
5 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 30
6 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 30
7 「z-index」が効かない時は「-1」を指定してみる 29
8 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 29
9 Illustrator間で、ベクターデータコピーがどうしても出来ない場合は、Illustrator複数起動を疑う 29
10 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 28
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 28
12 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う 28
13 IE8で、フォームの縦位置がどうしても真ん中にこない場合の、最後の手段(案) 28
14 「Fireworks」後継として「Gravit Designer」を使用していくことを一度は決定したが、2022 年時点で入手可能なソフトウェアは日本語入力未対応  28
15 PhotoshopCS3 で、テキストをアウトライン 27
16 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 27
17 CSSで直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。 27
18 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる 26
19 「z-index」が効かない時は? / 「position:relative」を指定してみる / 「z-index:-1」を指定してみる 26
20 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 26
2024/10/10 16:04 更新
週間人気ページランキング / 10-3 → 10-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 43
2 RGB ⇔ Lab | 色変換(色) 20
3 鉄道会社毎のカラーコード | カラーコード(色) 15
4 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 7
5 16進数カラーコード / 2進数 7
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
8 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 4
8 RGBの種類 / ビットカラー | RGB(色) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
8 「bgcolor」「background-color」「background」の違い | CSS 4
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 4
9 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 3
9 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 8ビットカラー / インデックスカラー / パレットカラー 3
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
2024/10/10 1:01 更新