CSS GridとFlexboxの使い分け

全3回

3つのレイアウト例をCSS GridとFlexboxで組み、それぞれの特徴と違いを比べます。違いのポイントを押さえることで、CSS GirdとFlexboxの使い分けが的確にできるようになります。

最終回 見出しとテキストが並ぶデザイン

1回目と少し似ていますが、今回は「見出し」と「本文テキスト」という意味的に対になった要素のレイアウトを考えてみます。CSS GridとFlexbox、それぞれの特徴が顕著に表れます。

第2回 画面幅で変化するレスポンシブデザイン

いくつかの実務でよく扱う特徴的なレイアウトを、CSS GridとFlexboxの両方で作り、使い分けるための勘所を身に付けましょう。2回目ではレスポンシブデザインを例にあげ、CSS GridとFlexboxの両方で実装します。

第1回 テキスト量が変化する要素を並べる

いくつかの実務でよく扱う特徴的なレイアウトをCSS GridとFlexboxの両方で作り、使い分けるための勘所を身に付けましょう。1回目はテキスト量が変化する要素を並べるレイアウトを取り上げます。