Skip to main content

​
Flexbox

一次元のレイアウトに最適なFlexboxの使用方法を解説します。 
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1;
  min-width: 0; /* オーバーフロー防止 */
}

/* フレックスアイテムの順序変更 */
.item:first-child {
  order: 2;
}

​
Flexboxのベストプラクティス

/* 折り返し可能なグリッドレイアウト */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grid-item {
  flex: 1 1 300px; /* 成長、縮小、基本サイズ */
}

​
CSS Grid

二次元のレイアウトに最適なGrid Layoutの使用方法を解説します。 
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* 領域の名前付け */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }

​
サブグリッド

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

.item {
  display: grid;
  grid-template-columns: subgrid;
}

​
コンテナクエリ

要素のコンテナサイズに基づいてスタイルを変更します。 
.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

​
アスペクト比の制御

.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* カード要素のアスペクト比 */
.card {
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

​
レスポンシブレイアウト

​
メディアクエリとビューポート

/* モバイルファースト */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ビューポートユニット */
.hero {
  height: 100vh;
  padding: clamp(1rem, 5vw, 3rem);
}

​
モダンなセンタリング技術

/* Flexboxを使用したセンタリング */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gridを使用したセンタリング */
.center-grid {
  display: grid;
  place-items: center;
}

/* 絶対配置を使用したセンタリング */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

​
マルチカラムレイアウト

.content {
  columns: 3 300px;
  gap: 2rem;
}

/* カラム内での改ページ防止 */
.card {
  break-inside: avoid;
  page-break-inside: avoid;
}

​
スティッキーポジショニング

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

/* スティッキーサイドバー */
.sidebar {
  position: sticky;
  top: 2rem;
  height: calc(100vh - 4rem);
  overflow-y: auto;
}

​
最新のレイアウトテクニック

​
グリッドマスク

.masked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  mask-image: linear-gradient(to bottom, 
    black calc(100% - 100px),
    transparent);
}

​
スクロールスナップ

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.scroll-item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}
これらのモダンなレイアウト技術は、ブラウザのサポート状況が異なる場合があります。 必要に応じてフォールバックを実装することを検討してください。
複雑なレイアウトを実装する際は、まずシンプルなベースレイアウトを作成し、 段階的に機能を追加していくアプローチを推奨します。