px vs rem vs em vs vh：CSSの単位、どれを使うべき？完全ガイド
📷 Negative Space / Pexelspx vs rem vs em vs vh：CSSの単位、どれを使うべき？完全ガイド
CSSには15以上の長さの単位があり、多くの開発者が間違った単位を使っています。レスポンシブでアクセシブルなデザインに最適な単位の選び方を徹底解説。
はじめに：CSS単位が重要な理由
CSS単位は、フォントサイズや余白からレイアウトの寸法やアニメーションまで、Webページ上のすべての要素のサイズを決定します。適切なコンテキストに適切な単位を選ぶことは、レスポンシブでアクセシブルなWebデザインにおける最も重要な決断の一つです。
間違った単位を使うと、異なる画面サイズでレイアウトが崩れ、モバイルでテキストが小さすぎて読めず、ユーザーのアクセシビリティ設定が無視されます。正しい単位を使えば、あらゆるデバイスに柔軟に対応し、ユーザー設定を尊重するレスポンシブなインターフェースを作れます。
このガイドでは2026年に知っておくべきすべてのCSS単位を、各単位をいつどのように使うかの実践的なアドバイスと共に解説します。異なる計測単位間で変換する必要がある場合は、ユニットコンバーターツールをお試しください。
絶対単位
絶対単位は固定された計測値を表します。親要素、ビューポート、ユーザー設定によって変化しません。
ピクセル（px）
ピクセルはWeb開発で最もよく使われる絶対単位です。1 CSSピクセルは標準密度のディスプレイでは1デバイスピクセルに対応しますが、高DPI（レティナ）ディスプレイでは1 CSSピクセルが複数のデバイスピクセルにマッピングされる場合があります。
.box {
width: 300px;
height: 200px;
border: 1px solid #333;
padding: 16px;
}
ピクセルを使う場面：
- ボーダーやアウトライン（
border: 1px solid black） - ボックスシャドウ（
box-shadow: 0 2px 4px rgba(0,0,0,0.1)） - スケールすべきでない細かい視覚的な詳細
- メディアクエリのブレークポイント（
@media (min-width: 768px)） - アイコンなどの固定サイズの要素
ピクセルを使うべきでない場面：
- フォントサイズ（代わりに
remを使用） - 余白やパディング（代わりに
remやemを使用） - レイアウト幅（パーセンテージ、
fr、ビューポート単位を使用） - ユーザーのフォントサイズ設定に応じるべきもの
その他の絶対単位
| 単位 | 説明 | 換算 | 用途 |
|---|---|---|---|
px | ピクセル | 1px | 画面要素 |
cm | センチメートル | 37.8px | 印刷スタイルシート |
mm | ミリメートル | 3.78px | 印刷スタイルシート |
in | インチ | 96px | 印刷スタイルシート |
pt | ポイント | 1.33px（1インチの1/72） | 印刷スタイルシート |
pc | パイカ | 16px（1インチの1/6） | 印刷スタイルシート |
注： 物理単位（cm、mm、in、pt、pc）は印刷スタイルシートでのみ意味があります。画面上では、標準の96 DPI比率を使ってピクセルに変換されます。
/* 物理単位を使った印刷スタイルシート */
@media print {
body {
font-size: 12pt;
margin: 1in;
}
h1 {
font-size: 18pt;
margin-bottom: 0.5cm;
}
}
相対単位：フォントベース
相対単位は別の値（親要素のフォントサイズ、ルートのフォントサイズ、またはビューポートの寸法）に基づいて計算されます。レスポンシブデザインに欠かせない単位です。
rem（ルートem）
rem は「root em」の略で、ルート要素（<html>）のフォントサイズに対して相対的です。デフォルトでは、ブラウザはルートのフォントサイズを16pxに設定するため、1rem = 16px になります。
html {
font-size: 16px; /* ブラウザのデフォルト */
}
h1 {
font-size: 2rem; /* 32px */
margin-bottom: 1rem; /* 16px */
}
p {
font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
margin-bottom: 1rem; /* 16px */
}
.card {
padding: 1.5rem; /* 24px */
border-radius: 0.5rem; /* 8px */
}
rem がほとんどの場面に最適な理由：
- ユーザー設定を尊重する：ユーザーがアクセシビリティのためにブラウザのフォントサイズを20pxに設定すると、すべての
remベースの値が比例してスケールします - 一貫性がある：
emと異なり、remは常にルートを参照するため、複合効果がありません - 予測可能：計算が簡単 -- ルートが16pxであれば、
1.5remは常に24pxです
62.5%のトリック（注意して使用）：
/* rem計算を簡単にする：1rem = 10px */
html {
font-size: 62.5%; /* 16pxの62.5% = 10px */
}
body {
font-size: 1.6rem; /* 16px相当に戻す */
}
h1 {
font-size: 3.2rem; /* 32px */
}
.spacing {
padding: 2.4rem; /* 24px */
}
このテクニックは計算を簡単にしますが、デフォルトのルートフォントサイズを前提とするサードパーティコンポーネントで問題が発生する可能性があります。注意して使用してください。
em（親要素に対する相対）
em はフォント関連プロパティでは要素自身のフォントサイズに、その他のプロパティでは親要素のフォントサイズに対して相対的です。コンポーネントレベルのスケーリングに便利ですが、複合効果のためにトリッキーな場合があります。
.parent {
font-size: 18px;
}
.child {
font-size: 1.2em; /* 18px * 1.2 = 21.6px */
padding: 1em; /* 21.6px（自分のフォントサイズに対する相対） */
}
.grandchild {
font-size: 1.2em; /* 21.6px * 1.2 = 25.92px -- 複合効果！ */
}
複合問題：
/* ネストのレベルごとにフォントサイズが大きくなる */
ul { font-size: 1.1em; }
/*
レベル1: 16px * 1.1 = 17.6px
レベル2: 17.6px * 1.1 = 19.36px
レベル3: 19.36px * 1.1 = 21.3px
レベル4: 21.3px * 1.1 = 23.4px
-- ネストするにつれてテキストが大きくなり続ける！
*/
em が本当に役立つ場面：
em は要素自身のフォントサイズに合わせて余白をスケールさせたい場合に効果を発揮します。ボタンやインラインコンポーネントで特に便利です：
/* 比例してスケールするボタン */
.button {
font-size: 1rem; /* ルートからのベースサイズ */
padding: 0.5em 1em; /* フォントサイズに合わせてスケール */
border-radius: 0.25em; /* フォントサイズに合わせてスケール */
}
.button--large {
font-size: 1.25rem; /* 他のすべてが自動的にスケール */
}
.button--small {
font-size: 0.875rem; /* パディングと角丸も縮小する */
}
比較：rem vs. em
| 観点 | rem | em |
|---|---|---|
| 参照 | ルート要素のフォントサイズ | 親/自分のフォントサイズ |
| 複合効果 | なし | あり |
| 予測可能性 | 高い | 低い（コンテキストに依存） |
| 最適な用途 | フォントサイズ、余白、レイアウト | コンポーネントレベルの比例スケーリング |
| アクセシビリティ | ルートのフォントサイズ設定を尊重 | 親のフォントサイズを尊重 |
ch（文字幅）
ch は現在のフォントの「0」（ゼロ）文字の幅に等しい単位です。読みやすい行の長さにテキスト幅を制限するのに便利です。
/* 最適な読み取り幅 */
.article-content {
max-width: 65ch; /* 1行あたり約65文字 */
margin: 0 auto;
}
/* 想定されるコンテンツに合わせたインプットフィールド */
.zip-code-input {
width: 6ch; /* 5桁＋少し余裕 */
}
.phone-input {
width: 15ch;
}
ch が読みやすさに重要な理由： 最適な行の長さは45〜75文字であるとされています。ch 単位を使えば、フォントサイズに関係なく簡単にこれを実現できます。
ex（x高さ）
ex は現在のフォントの小文字「x」の高さに等しい単位です。直接使われることはほとんどありませんが、正確な縦方向の配置に便利な場合があります。
/* テキストとアイコンを縦方向に中央揃え */
.icon-inline {
height: 1ex;
vertical-align: middle;
}
lhとrlh（行高さ単位）
lh は要素の計算済み line-height に、rlh はルート要素の行高さに等しい単位です。
/* 行高さの倍数で要素間隔を指定 */
.paragraph {
margin-bottom: 1lh; /* 1行分の余白 */
}
.section {
margin-bottom: 2rlh; /* ルートの行高さ2行分の余白 */
}
cap、ic、その他の高度な単位
| 単位 | 説明 | 用途 |
|---|---|---|
cap | 大文字の高さ | 大文字テキストとの整列 |
ic | CJKの「水」の字の幅 | CJKタイポグラフィ |
lh | 要素の行高さ | 縦方向のリズム |
rlh | ルートの行高さ | 一貫した縦方向の余白 |
ビューポート単位
ビューポート単位はブラウザのビューポート（Webページの表示エリア）に対して相対的です。
vwとvh（ビューポート幅と高さ）
/* フルスクリーンのヒーローセクション */
.hero {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* レスポンシブタイポグラフィ */
h1 {
font-size: 5vw; /* ビューポート幅に合わせてスケール */
}
重要： モバイルブラウザの 100vh はブラウザのアドレスバーとナビゲーションを考慮しません。これが新しいビューポート単位が作られた理由です。
モバイルビューポートの問題
モバイルブラウザでは、スクロール中にアドレスバーが表示・非表示になるとビューポートの高さが変わります。古い vh 単位は最大ビューポート（アドレスバーが非表示）に基づいており、アドレスバーが表示されているとコンテンツが隠れてしまいます。
dvh、svh、lvh（動的、小、大ビューポート高さ）
CSSはモバイルビューポートを扱うために3つのバリアントを提供しています：
/* svh: 小ビューポート高さ（アドレスバーが表示） */
.safe-full-height {
height: 100svh; /* アドレスバーの後ろに隠れない */
}
/* lvh: 大ビューポート高さ（アドレスバーが非表示） */
.max-full-height {
height: 100lvh; /* アドレスバーが非表示のときの最大高さ */
}
/* dvh: 動的ビューポート高さ（アドレスバーに合わせて変化） */
.dynamic-full-height {
height: 100dvh; /* リアルタイムで調整 */
}
どれを使うか：
svh: 安全なデフォルト -- コンテンツが常に完全に表示されるlvh: 最大限の高さが必要な場合dvh: アドレスバーに合わせて高さをアニメーションさせたい場合
同様に幅単位にも：svw、lvw、dvw があります。
viとvb（ビューポートのインラインとブロック）
これらの単位は書字方向を考慮します：
vi= インライン方向のビューポートサイズ（横書きでは幅、縦書きでは高さ）vb= ブロック方向のビューポートサイズ（横書きでは高さ、縦書きでは幅）
/* 書字方向を考慮したレイアウト */
.container {
max-inline-size: 90vi; /* インライン方向のビューポートの90% */
margin-block: 5vb; /* ブロック方向のビューポートの5% */
}
vminとvmax
vmin=vwとvhの小さい方vmax=vwとvhの大きい方
/* どのビューポートにも収まる正方形の要素 */
.square {
width: 50vmin;
height: 50vmin;
}
/* 縦横どちらの向きでもうまくスケールするタイポグラフィ */
h1 {
font-size: 8vmin; /* 縦向きでも横向きでも機能する */
}
ビューポート単位の比較
| 単位 | 説明 | モバイルアドレスバー |
|---|---|---|
vw | ビューポート幅の1% | 影響なし |
vh | ビューポート高さの1% | 大きいビューポートを使用 |
svh | 小ビューポート高さの1% | 常に安全 |
lvh | 大ビューポート高さの1% | 最大高さ |
dvh | 動的ビューポート高さの1% | バーに合わせてアニメーション |
vmin | vw/vhの小さい方 | vhから継承 |
vmax | vw/vhの大きい方 | vhから継承 |
パーセンテージ（%）
パーセンテージは親要素の対応するプロパティに対して相対的です。設定するプロパティによって参照が変わります。
.parent {
width: 800px;
font-size: 20px;
line-height: 1.5;
}
.child {
width: 50%; /* 400px（親の幅の50%） */
margin-left: 10%; /* 80px（親の幅の10%） */
font-size: 80%; /* 16px（親のフォントサイズの80%） */
padding: 5%; /* 40px（親の高さではなく幅の5%！） */
}
重要な注意点： 縦方向のパディングとマージンのパーセンテージは、親の高さではなく幅に基づいて計算されます。これはアスペクト比ボックスを作成するのに実は便利ですが、今では aspect-ratio プロパティが推奨されています。
/* パーセンテージパディングを使った旧来のアスペクト比ハック */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9アスペクト比 */
}
/* モダンなアプローチ */
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
コンテナクエリ単位
コンテナクエリ単位はクエリコンテナのサイズに対して相対的で、真のコンポーネントベースのレスポンシブデザインを実現します。
cqw、cqh、cqi、cqb、cqmin、cqmax
.card-container {
container-type: inline-size;
container-name: card;
}
.card-title {
font-size: clamp(1rem, 4cqi, 2rem); /* コンテナのインラインサイズに合わせてスケール */
}
.card-description {
font-size: clamp(0.875rem, 3cqi, 1.125rem);
}
| 単位 | 説明 |
|---|---|
cqw | コンテナ幅の1% |
cqh | コンテナ高さの1% |
cqi | コンテナのインラインサイズの1% |
cqb | コンテナのブロックサイズの1% |
cqmin | cqiとcqbの小さい方 |
cqmax | cqiとcqbの大きい方 |
fr単位（フラクション）
fr 単位はCSS Gridで利用可能なスペースを比例的に配分するためだけに使われます。
.grid {
display: grid;
/* 3列：1パート、2パート、1パート */
grid-template-columns: 1fr 2fr 1fr;
/* 1200pxのコンテナでは：300px、600px、300px */
/* 混合単位：固定サイドバー、フレキシブルコンテンツ */
grid-template-columns: 250px 1fr;
/* 複数行 */
grid-template-rows: auto 1fr auto;
/* ヘッダー、フレキシブルコンテンツエリア、フッター */
gap: 1rem;
}
/* fr単位を使ったレスポンシブグリッド */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
グリッドにおける fr vsパーセンテージ：
/* 似ているように見えるが動作が異なる */
.grid-percent {
grid-template-columns: 25% 50% 25%;
gap: 1rem;
/* 列＋ギャップ > 100%、オーバーフローが発生！ */
}
.grid-fr {
grid-template-columns: 1fr 2fr 1fr;
gap: 1rem;
/* fr単位はギャップを自動的に考慮する */
}
単位を使ったCSS関数
clamp() - 制約付きレスポンシブ値
clamp() はレスポンシブデザインで最も強力なCSS関数の一つです。最小値、推奨値、最大値の3つの値を受け取ります。
/* 小さすぎず大きすぎないレスポンシブフォントサイズ */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* 最小値：1.5rem (24px)
推奨値：4vw（ビューポートに合わせてスケール）
最大値：3rem (48px) */
}
/* レスポンシブコンテナ幅 */
.container {
width: clamp(320px, 90%, 1200px);
}
/* レスポンシブ余白 */
section {
padding: clamp(1rem, 5vw, 4rem);
}
min() と max()
/* 90%と1200pxの小さい方の幅 */
.container {
width: min(90%, 1200px);
}
/* 少なくとも300px幅だが成長できる */
.sidebar {
width: max(300px, 25%);
}
/* 複雑なレスポンシブ値を組み合わせる */
.card {
width: min(100% - 2rem, 600px);
padding: max(1rem, 2vw);
}
calc() - 異なる単位の計算
calc() を使うと異なる単位を混在させた計算ができます：
.sidebar-layout {
/* 全幅からサイドバーを引く */
.main-content {
width: calc(100% - 280px);
}
/* 最大幅と自動マージンで中央揃え */
.content {
width: calc(100% - 2 * 1.5rem);
max-width: 800px;
margin: 0 auto;
}
}
/* calcを使ったフルイドタイポグラフィ */
h1 {
/* ベースサイズ＋スケーリング係数 */
font-size: calc(1.5rem + 1.5vw);
}
/* 最小値付きビューポートベースの余白 */
.hero {
padding-top: calc(2rem + 5vh);
padding-bottom: calc(2rem + 5vh);
}
実践的な推奨事項：どんな場面でどの単位を使うか
フォントサイズ
/* ルートフォントサイズ：パーセンテージかpxを使用 */
html {
font-size: 100%; /* ユーザーのブラウザ設定を尊重 */
}
/* その他のフォントサイズ：remを使用 */
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
small { font-size: 0.875rem; } /* 14px */
/* レスポンシブフォントサイズ：remとvwのclampを使用 */
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
}
余白（パディング、マージン、ギャップ）
/* 一貫した余白にremを使用 */
.card {
padding: 1.5rem;
margin-bottom: 2rem;
}
.grid {
gap: 1.5rem;
}
/* フォントサイズに合わせてスケールする余白にemを使用 */
.button {
padding: 0.5em 1em;
}
レイアウト幅
/* パーセンテージ、fr、またはビューポート単位を使用 */
.container {
width: min(90%, 1200px);
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* フルブリードセクション */
.hero {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
ボーダーとシャドウ
/* 細かい視覚的詳細にpxを使用 */
.card {
border: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 0.5rem; /* border-radiusにremも可 */
}
メディアクエリ
/* ブレークポイントにpxかemを使用 */
@media (min-width: 768px) {
/* タブレット以上 */
}
@media (min-width: 1024px) {
/* デスクトップ以上 */
}
/* emベースのブレークポイントはユーザーズームを尊重する */
@media (min-width: 48em) {
/* 48em = デフォルトフォントサイズで768px */
}
完全な推奨事項表
| 用途 | 推奨単位 | 理由 |
|---|---|---|
| フォントサイズ | rem | ユーザー設定を尊重、複合効果なし |
| レスポンシブフォントサイズ | clamp(rem, vw, rem) | 制約付きでスムーズにスケール |
| 余白（パディング、マージン） | rem | 一貫性があり、ルートフォントでスケール |
| ボタンのパディング | em | ボタン自身のフォントサイズに合わせてスケール |
| コンテナ幅 | %、min()、clamp() | フレキシブルでレスポンシブ |
| グリッド列 | fr | スペースを比例的に配分 |
| 行の長さ | ch | 読みやすさを最適化 |
| ボーダー | px | 細かい詳細、スケールすべきでない |
| ボックスシャドウ | px | 細かい詳細、一貫した外観 |
| フルスクリーンセクション | dvh | モバイルアドレスバーを考慮 |
| メディアクエリのブレークポイント | px か em | 一貫したトリガーポイント |
| ボーダー半径 | rem か px | どちらでも可；rem はわずかにスケール |
アクセシビリティとCSS単位
適切なCSS単位の選択はアクセシビリティに直接関係しています。
ユーザーのフォントサイズ設定を尊重する
ユーザーは読みやすさのためにブラウザのデフォルトフォントサイズを大きくする場合があります。フォントサイズと余白に rem を使うことでこの設定が尊重されます：
/* 良い例：ユーザーのフォントサイズ設定に合わせてスケール */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
.container { padding: 1.5rem; }
/* 悪い例：ユーザー設定を無視 */
body { font-size: 16px; }
h1 { font-size: 40px; }
.container { padding: 24px; }
ズームのサポート
ユーザーは横スクロールなしに200%ズームできるべきです（WCAG 2.1の成功基準1.4.10）：
/* 良い例：どのズームレベルでもレスポンシブ */
.content {
max-width: min(90%, 65ch);
margin: 0 auto;
padding: 1.5rem;
}
/* 悪い例：高ズームで固定幅が崩れる */
.content {
width: 960px;
margin: 0 auto;
padding: 24px;
}
タッチターゲット
インタラクティブな要素は少なくとも44x44 CSSピクセルであるべきです（WCAG 2.5.5）：
.button {
min-height: 2.75rem; /* 44px */
min-width: 2.75rem;
padding: 0.75rem 1.5rem;
}
/* タッチターゲット間の適切なスペースを確保 */
.nav-list li + li {
margin-top: 0.5rem;
}
よくあるミスとその回避方法
ミス1：フォントサイズにpxを使う
/* 悪い例：ユーザー設定に合わせてスケールしない */
body { font-size: 16px; }
h1 { font-size: 32px; }
/* 良い例：ユーザー設定に合わせてスケールする */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
ミス2：モバイルフルハイトレイアウトにvhを使う
/* 悪い例：モバイルのアドレスバーの後ろに隠れる */
.mobile-layout { height: 100vh; }
/* 良い例：モバイルのアドレスバーを考慮する */
.mobile-layout { height: 100dvh; }
/* 最も安全：古いブラウザへのフォールバック */
.mobile-layout {
height: 100vh;
height: 100dvh;
}
ミス3：emの複合効果
/* 悪い例：ネストでフォントサイズが大きくなる */
li { font-size: 1.1em; }
/* 良い例：ネストに関係なく一貫している */
li { font-size: 1.1rem; }
ミス4：制約なしのvwフォントサイズ
/* 悪い例：モバイルで小さすぎ、デスクトップで大きすぎ */
h1 { font-size: 5vw; }
/* 良い例：clampで制約する */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
ミス5：パーセンテージパディングの混乱
/* 驚き：縦方向のパディングは幅に基づく */
.box {
padding-top: 10%; /* 親の幅の10%（高さではない！） */
padding-bottom: 10%; /* 同じく幅に基づく */
}
モダンなフレームワークにおけるCSS単位
Tailwind CSS
Tailwindは rem に基づくスペーシングスケールを使用しています：
{/* Tailwindのスペーシング：1単位 = 0.25rem = 4px */}
<div class="p-4 m-6 text-lg">
{/* p-4 = padding: 1rem (16px) */}
{/* m-6 = margin: 1.5rem (24px) */}
{/* text-lg = font-size: 1.125rem (18px) */}
</div>
CSSモジュール / CSS-in-JS
// Styled Components / Emotion
const Card = styled.div`
padding: 1.5rem;
margin-bottom: 2rem;
font-size: 1rem;
border: 1px solid #e0e0e0;
border-radius: 0.5rem;
max-width: min(100%, 600px);
`;
まとめ
CSS単位はレイアウト、タイポグラフィ、アクセシビリティ、レスポンシブデザインなど、Web開発のあらゆる側面に影響を与える基本的なトピックです。重要な洞察は、唯一の「最善」な単位は存在しないということです。適切な選択はコンテキストによって異なります。
重要なポイント：
remをデフォルトとして使う — フォントサイズ、余白、ほとんどの計測値に- 細かい詳細には
pxを使う — ボーダー、ボックスシャドウ、アウトラインに - グリッドレイアウトには
frを使う — スペースを比例的に配分するために - フルハイトのモバイルレイアウトには
vhよりdvhを使う - 行の長さには
chを使う — 読みやすさを最適化するために - レスポンシブ値には
clamp()を使う — 最小値と最大値の制約付きで emは慎重に使う — ボタンのパディングなどの比例コンポーネントスケーリングに- 常にアクセシビリティを考慮する — ユーザーの設定を尊重する単位を選ぶ
CSS単位をマスターするには練習が必要ですが、原則は明確です：絶対単位より相対単位を好み、デザインが異なるコンテキストにどう反応するかを考え、常にアクセシビリティを考慮してください。
開発ワークフローでの素早い単位変換には、ユニットコンバーターツールをお試しください。CSS色値にはカラーピッカー、その他のWeb開発タスクにはCSS関連の開発者ツールもご利用いただけます。
関連リソース
- ユニットコンバーター -- 異なる単位間で変換
- カラーピッカー -- CSS色を選んで変換
- Web開発トレンド2026 -- モダンなCSSとそれ以上
- JSONフォーマッター -- デザイントークンとCSS設定をフォーマット
- 正規表現テスター -- CSS関連の正規表現パターンをテスト