CSS - レイアウト

分割レイアウト

CSS Flexbox

CSS Flexboxは、1次元のレイアウトに特に強みがある。

以下の例では、横一列に要素を配置して、等間隔で配置している。
これは、ナビゲーションメニューやカードの配置等で使用される。

 .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

CSS Grid

CSS Gridは、2次元のレイアウトを実現できる。
これは、複雑なページ構造を作成する場合に便利である。

以下の例では、3列のグリッドレイアウトを作成して、各列が均等な幅を持つ。

 .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }

実務では、CSS FlexboxおよびCSS Gridを組み合わせて使用することが多い。

 /* CSS FlexboxおよびCSS Gridの組み合わせ */
 
 /* メインレイアウト */
 .page {
   display: grid;
   grid-template-areas: 
     "header header"
     "sidebar main"
     "footer footer";
 }
 
 /* ヘッダ内の要素配置 */
 .header {
   display: flex;
   justify-content: space-between;
 }

float

floatは、特定のケース (画像の周りにテキストを回り込ませる等) で現在でも使用されるが、一般的なレイアウトには前述の手法が推奨される。

レスポンシブデザイン

レスポンシブデザインを考慮する場合、メディアクエリと組み合わせることにより、柔軟な対応が可能である。

 @media (max-width: 768px) {
   .grid-container {
     grid-template-columns: 1fr;  /* スマートフォン向けに1列に */
   }
 }