font-size:62.5%とrem、box-sizingについて

久々にWeb作ったり、修正したりしてるんですが、やってたのはCSS3が出てきたばっかりの時の話で、ブラウザごとのプレフィックスを付けたりが必要だったんじゃないかと記憶してます。
IEに対応するだけでも一苦労だったのに、その他のブラウザまで・・・となるとあまり積極的に使おうとは思ってませんでした。

でもコーディングするときはやっぱり便利、画像とかに頼らなくても良いし。

ちょっと修正したいWebサイトやブログのデザインもCSS3を使ったりして変えてみようかな、という今日この頃です。

もうHTML5.1やCSS4も習得していかなきゃいけない時なのかもしれませんが、まずはHTML5、CSS3から再び頑張ってみます。

今日学んだこと

62.5%とremは積極的に使っていこう。

html { font-size: 62.5%; }

62.5%はフォントサイズを10pxに定義ことらしい。htmlで定義しているのがミソ。

h1{ font-size: 4.0rem; }

rem = root + em。ルート(html{}で定義したフォントサイズを基準としたサイズ指定。この場合40px。

paddingを設定するときにwidthが広がってしまうのは仕様なんですが、でもこれは何とかならないものかと思ってました。
でもCSS3ではbox-sizingを使えば便利な設定ができます。

div{ box-sizing: border-box; }

border-boxをしていすればpaddingを設定してもwidthに設定した長さになる。