会員登録すると
学習することができます。
会員登録する（無料）
学習することができます。
登録済みの方はこちら
ログイン
レスポンシブデザインの実践
目安学習時間 5分
学ぶ目的
画面幅に応じて変える
スマートフォンとPCでは画面の広さが違います。同じHTMLで、画面幅に応じてレイアウトを変えるのがレスポンシブデザインです。
ブレークポイント
Tailwindでは md:flex のように、接頭辞で「この画面幅以上のとき」を指定します。sm md lg xl と段階が用意されています。
モバイルファースト
接頭辞なしのクラスがすべての画面幅に適用され、接頭辞付きが「その幅以上」で上書きされます。つまり、狭い画面を基準に書き、広い画面向けに上書きしていくのが基本の考え方です。
このレクチャーで学ぶこと
- レスポンシブデザインとは
- ブレークポイント（sm / md / lg）
- モバイルファーストの考え方
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
理解度チェックテストに
合格しました！
おめでとうございます！
Tailwind CSS初級
Tailwind CSS初級講座
レスポンシブデザインの実践
理解度チェックテストに合格しました！
＼ SNSにシェアする ／
