会員登録すると
学習することができます。
会員登録する（無料）
学習することができます。
登録済みの方はこちら
ログイン
基本的なレイアウトを作ろう② メインコンテンツの作成
目安学習時間 4分
学ぶ目的
メイン領域を組む
サイドバーの隣にメインコンテンツを配置します。残りの幅を使うように指定し、内側に余白を取ります。
カードを並べる
Gridを使ってカードを格子状に並べてみましょう。grid-cols-3 と gap-4 の組み合わせが基本形です。
仕上げにレスポンシブ対応
狭い画面では1列、広い画面では3列——grid-cols-1 md:grid-cols-3 のように書けば実現できます。ここまでできれば、Tailwind CSSで一通りのレイアウトが組めるようになっています。
このレクチャーで学ぶこと
- メイン領域を作る
- カードを並べる
- レスポンシブに対応させる
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
理解度チェックテストに
合格しました！
おめでとうございます！
Tailwind CSS初級
Tailwind CSS初級講座
基本的なレイアウトを作ろう② メインコンテンツの作成
理解度チェックテストに合格しました！
＼ SNSにシェアする ／
