AIへの指示で詰まりやすいレスポンシブ用語

このページでは、AIへの指示で使うと伝わりやすくなるレスポンシブデザイン系の用語を解説します。知らないとAIへの指示が遠回りになる用語を厳選しています。

「スマホで見たときに縦並びにして」「画面幅によって表示を変えて」—— これを正確に伝えるには、レスポンシブの用語を知っておく必要があります。 このページでは、AIへの指示でよく使うレスポンシブ用語を厳選して解説します。

viewport(ビューポート)

ブラウザで実際に表示される画面の領域

viewport

AIへの指示例

「viewportの幅に合わせてレイアウトを変えて」
→ 柔軟な単位のデモを見る

vw / vh

viewportの幅・高さを基準にした相対単位(100vw = 画面幅いっぱい)

|
100vw
|
—
100vh
—

AIへの指示例

「ヒーローセクションの高さを100vhにして」
→ 柔軟な単位のデモを見る

ブレークポイント(Breakpoint)

レイアウトが切り替わる画面幅の境界値

〜767px
768px
境界
768px〜

AIへの指示例

「768px以下でサイドバーを非表示にして」
→ メディアクエリのデモを見る

メディアクエリ(Media Query)

画面幅などの条件によってCSSを切り替える仕組み

SP
同じHTML異なるCSS
PC

AIへの指示例

「メディアクエリでスマホのときだけ縦並びにして」
→ メディアクエリのデモを見る

モバイルファースト(Mobile First)

スマホ向けのスタイルを基本にして、大きい画面向けに上書きする設計方針

SP(基本)
→
md〜
→
lg〜

AIへの指示例

「モバイルファーストで実装して、768px以上でPCレイアウトにして」
→ メディアクエリのデモを見る

コンテナクエリ(Container Query)

親要素の幅を基準にしてスタイルを切り替える仕組み(画面幅ではなく親要素基準)

親: 幅 狭い
vs
親: 幅 広い

AIへの指示例

「コンテナクエリでカードの幅が狭いときは縦並びにして」
→ コンテナクエリのデモを見る

このシリーズの他のページ