ブロックエディターで単位を使いこなそう
WordPress のブロックエディターやテーマカスタマイズで使える CSS の単位をまとめています
こんにちは、スタッフのトリさんこと鳥山です。
CSS で使える単位をうまく使い分けられていますか？px、%、em あたりは定番として、svmin、dvmax…となってくると迷いますね。 WordPress のブロックエディターでも使える単位が増えました。これにともない Lightning はじめベクトル製品でもより多くの単位を使えるよう対応しております。
WordPress (6.8時点) のブロックエディターや、テーマカスタマイズことサイトエディターで使える CSS の単位をまとめました。
よく使う単位
px
pixel
画面上の1つのドット（画素）です
- 固定単位で、ユーザーの設定やデバイスの解像度に依存せず一定のサイズを保持します
- 画面表示が鮮明で、テキストや図形の詳細を正確に表現できます
- デバイスピクセル比（Device Pixel Ratio、DPR）が1の場合 CSS の1px は物理的な1つのピクセルに対応します
DPRが2以上の場合1px は複数の物理ピクセルにマッピングされることがあります
※ Mac の Retina などがこれにあたりますが、表示される大きさに変わりはありません
ウェブページやアプリケーションの画面上でのサイズ指定に広く使用されています。
em
emphasis
親要素のフォントサイズに対して相対的なサイズです
- フォントサイズに対する相対的なサイズ
em は要素自体のフォントサイズに対して相対的な倍率で指定されます
親要素のフォントサイズが変わると、em で指定されたサイズも合わせて変化します - ネストされた要素に影響を与える
em はネストされた要素に影響を与えます
親要素のフォントサイズが変わるとそれに基づいて相対的にサイズが調整されます - 相対的な比率の指定
em は基準となるフォントサイズの倍率で指定されるため、レスポンシブデザインに適しています
em を使用することで、フォントサイズや要素のレイアウトを柔軟に相対的に指定することができます。ただし、ネストされた要素の連鎖的な影響を考慮する必要があるため、適切に使用することが重要です。
rem
root emphasis
ルート要素のフォントサイズに対して相対的なサイズです
- 相対的なフォントサイズの単位
rem はルート要素のフォントサイズに対する相対的なサイズを示します
1rem はルート要素のフォントサイズです - ルート要素のフォントサイズが基準
rem はネストされた要素の影響を受けません
ルート要素のフォントサイズが変更されたときに合わせて変化します - em との違い
REMはルート要素に対して相対的にサイズが指定される点でEMと似ています
em は要素自体のフォントサイズに基づいて相対的なサイズを指定するのに対し、rem は常にルート要素のフォントサイズに基づいて計算されます
rem を使用することで、ルート要素のフォントサイズに対して相対的にサイズを指定することができ、レスポンシブデザインを柔軟に行うことができます。
%
percent
要素の親要素に対する相対的な割合を示します
- 相対的な割合:
% は親要素に対する割合を示します
親要素のサイズに対して相対的に指定されるため、親要素のサイズが変わると 合わせて変化します - 様々なプロパティで使用できる
幅（width）、高さ（height）、余白（margin）、パディング（padding）、位置（positioning）、フォントサイズ（font-size）、線の太さ（border-width）など、さまざまなプロパティで % を使用することができます - レスポンシブデザインに適している
% を使用することで、要素のサイズや配置を親要素に対する相対的な比率で指定することができます
これにより、レスポンシブデザインの実装が簡単になります。
% を使用することで、要素のサイズやレイアウトを柔軟に調整することができ、レスポンシブデザインの実装に役立ちます。
ビューポートに基づく単位
ビューポートは画面 (ブラウザ) の表示領域のサイズです。
ビューポートをもとにした単位は画面の幅や高さに対して相対的に要素のサイズを指定することができます。画面の向きが横 / 縦と切り替わるなどユーザーのデバイスや状況に応じた柔軟なデザインを実現することができます。
ただし ブラウザ依存があります。
Safari は固定、Chrome は変動など挙動が異なる場合があります。
※ 最近では後述の単位 (svw、lvw、dvw など) が使いやすいです
vw
viewport width
ビューポートの幅の1% に相当します
vh
viewport height
ビューポートの高さの1% に相当します
vmin
viewport minimum
vw と vh の小さいほう
- vmin はビューポートの幅と高さのうち、小さいほうに対して相対的にサイズを指定します
レスポンシブデザインでの使用が便利で、画面サイズや向きに応じて要素のサイズを柔軟に調整することができます - 使用例
幅と高さの小さいほうに基づいて要素のサイズを指定する場合に使用します
vmax
viewport maximum
vw と vh の大きいほう
- vmax はビューポートの幅と高さのうち、大きいほうに対して相対的にサイズを指定します
レスポンシブデザインでの使用が便利であり、画面サイズや向きに応じて要素のサイズを柔軟に調整することができます - 使用例
幅と高さの大きいほうに基づいて要素のサイズを指定する場合に使用します
特に背景画像や動画のコンテナなど、ビューポートの大きいほうに依存する要素に適用することが多いです
スモールビューポートに基づく単位
スモールビューポートは、モバイル端末などでブラウザのアドレスバーやステータスバーなどの UI が表示されたときに最小となるビューポートサイズを基準にします。ユーザーの環境に応じて要素のサイズを調整するのに役立ちます。
vw、vh と似ていますが、常に一番小さい値で固定します。
svw
small viewport width
スモールビューポートでの幅の1%
svh
small viewport height
スモールビューポートでの高さの1%
svi
small viewport inline
ルート要素のインライン軸方向 (通常は左→右) のスモールビューポートの長さの1%
svb
small viewport block
ルート要素のブロック軸方向 (通常は上→下) のスモールビューポートの長さの1%
svmin
small viewport minimum
svw と svh の小さいほう
svmax
small viewport maximum
svw と svh の大きいほう
ラージビューポートに基づく単位
ラージビューポートは、モバイル端末などでブラウザのアドレスバーやステータスバーなどの UI がすべて非表示のときの最大となるビューポートサイズを基準にします。
常に一番大きい値で固定します。
lvw
large viewport width
ラージビューポートでの幅の1%
lvh
large viewport height
ラージビューポートでの高さの1%
lvi
large viewport inline
ルート要素のインライン軸方向 (通常は左→右) でのラージビューポート
横書きの場合は lvw、縦書きの場合は lvh に等しい
* ルート要素のインライン軸方向は言語によって変わります
lvb
large viewport block
ルート要素のブロック軸方向 (通常は上→下) でのラージビューポート
横書きの場合は lvh、縦書きの場合は lvw に等しい
lvmin
large viewport minimum
lvw と lvh の小さいほう
lvmax
large viewport maximum
lvw と lvh の大きいほう
ダイナミックビューポートに基づく単位
ダイナミックビューポートは、モバイル端末などでブラウザのアドレスバーやステータスバーなどの UI が表示 / 非表示に合わせたビューポートサイズを基準にします。ブラウザのウィンドウサイズを変更したとき、アドレスバーを表示 / 非表示したときなど変更に応じてリアルタイムに変化します。
比較的新しい単位ですが、主要ブラウザでほぼ対応済みです。
dvw
dynamic viewport width
ダイナミックビューポートの幅の1%
dvh
dynamic viewport height
ダイナミックビューポートの高さの1%
dvi
dynamic viewport inline
ダイナミックビューポートのインライン軸方向 (通常は左→右) の1%
* ルート要素のインライン軸方向は言語によって変わります
dvb
dynamic viewport block
ダイナミックビューポートのブロック軸方向 (通常は上→下) の1%
dvmin
dynamic viewport minimum
dvw とdvh の小さいほう
dvmax
dynamic viewport maximum
dvw と dvh の大きいほう
スクロールバーはビューポートに含まれるか？
どのビューポート単位を使った場合もスクロールバーのサイズが含まれています。
幅をいっぱいにしようと100vw を使ったつもりが画面の外にはみ出してしまい、横スクロールバーが表示されてしまうことがあります。幅いっぱいを表すときは 100 % を使うと無難です。
WordPress のテーマで使える単位
WordPress 6.5 よりブロックエディターで使える単位が増えました。
実際にはご利用のテーマによります。
- クラシックテーマでは、functions.php の add_theme_support (‘custom-units’) に使える単位が定義されている
- ブロックテーマでは、theme.json に使える単位が定義されている
- ハイブリッドテーマ (Lightning のように theme.json が使えるクラシックテーマ) では、theme.json に使える単位が定義されている
WordPress で使える単位
WordPress で使える単位には、W3C が進行している CSS レベル4 が取り入れられています。
CSS のレベルはデバイスやブラウザの対応状況によって W3C が制定しており、現在はレベル4 が進行中です。単位のほかにも変数や擬似セレクターなどさまざまな仕様が改善・拡張され、ユーザーの環境に合わせて表示できるようになっているのですね。
出てきた用語
- ルート要素
通常は HTML 要素 - ビューポート
画面 (ブラウザ) の表示領域のサイズ - インライン軸方向
テキストやコンテンツが流れる方向
横書きの場合は水平方向、縦書きの場合は垂直方向です- 多くの言語（英語、日本語など）では、インライン軸方向は左から右へ(LTR: Left-To-Right)
- アラビア語やヘブライ語などの言語では、インライン軸方向は右から左へ（RTL: Right-To-Left）
- ブロック軸方向
テキストやコンテンツが上から下に流れる方向
通常は縦方向です
この記事を書いた人
- Webデザイナーでカメラマン。Vektorチームでは、VK パターンライブラリと写真係を担当しています。WordCamp Tokyo 撮影班 / 着物屋カメラマン
最近の投稿
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。