CSS box-sizingは、リセット用のCSSに書いておくと使いやすい。デザイナー、コーチ、ディレクター / 井川

igawa design.

Memo

CSSのbox-sizingは、リセット用のCSSに書いておいた方が楽で良い。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

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に追記すれば良いのだ。

CSSのbox-sizingは、リセット用のCSSに書いておいた方が楽で良い。

Reset CSS

リセット用のCSSは、おそらくはネットで検索して出てきたものをそのままコピペしていると思われる。

元々はEric A. Meyer(エリック・A・メイヤー)氏のリセットCSSが有名だった(Webの学習用書籍にも載っていた)ので、今でもそのまま使われているのかもしれない。

エリック・A・メイヤーさんは、だれでも無料で自由に使えるように、パブリック・ドメインでReset CSSのコードを配布しており、世界中に広がっている。

参考:CSS Tools: 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
}

(※全称セレクタ、ユニバーサルセレクタを使う方法もあるがあまり推奨できない。)

と、にゃんこも考えている。

CSSのbox-sizingは、リセット用のCSSに書いておいた方が楽で良い。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。