CSSには幅や文字サイズを設定する時に使用する単位がpx、%、em、rem、vw、vh、vmax、vminの8種類あります。
それぞれの単位には特徴があります。その特徴を正しく理解することで、状況に応じて最適な単位を設定することができます。
本記事では、それぞれ単位の特徴と使い方について解説します。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,486 （2024/04/21 17:15時点 | 楽天市場調べ）
ポチップ
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
サイズ単位表
| 単位 | 基準 |
|---|
| px | 無し |
| % | 親要素 |
| em | 親要素 |
| rem | ルート要素 |
| vw | ビューポートの幅 |
| vh | ビューポートの高さ |
| vmax | ビューポートの幅と高さ |
| vmin | ビューポートの幅と高さ |
サンプルコード
以降の解説で実際にpxやemなどのサイズ単位をサンプルコードを用いて解説していきます。自分のパソコンでコードを入力しながら確認したい方は以下のサンプルコードを使用してください。
▼px,%,em,remで使用するサンプルコード
<div id="parent">
<p>親要素</p>
<div id="child">
<p>子要素</p>
<div id="grandchild">
<p>孫要素</p>
</div>
</div>
</div>
▼vw,vh,vmax,vminで使用するサンプルコード
<div id="content">
<p>コンテンツ</p>
</div>
#content{
/* 中央寄せと背景色 */
display:flex;
align-items:center;
justify-content:center;
background:#00f;
}
pxの使い方
1つ目のサイズ単位のpxです。pxは固定値でブラウザの幅や親要素の幅が変更されても変わることのない値です。
例えば、font-size:20pxを設定した場合、パソコンとスマートフォンどちらも20pxサイズの文字が表示されます。
#parent {
font-size: 10px;
}
#child {
font-size: 20px;
/*
#parentに影響されない
*/
}
#grandchild {
font-size: 30px;
/*
#childに影響されない
*/
}
ポチップ
先輩くん
後輩ちゃん
