こんにちは朱夏です。
今回は、CSSでサイズを指定するときの単位も使い方について書いていこうと思います。
朱夏
サイズを指定する単位がいっぱいあってどれを使えばいいのか解らない。
それぞれの単位にどんな意味があるのかな？
良く使われる単位や、種類についても紹介していきます。
[もくじ]
良く使われる単位
相対単位と絶対単位
あとがき
良く使われる単位
相対単位と絶対単位
あとがき
良く使われる単位
良く使われる単位を紹介します。
- px：絶対単位。縦、横の長さをピクセル単位で指定します。
- %：相対単位。親要素に対する割合で指定します。親要素は対象によって変化します。
- vh：相対単位。画面サイズの高さに対する割合で指定します。
- vw：相対単位。画面サイズの横幅に対する割合で指定します。
- rem：相対単位。HTMLのフォントサイズを基準に、割合で指定します。
他にも複数の単位がありますが、他のサイトでも見かけるのは殆どが上記の単位ばかりです。
今後、web作成の仕事などをしていくつもりなら、先人に倣って同じ単位を使っておくのが良いと思います。
相対単位と絶対単位
サイズを指定する単位には、相対単位と絶対単位というのが存在します。
相対単位
相対単位は、ブラウザのサイズや親要素のサイズなど、基準となるサイズに対する割合で指定される単位です。
相対単位には以下の様な特徴があります。
- 基準値に依存
- 可変するサイズに合わせてサイズが変わる
- 基準値がどれか把握する必要がある
レスポンシブ対応など、複数のスマホなどでサイズの自動調整をしたいときなどは相対単位を使うと良いです。
絶対単位
絶対単位は、10pxや1cmなど、固定されたサイズを指定する時に使用します。
絶対単位の特徴は以下です。
- 他に影響されない独立した指定ができる
- ブラウザからはみ出したサイズでもそのまま表示される
- 位置やサイズを固定したいときに使える
絶対単位は、marginなどに使う事が多いですね。
あとがき
というわけで、サイズを指定する時に使う単位について書いてみました。
今回のまとめはこちら。
- 絶対単位は固定したいときに使う
- 相対単位は親要素や画面サイズなどに依存
指定できる単位は他にも色々ありますが、よく使われている単位は今回紹介したものがほとんどです。
状況によって単位を使い分ければ、表示の崩れなどに強いページが作れるようになると思います。
今回は以上です。
次回もよろしくお願いします。
