x-smallとは？初心者にも分かる意味・使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

x-smallとは？

x-small はウェブデザインで使われるフォントサイズを指定する CSS のキーワードのひとつです。

この値は厳密なピクセル数ではなく親要素のフォントサイズを基準にして文字の大きさを決める 相対的なサイズ です。

つまり同じ x-small でもページの他の部分やブラウザのデフォルト設定によって見え方が少し変わることがあります。

使い方の基本

よくある使い方は font-size プロパティと組み合わせて文字を小さく表示したいときです。

例として以下の書き方があります。

<span>p { font-size: x-small; }

他のサイズとの関係

CSS には x-small small medium large x-large などのサイズがあります。

キーワード	意味
x-small	相対的に小さいサイズ。環境により約 12px 前後に相当することが多い。
small	x-small よりやや大きいサイズ
medium	デフォルトの標準サイズ
large	やや大きいサイズ
x-large	かなり大きいサイズ

実務での注意点

相対サイズなので親のサイズやブラウザ設定に影響されます。

読みやすさを保つためにも用途に応じて適切なサイズを選びましょう。

アクセシビリティの観点からは小さすぎる文字は視認性を落とすため避けるのが基本です。デザインの一部として使う場合でも読みやすさを最優先に検討します。

デザイントレンドとしては親要素のサイズを適切に調整するだけでなく使用機会を限定するのがコツですたとえばナビゲーションの補助テキストや注釈などには過度に小さくしないようにしましょう。

まとめ

x-small は CSS のフォントサイズの相対的な値であり 初心者にも扱いやすい 一方で表示が変わる可能性がある点に注意が必要です。

x-smallの同意語

xx-small: x-smallよりさらに小さい絶対フォントサイズ。CSSの絶対サイズキーワードの中で最も小さい範囲の一つです。実際の表示サイズはブラウザのデフォルトフォントサイズに依存しますが、一般的にはx-smallより小さく表示されます。
x-small: CSSの絶対サイズキーワードの一つ。デフォルトのフォントサイズより小さな表示を指定します。実際の大きさはブラウザやユーザー設定に影響され、目安として約10px前後になることが多いです。
extra small: x-smallの自然言語表現。公式のキーワードではありませんが、説明的な言い換えとして使われることがあります。
tiny: 英語で『とても小さい』という意味の表現。文書やデザインの説明で使われることはありますが、CSSの公式値ではありません。
minuscule: 非常に小さいという意味の英語表現。x-smallの近接概念として用いられることがありますが、CSSの公式値ではありません。

x-smallの対義語・反対語

x-large: x-smallの対義語。CSSのキーワードで、最も小さいx-smallに対し、さらに大きいサイズを表す。フォントや要素のサイズを大きくする際に使います。
xx-large: x-smallの対義語の中で最大級のサイズ。CSSでは非常に大きいフォント/要素の指定に使われます。
large: x-smallの対比としての一般的な大きさ。標準より少し大きめのサイズを表します。
larger: 現在のサイズより大きくする相対表現。例: font-size: larger;
bigger: より大きいことを意味する英語表現。日常語として広く使われます。
特大: 日本語で特に大きいことを強調する表現。サイズがかなり大きいイメージ。
巨大: 非常に大きいことを表す日本語。物理的にも抽象的にも“大きさ”を強調します。
超大: 口語的に非常に大きいことを表す表現。強調のニュアンスを出すときに使います。
最大級: 最も大きいと考えられるレベル、比較の中でトップの大きさを示します。
最大: その状況で最も大きいとされるサイズ。上限・最大値のイメージ。
極大: 極めて大きいことを表す語。やや文学的・技術的にも使われます。
最大サイズ: 利用できる最大のサイズを指す表現。公式文書や設計で使われることがあります。

x-smallの共起語

