AIへの指示で詰まりやすいレスポンシブ用語
このページでは、AIへの指示で使うと伝わりやすくなるレスポンシブデザイン系の用語を解説します。知らないとAIへの指示が遠回りになる用語を厳選しています。
「スマホで見たときに縦並びにして」「画面幅によって表示を変えて」—— これを正確に伝えるには、レスポンシブの用語を知っておく必要があります。 このページでは、AIへの指示でよく使うレスポンシブ用語を厳選して解説します。
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への指示例
「コンテナクエリでカードの幅が狭いときは縦並びにして」