CSS レッスン10
レスポンシブデザイン
@media、ビューポート単位、モバイルファーストで画面サイズに対応するデザインを作ろう
レスポンシブデザインとは
レスポンシブデザインは、スマホ・タブレット・PCなどさまざまな画面サイズに対応するデザイン手法です：
@media- 画面サイズに応じてスタイルを切り替えるモバイルファースト- 小さい画面を基準にして、大きい画面用を追加する考え方vw / vh- ビューポートの幅・高さに対する割合の単位rem / em- 相対的なサイズ単位max-width- 最大幅を制限して読みやすさを維持clamp()- 最小・推奨・最大値を一度に指定する関数
@media クエリの基本
@media (max-width: 600px)のように、画面幅に応じてスタイルを変えられます。 プレビューの幅を変えて確認してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
26 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
ビューポート単位とclamp()
vwはビューポート幅の1%、clamp()で最小・推奨・最大を一括指定できます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
16 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
モバイルファーストの実践
モバイルファーストでは、まずスマホ用スタイルを書き、min-widthで大きい画面用を追加します。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
20 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
7 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。