コーディングの際に欠かせないのがパーツごとのサイズ調整ですが、
そこで使われる単位は色々ありますね。
どこに何の単位を使ったら良いのという人のために、一覧にしてまとめてみました。
| 単位名 | 使用用途 | 説明 |
|---|---|---|
| px | 文字サイズ、幅、余白等 | いわずとしれた王道単位。 一般的にデザインデータ通りコーディングするなら基本的に単位はpx。 デザインとのズレも少なくなるのでお勧め。 ただレスポンシブ時（スマートフォンサイト）での幅指定でpx使用すると、固定幅になってしまうのであまりお勧めできないかも。 |
| % | 幅、余白等 | こちらもいわずとしれた王道単位。 正しく計算が出来るならこちらの使用もおすすめ。 基本的には「親要素の幅に対して〇％」という指定の仕方になるので注意。 相対値なのでスマホサイトとの相性も良い。 |
| rem | 文字サイズ | ニューカマー（なイメージ）。 ルート要素のフォントサイズに対して文字サイズを可変させられる。 たとえば html 要素に 16px と指定したうえで、 h1 に 2rem と書いたら、 32px のサイズになる。 おすすめは、htmlに「fnt-size: 62.5%」を指定すること。 これによって、photoshopで「18px」が指定されているフォントを「1.8rem」として使用できるので、なんかきれい。 |
| em | 文字サイズ | 親要素の文字サイズに対して相対的に指定する単位。 文字サイズに使用すると書いたものの、私はあまり em での指定はしない… 一文字分幅がとりたいときに幅の単位として使うのはアリだと思っています。 |
| vw | 幅、余白等、文字サイズ | ニューカマー（なイメージ。2回目）。 view width の略で、ブラウザ幅に対していくつの値を取るかを指定できる。 PCサイトで使用するとスクロールバー分も計算に含まれるので注意。 スマホサイトとの相性はバチクソ良い。%と違って「親要素が〇%でその中の〇%だから～」とかしなくて済む。 オシャレなサイトだと文字サイズも vw で指定しているのを見かける。けど私はあまり使用しない。max-font-size とか min-font-sizeみたいなプロパティが出てきたら真価を発揮しそう。 |
| vh | 高さ | view height の略で、ブラウザの高さに対していくつの値を取るかを指定できる。 もっぱら使うのは「ファーストビューを画面いっぱいにしたいぜ！」って時とか 「ハンバーガーメニューが開いた時の高さを画面いっぱいにしたいぜ！」って時くらいな気がする。 |
以上。
あくまで私個人の所感ですが、各単位の使い方はこんな感じ。
vhは使用頻度が少ないから、時々「ここだ！」ってところで使ってカッチリ決まると嬉しいですね。
では！
