株式会社カオナビ Advent Calendar 2025

要素のサイズはどうやって決まるのか

Last updated at 2025-12-02Posted at 2025-12-02

この記事は株式会社カオナビ Advent Calendar 2025 シリーズ２の２日目です。

初めて技術記事を書きました。お手柔らかにお願いします🥲

他の人のコードをレビューしていると、次のようなCSSを見かけることがあります。

.container {
  width: 728px;
}

なんだか怪しそうな固定値です。

こういう場合「この値はどこからきたのですか？」と質問してみるのですが、そうするとしばしば「Figmaがこうなっていた」と返ってきます。

固定値を指定する以外に良い代替案を提示できればよいですが、ものによっては「それはなんか良くない気がする」と思いつつも理由をうまく言語化できなかったり、判断に迷うことがありました。

要素サイズの決まり方についてはすでに色々と議論されているところではあると思いますが、この記事では自分の判断材料として、改めて考えをまとめてみようと思います。

Figmaの固定値（px）で実装することの何が問題か

デスクトップで使用する場合のみを考慮したとしても、下記のような条件でユーザーの環境は変化します。

要素が拡大や縮小、コンテンツサイズの変化を考慮できていないと、レイアウトが崩れるばかりでなく、画面外へ飛び出した要素に含まれていた情報が読み取れなくなってしまったり、ボタンから文字がはみ出して押しにくくなったりと、アクセシビリティを損なう可能性も考えられます。

Figmaの数値通りに実装することは一見“デザイン通り”で良いように思われますが、ユーザーのさまざまな操作環境を考慮するなら、Figmaのデザインが表現する状態はあくまで一例であると思っておいた方が良さそうです。

文字のサイズや文章の量がユーザー環境でさまざまなので、要素が要素のサイズがどう決まるかを、まずは文字を起点に考えてみます。

padding や margin、テキストと併記されるアイコンのサイズなど、文字サイズに従って決められる¹ことが多いものは、日本語ならremやemといった相対長の単位で指定するか、デザインのルールに従って決めます。

一方で、

などの装飾のための値は、テキストのサイズと直接関係しないので、サイズを固定してもユーザー体験に悪影響を及ぼすことはなく、むしろpx指定することでデザインに一貫性を持たせることができます。（こちらもデザインのルールがあればそれに従います。）

ここまでで、ボックスモデルにおけるContentの外側（Margin, Border, Padding）とContentの中身のサイズは決められるようになりました。次はContent自身について考えます。

『Every Layout』²では要素のサイズについて次のように述べられています。

要素のサイズは可能な限り、その内側のコンテンツと外側のコンテキストから導出されるべき

この考え方をベースにすると、Contentの中でも、ざっくり「外側」「中間（外側と内側）」「内側」のどれかの特徴を持つものに分けて考えることができそうです。

特徴

例

特徴

自身のサイズは親が決めたレイアウト規則に従う
- 親いっぱいに広がる場合もwidth: 100%で自分のサイズを引き伸ばすより、親のflex / gridでサイズを決定する方が望ましい³
自身の子要素の配置（並びや間隔）を決める

例

特徴

例

今回レビューで見かけた固定幅のコンポーネントをきっかけに、改めて要素のサイズはどうやって決まるべきかを整理してみました。

実装はユーザーのさまざまな環境を考慮して行う必要がありますが、固定値が一概に悪、というわけでもなく、それぞれの要素の責務を考えることが重要であるように思います。

この記事が、Figmaの値をコピペする前に一度立ち止まってみるきっかけになったり、同じように迷った方の判断材料の一つになればうれしいです。