Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

すべてのフロントエンドデベロッパーが知っておくべき 6 つの CSS スニペット（2023 年）

ツールベルトにふさわしい、強力で安定した CSS を今すぐ使用できます。

Adam Argyle

すべてのフロントエンドデベロッパーは、コンテナクエリの使用方法、スクロールスナップエクスペリエンスの作成方法、グリッドを使用した position: absolute の回避方法、円の迅速な作成方法、カスケードレイヤの使用方法、論理プロパティを使用した少ないコードでのより多くの表現方法を理解しておくべきです。以下に、それぞれの概要を簡単に説明します。

1. コンテナクエリ

10 年連続で最も要望の多かった CSS 機能が、ブラウザ間で安定版となり、2023 年に幅のクエリで使用できるようになりました。

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Browser Support

Source

container

Browser Support

Source

2. スクロールスナップ

スクロールエクスペリエンスをうまく調整すると、他のエクスペリエンスと差別化できます。スクロールスナップは、システムスクロール UX に合わせながら、意味のある停止ポイントを提供するための最適な方法です。

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

この CSS 機能の可能性については、約 25 個のデモを含む Codepen の大規模で刺激的なコレクションをご覧ください。

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. グリッドパイル

単一のセル CSS グリッドで絶対位置を使用しないでください。重ねて配置したら、justify プロパティと align プロパティを使用して位置を調整します。

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

Source

4. クイックサークル

CSS で円を作成する方法はたくさんありますが、これは間違いなく最もシンプルな方法です。

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Browser Support

Source

5. @layer を使用してバリエーションを制御する

カスケードレイヤは、後で検出または作成されたバリアントを、元のバリアントのセットとともにカスケードの適切な場所に挿入するのに役立ちます。

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

その後、まったく別のファイルで、別のランダムなタイミングで読み込まれ、ボタンレイヤに新しいバリエーションが追加されます。まるで、最初から他のバリエーションと一緒に存在していたかのように。

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

Source

6. 論理プロパティで記憶する量を減らし、より多くのユーザーにリーチする

この新しいボックスモデルを覚えておけば、国際的な書き込みモードやドキュメントの方向の左右のパディングやマージンを変更する際に、二度と悩む必要はありません。スタイルを物理プロパティから padding-inline、margin-inline、inset-inline などの論理プロパティに調整すると、ブラウザが調整作業を行います。

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

すべてのフロントエンド デベロッパーが知っておくべき 6 つの CSS スニペット（2023 年） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

1. コンテナクエリ

2. スクロール スナップ

3. グリッド パイル

4. クイック サークル

5. @layer を使用してバリエーションを制御する

6. 論理プロパティで記憶する量を減らし、より多くのユーザーにリーチする

すべてのフロントエンドデベロッパーが知っておくべき 6 つの CSS スニペット（2023 年）

2. スクロールスナップ

3. グリッドパイル

4. クイックサークル