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で定義しているのがミソ。
remでフォントサイズを指定
h1{ font-size: 4.0rem; }
rem = root + em。ルート(html{}で定義したフォントサイズを基準としたサイズ指定。この場合40px。
remでフォントサイズを指定

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

div{ box-sizing: border-box; }
border-boxをしていすればpaddingを設定してもwidthに設定した長さになる。
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

鹿児島県の出水市という所に住んでいまして、インターネット周辺で色々活動して行きたいと思ってるところです。 Webサイト作ったり、サーバ設定したり、プログラムしたりしている、釣りと木工好きなMacユーザです。 今はデータサイエンスに興味を持って競馬AI予想を頑張ってます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください