最近、個人的に鉄拳7のファンサイトを作り始めた@mikedaです。
↑を作り始めて迷っていることの1つに「CSSのbox-sizingをデフォルトでborder-boxにするかどうか」というのがあります。
※box-sizingについてはこのあたりを参照
個人的にはborderやpaddingつけた時にそれを考慮してサイズを計算したり、なんかデカくなった・ハミだしたみたいな事が起こりづらいので、デフォルトでborder-boxのほうが楽かなぁと思っているのですが、リスタで運用しているサービスでもサービスによって違っていたりします。
そこで、他のサービスではどうなっているんだろうということが気になったので、軽く調べてみました。
WEBサイト (5/21)
| デフォルトでborder-box | |
|---|---|
| Netflix | |
| Cookpad | |
| 食べログ | |
| Mery | |
| minne | ○ |
| メルカリ | ○ |
| アメーバブログ | |
| AbemaTV | |
| freee | |
| speee | |
| マネーフォワード | ○ |
| note | |
| BASE | |
| ホームズ | |
| SUUMO | |
| タウンワーク | |
| Wantedly | |
| hey.com | ○ |
| hey.jp | ○ |
CSSフレームワーク (1/5)
| デフォルトでborder-box | |
|---|---|
| Bulma | |
| Bootstrap | ○ |
| Uikit | |
| Semantic UI | |
| Materialize |
書籍 (1/2)
| デフォルトでborder-box | |
|---|---|
| CSS設計完全ガイド ~詳細解説+実践的モジュール集 | |
| HTML5/CSS3モダンコーディング | ○ |
まとめ
CSSを書いたり勉強したりし始めた時にHTML5/CSS3モダンコーディングやBootstrapを参考にしていたので、『デフォルトでborder-box』はけっこう一般的なのかと思っていましたが、そうでもなかったです。
※ Chrome Developer Toolsで軽く見た程度なので、間違えているものがあれば教えて下さい！
メルカリやminneなど、新し目のサービスではけっこう多そうなので、今後増えていくのでしょうか。
後で変えるのがけっこう大変なので自分なりの判断基準をもって統一していきたいですが、CSS設計の理解が浅いので、うーむ 🤔
