CSS box-sizingは、リセット用のCSSに書いておくと使いやすい。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
box-sizing: border-box;があちこちに記載されている。
良さげなデザインのサイトのコードを参考にしたり、Webサイトのコーディングの添削をしたりする際に、意外と遭遇するのが「box-sizing: border-box;」が指定されているCSSファイル。
box-sizingとは？
box-sizingはCSS3で登場したプロパティで、初期値は「content-box」となっている。
widthやheightで形成したボックスにborderとpaddingの値を含めるかどうかを指定できるが、これはCSS2の名残りのようなものであり、実際には「box-sizing: content-box;」を使う頻度はかなり少ない。ほぼないと言ってもいいほどだ。
ところが結構、コードのあちらこちらに「box-sizing: content-box;」を上書きするように、「box-sizing: border-box;」の指定が見られる。
であれば、リセットCSSに追記すれば良いのだ。
Reset CSS
リセット用のCSSは、おそらくはネットで検索して出てきたものをそのままコピペしていると思われる。
元々はEric A. Meyer（エリック・A・メイヤー）氏のリセットCSSが有名だった（Webの学習用書籍にも載っていた）ので、今でもそのまま使われているのかもしれない。
エリック・A・メイヤーさんは、だれでも無料で自由に使えるように、パブリック・ドメインでReset CSSのコードを配布しており、世界中に広がっている。
ただし、これはかなり以前のものであり、CSS3が普及する前のコードである。当然「box-sizing」の記述はない。無料でありがたいのだが、WordPressやJohn Resig（ジョン・レシグ）氏のjQueryなどと違い、かなり前、2011年を最後にアップデートがされていない。
ブラウザ独自のCSSをリセットするという概念として学んでおくべきもので、そのままのコードをそのままで使えるものではなくなっている。
box-sizing: border-box;はリセット用のCSSに追記した方が使いやすい。
ブラウザのデフォルトCSSをリセットするため、もしくはそれに近い用途のCSSはいくつかある。特別最近のことではなく、10年ほど前からあった。
なので「box-sizing」が含まれていないものもある。
どれを使うかは個人の使い勝手によって選べば良いと思う。
その中にちょっと追加で「box-sizing: border-box;」を記載すると手間もコードも省け、汎用性があり便利で使いやすくなる。
例えば、下記のようにmarginやpaddingなどと一緒に追記しておくと、使い回しがきく。
例）
a, article, aside, button, dd, div, dl, dt, fieldset, footer, h1, h2, h3, h4, h5, h6, header, input, label, li, main, nav, ol, p, section, select, small, span, table, td, textarea, th, tr, ul {
box-sizing: border-box;
margin: 0;
padding: 0;
word-wrap: break-word
}
（※全称セレクタ、ユニバーサルセレクタを使う方法もあるがあまり推奨できない。）
と、にゃんこも考えている。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
