[CSS] 幅とか高さとかを簡単に調整したい

2014/11/16

こんにちは。きんくまです。

細かく幅とか高さを調整したいときに、divやらspanをそのためだけに入れ子にしていたんだけど、
調べてたら最近はそんなことしなくても良いんですね。

>> cssで計算ができる calc()

>> CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

calcとbox-sizingについて、念のため使えるか調べてみたところ、だいぶ良さそう。

>> calc | Can I use

Box Sizing | Can I Use

たぶん他にも便利だけど見落としてるCSSのプロパティがあると思うので、調べてみようかな。

記事にもあるけど、box-sizing:border-box; が以前のIEだとデフォルトだったことを思い出した。
たしかあの頃ってTable LayoutからCSS Layoutへの移行期で、IEだけが他と解釈が違ってて、バグ扱いだったんだよね。
でも時間がたってそのバグ扱いだったものが、新たにbox-sizing:border-box;としてわざわざ作られたってことは、開発者的には前の解釈の方が作りやすかったってことかもしんない。

この手のプロパティって、知ったときに「これは便利!」となっても、ブラウザの対応状況がイマイチだったりして実際には使えなかったりすることが以前はよくあって、でも最近は状況がだいぶかわってきてるんだなーと思いました。

※追記
ちょうど良記事がコリスさんで紹介されてました。CSSまわりは最近すごいんだなー。しかもブラウザ対応もかなり良くなってるし。なるほどー。
>> [CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ | コリス

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る