HTML5+CSS3ってホントに最強ですね。
JSを組み合わせれば、フロントエンドでできない事ないんじゃないかってぐらい何でもできてしまいます。
色々な人からWEBページを作って欲しいという依頼を受けますが、基本的にホームページ制作は「wordpress」で行い、特殊なサービスやシステム構築は、弊社専用フレームワーク「MYNT-studio」を使うようにしています。
MYNT-studioというのは、以前にブログでも書いた、僕が会社設立した当初に便利にかつスピーディーにインターネットサイトを構築できるフレームワークを自分専用ライブラリとして作っておいたシステムですが、世の中に大量に出回っているフレームワークを使って都度学習コストをかけるよりも、自分でライブラリも含めて手がけて言ったり、部分的にOSSライブラリを導入した自分専用フレームワークの方がはるかに効率が良いのです。
そんな自分フレームワークのHTML基本構造を作っているときに、どういう構成にしようか悩んでいたときにこれまで使っていなかった「box-sizing」を使って見たら、これが便利で仕方がなかったという話です。
HTMLフレームの歴史
今現在HTMLはバージョン5になっていて、かなりアプリケーションとして成り立つほどのクオリティになっていますが、もともとHTMLは単なる文章表示用の言語で、今でいうmdレベルの言語でした。
その当時のWEBサイトのフレーム構成は、tableタグで行うか、frameタグを使った構成がほとんど。
当時から「角丸」という概念は強くあり、枠線を画像で作ってそれをタイリングして縦線、横線などを作り出し、角部分をtableでセル分割して、丸めた画像を配置してレンダリングしたときに角丸表現していた事を思い出します。
border-radiusで、一瞬でできてしまう角丸も一昔前は相当な手間をかけて作っていたのですが、手間がかかる上、サイズ変更も一筋縄でできないというデメリットさ、CSS3の恩恵はとても素晴らしい事です。
そして、現在では、divタグをclass名で要素付けして、役割をcssで振り分ける構成が主流で、jsもそのclass名を元に挙動を操作するのが今時なようです。
class名やid名などをきちんと管理する事でサイトの改修も容易に行えたり、レスポンシブデザインなどの流用がかなり簡易に行えるのがメリットですね。
そうはいっても、HTMLの表示構成というのは、昔からさほど変わっておらず、「ヘッダ」「メニュー」「サイド」「コンテンツ」「フッタ」という部分的なパーツは、今現在も健在で、その配置場所なども、セオリー通りのサイトがほとんどです。
もちろんABテストなどでちゃんと計算されてこの構成が変更されないのは、きっと今後も変更されない鉄壁な要素だからなのかもしれませんね。
box-sizingは全エレメントに適用すべし
ページデザインをしている時はさほど気にしなくていいのですが、それをコーディングする際にmargin,padding,borderというそれぞれの要素のサイズに影響してしまうこれまでの厄介ごとを「box-sizing」を設定する事で、エレメントのサイズに対してmargin,padding,borderの値を差し引いて調整してくれるという便利機能でした。
そもそも、marginは、エレメントの外側に影響するため、そんなにサイズ依存しなくてもいいのですが、paddingとborderに関しては、本来box-sizingを適用させた状態が通常であって欲しいと考えるのは僕だけでしょうか？
これまでは、エレメントのborderで１ピクセルセットしているために、calc(100% - 1px)とかの記述をしていましたが、そんな必要なくなるって事ですね。
そして、この便利な「box-sizing」は、全ての要素に適用していた方がより効率的にコーディングできるので、下記のようにcssに書いておくのがいいという事もわかりました。
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
before,afterの擬似要素にも適用されて、ベンダープレフィックスもバッチリ、これは、記述必須ですね。
そういえば、bootstrapなどで、どの要素にもbox-sizingが適用されている事にデバッグコンソールを見て気がつきましたが、そもそも定石だったのか・・・orz