xx-small: CSS で使える最小のフォントサイズキーワード。x-small よりさらに小さな文字サイズを示します。
small: CSS のフォントサイズキーワードのひとつ。標準より少し小さめの文字サイズを指定する際に使われます。
font-size: フォントの大きさを指定する CSS プロパティ。x-small などのキーワードや絶対・相対単位を値として取ります。
font: フォントの家族・サイズ・スタイルなどを一括して指定する CSS のショートハンドプロパティ。
typography: 活字デザイン・文字組み・読みやすさを扱う分野。ウェブでは文字サイズの階層設計も含みます。
CSS: カスケーディング・スタイルシート。ウェブページの見た目を作る技術の総称。
web design: ウェブサイトの外観と使い勝手を設計する分野。文字サイズの一貫性は重要な要素です。
responsive design: 画面サイズやデバイスに応じて文字サイズやレイアウトを調整する設計手法。x-small などの相対値を活かします。
root font size: ルート要素（通常は html 要素）のフォントサイズ。rem などの相対単位の基準になります。
rem: root 要素のフォントサイズを基準にする相対単位。ウェブで一貫した文字サイズを作る時に使われます。
em: 直前の要素のフォントサイズを基準にする相対単位。継承関係でサイズを調整します。
px: ピクセル単位。絶対的なサイズ感を表す基本的な長さの単位です。
pt: ポイント単位。印刷系や一部の CSS で使われる長さの単位です。
%: フォントサイズを相対値として表す際に使う割合表現。親要素のフォントサイズに対して設定します。
inherit: 親要素のフォントサイズを継承させる値。継承の制御に用います。
initial: CSS プロパティの初期値を指すキーワード。デフォルト設定に戻す場合に使います。
browser default: ブラウザがデフォルトで採用するフォントサイズ。設定がない場合の基準値です。
line-height: 行の高さを決定する CSS プロパティ。文字サイズと組み合わせて読みやすさを左右します。
font-family: フォントの家族名を指定するプロパティ。文字の形と識別性を決定します。
accessibility: アクセシビリティ。文字サイズの調整時にも読みやすさ・操作性を保つ工夫が重要です。
readability: 読みやすさ。文字サイズの設計は読みやすさに直結します。
typographic scale: 文字サイズの階層（スケール）を設計する概念。x-small などはこのスケールの一部です。

x-smallの関連用語

x-small: CSSのフォントサイズのキーワードのひとつ。xx-smallより大きく、小より小さい。フォントサイズを相対的にやや小さく設定する際に使います。
xx-small: 最小級のフォントサイズのキーワード。x-smallよりも小さい。
small: 小さめのフォントサイズ。デフォルトよりやや小さく表示したいときに使います。
medium: 標準サイズ。ブラウザのデフォルトに近い基準サイズとして用いられます。
font-size: フォントの大きさを決めるCSSプロパティ。px・em・remなどの単位と組み合わせて使います。
font: フォントファミリーとサイズを同時に指定できるショートハンド。例: font: 12px/1.5 Arial, sans-serif;
em: 現在の要素のフォントサイズを基準とする相対単位。親の設定に影響されます。
rem: root要素(html)のフォントサイズを基準とする相対単位。リセット後の一貫性が取りやすい。
px: 固定ピクセル単位。端末解像度に依存せず、厳密なサイズ指定ができます。
percent: 親要素のフォントサイズに対する相対割合で指定する単位。
smaller: 現在のフォントサイズより小さくなる相対キーワード。
larger: 現在のフォントサイズより大きくなる相対キーワード。
inherit: 親要素のフォントサイズを継承させる指定。
initial: そのプロパティを初期値に戻します。
unset: プロパティを継承値または初期値に戻す指定。状況により挙動が変わります。
responsive-typography: 画面サイズに応じて文字サイズを自動で調整する設計。メディアクエリや相対単位を活用します。
typographic-scale: 本文・見出しなどの階層を設計する際の文字サイズの段階的な比率（例: 1.25, 1.5 などのスケール）を指す概念。
accessibility: 小さすぎる文字は視認性と操作性を損なうため、可読性と利用しやすさを確保する観点です。
readability: 文字の読みやすさ。適切なサイズ・行間・コントラストが重要。
font-family: 文字の書体を決定する指定。フォントの集合を列挙して見た目を統一します。
CSS: Cascading Style Sheetsの略。ウェブページの見た目を定義するスタイルシート言語。
vw: viewport widthの略。画面の幅を基準にした相対長さ。
vh: viewport heightの略。画面の高さを基準にした相対長さ。