【CSS】CSSで取り扱う単位について
目次
はじめに
今回はCSSで取り扱う「単位」について見ていきます。CSSでは、プロパティに対して値を設定することでスタイリングを作っていきますが、その値に「単位」が必要なものになります。例えば、「width」だったら「500px」という風に。この単位にも色々な種類があり、状況に応じて使い分けていく必要があります。
px -ピクセル-
まずは「px（ピクセル）」から。一番シンプルでわかりやすい指定方法になります。文字サイズや幅/高さ、余白に位置指定など、あらゆる場面で使われます。
.test {
position: relative;
top: 20px;
font-size: 14px;
width: 300px;
margin: 20px;
}% -パーセント-
親要素を基準とした相対値です。レスポンシブ対応に便利で、幅や高さ、余白や位置指定で使用することが多いです。例えば親要素の幅が「600px」だとしてその子要素に「50%」と記述すると、「600 × 0.5 = 300px」という形になります。
.test {
position: relative;
width: 1000px;
}
.test div {
position: absolute;
top: 40%;
left: 20%;
width: 50%;
}rem -レム-
「rem（レム）」はhtml要素の値を基準とした相対値で、フォントサイズで使用されることが多いです。例えばhtmlで「10px」と指定されている状態で、任意の要素に「1.6rem」と指定すると「10 × 1.6 = 16px」という形になります。html要素の値を変えてしまえば、remで指定されているサイズを一括で変更することができるので、とても便利です。
html {
font-size: 10px;
}
.test {
font-size: 1.8rem
}em -エム-
「em（エム）」は親要素を基準とした相対値になります。親要素のfont-sizeが「10px」だったとして、その子要素に「2em」と指定すると、「10 * 2 = 20px」という形になります。入れ子が複雑になっていくと計算もややこしくなるので、注意が必要です。
.test {
font-size: 10px;
}
.test p {
font-size: 2em;
}vw
「vw」はビューポート（ブラウザ）の幅を基準とした相対値で、幅や高さ、余白、文字サイズに用いられることがあります。%・rem・emと違い、親要素など他の要素と紐づけられることはありません。例えば「width: 100vw;」と指定すると、その要素は画面いっぱいに幅を取ります。
.test {
width: 100vw;
margin-top: 12vw;
font-size: 10vw;
}vh
「vh」はビューポート（ブラウザ）の高さを基準とした相対値になります。例えば「height: 100vw;」と指定すると、その要素は画面いっぱいに高さを取ります。
.test {
height: 100vh;
padding: 14vh;
}ケース01：emをline-heightで使用
例えば、「font-size: 10px;」「line-height: 2em;」と設定すると、行送りが「10 × 2 = 20px」となります。文字サイズを変更しても、常に2行分の行送りを作ることが可能です。
.test {
font-size: 16px;
line-height: 2em;
}
ケース02：vw/vhでモーダルを全画面表示
「position: fixed;」と「width: 100vw;」「height: 100vh;」を組み合わせることで、ブラウザいっぱいにコンテンツを表示させることができます。
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.7);
}
ケース03：並列要素の幅を%で可変させる
横並びの要素に対して幅を%で指定すると、親要素と連動してサイズが可変します。画面幅と連動させることも可能です。
.list {
display: flex;
justify-content: space-between;
width: 100%;
height: 200px;
}
.list li {
width: 32%;
background-color: orange;
}ケース04：%で上下左右中央配置
%を用いると、要素を簡単に左右中央に配置することができます。
.header {
position: relative;
height: 100vh;
background-color: #000;
}
.header h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
シチュエーションや目的別に、便利な単位を選択するようにしましょう。
