基本的に得意としているのはサーバー構築とバックエンドの実装なので
ふわふわ～とした感じで触ってきたフロントエンドの技術でしたが
Java,Scala,C#,Ruby,PHP,Pythonなどバックエンドは
色々やってきましたが、フロントエンドはずーっとJavascript(AltJS含) + CSSなので
今更だけど、よくわかってなかったみたいなところ潰していこうと思い
まずはCSSの単位。
特に気にしないで
pxや%とかやってましたが当然スマートフォンとか考慮すると厄介になってきます。
前述
基本的にはMDN Web Docs CSSの値と単位
の内容を自分用に並べたものになります。
より正確で詳しいものはリンクでお願いします。
あとすべてを列挙するわけではなく、比較的よく利用するもの、僕が理解しておきたいもの
を優先的に書きます。
前提
文章にして書くと当たり前のことなんですが、単位には大きく２種類あります。
それは絶対単位と相対単位
名前の通り
- 前者はそれ単体で長さが決まるもの
- 後者は他要素と比較して長さが決まるもの
絶対単位について
| css | 読み方 | 概要 | CSSで使ったことあるか |
|---|---|---|---|
| cm | センチ | 日本人におなじみ。定規でみてね。メートル法 | no |
| in | インチ | アメリカでおなじみ。2.54cm。ヤード・ポンド法 | no |
| mm | ミリメートル | 1/10cm | no |
| pt | ポイント | 出版でよく使われる単位らしい。1/72in | no |
| pc | パイカ | 12pt相当らしい。はじめて聞いた | no |
| q | クォータ | 1/4mm | no |
| px | ピクセル | これは馴染みの単位。ディスプレイの1px | yes |
相対単位について
| css | 読み方 | 概要 | CSSで使ったことあるか |
|---|---|---|---|
| em | em | 親要素のフォントサイズ | yes |
| ex | ex | 自要素のフォントxの高さ(x-height) |
no |
| ch | ch | 自要素のフォントの0の幅 |
no |
| rem | rem | ルート要素(<html>)のフォントサイズ |
no |
| vw | vw | ビューポートの幅の1/100 | no |
| vh | vh | ビューポートの高さの1/100 | no |
| vmin | vmin | ビューポートの短い辺の1/100 | yes |
| vmax | vmax | ビューポートの長い辺の1/100 | yes |
| % | % | 親要素に対しての割合 | yes |
それぞれのわかりやすい説明とサンプルはこちら
が参考になりました。
ビューポートとは
参考 ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
ウェブブラウザからユーザーインターフェイス、メニューバー等を除いた部分。
左のスクロールバーはビューポートの幅に含まれることに注意です。
その他
あとここでは内容は省きますがMDN Web Docs色々眺めてたらCSSにデータ型というのが
ちゃんと定義されてるのに驚いた。
あとがき
このテーマ、リストとテーブルが見づらいなぁ。。。
あとこの本最近読み始めてて、疑問に思ったところはまたブログ書きたいと思ってます。
