1. container queriesとは？

container queriesは、その名の通り、コンテナ要素のサイズに基づいてスタイルを適用できる機能です。
従来のメディアクエリはビューポートのサイズにしか対応できませんでしたが、container queriesを使えば、より柔軟でコンポーネント指向なレスポンシブデザインが可能になります。

例えば、以下のようなケースで活躍します。

• カード型コンポーネントを配置する際、コンテナのサイズに応じてレイアウトを変える
• サイドバー内のコンテンツを、サイドバーの幅に合わせて調整する
• 複雑なUIにおいて、特定の要素の親要素サイズに応じてスタイルを変える

2. container queriesの使い方

container queriesを使うには、まず、コンテナとして機能させたい要素にcontainer-typeプロパティを設定します。
container-typeには以下の値を指定できます。

• size: コンテナのサイズに応じてスタイルを適用します。
• inline-size: コンテナのインラインサイズ（水平方向のサイズ）に応じてスタイルを適用します。
• normal: コンテナとして機能させないデフォルトの設定です。

.card-container {
  container-type: inline-size;
}

そして、@containerルールを使って、コンテナのサイズに応じたスタイルを指定します。@containerルールの構文は、メディアクエリとよく似ています。

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    container-type: inline-size;
}
.card {
  flex-basis: calc(50% - 10px);
  background-color: #f0f0f0;
  padding: 15px;
}

@container (max-width: 400px) {
  .card {
    flex-basis: 100%;
  }
}

この例では、.card-containerがコンテナとして機能し、その幅が400px以下になると、.cardの幅が100%になるように指定しています。

実践的な例
カード型コンポーネントのレイアウトをcontainer queriesで制御する例を見てみましょう。

<div class="card-container">
  <div class="card">
    <h3>カード1</h3>
    <p>コンテンツ1</p>
  </div>
  <div class="card">
    <h3>カード2</h3>
    <p>コンテンツ2</p>
  </div>
  <div class="card">
    <h3>カード3</h3>
    <p>コンテンツ3</p>
  </div>
</div>

CSSは以下の通りです。

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  container-type: inline-size;
}

.card {
  flex-basis: calc(50% - 10px);
  background-color: #f0f0f0;
  padding: 15px;
}

@container (max-width: 400px) {
  .card {
    flex-basis: 100%;
  }
}

このコードでは、.card-containerの幅が400px以下になると、.cardが1列に並ぶように指定しています。これにより、カードコンテナのサイズが変わっても、適切なレイアウトを保つことができます。

3. has()セレクタとは？

has()セレクタは、指定した条件に一致する子要素を持つ要素を選択できるセレクタです。
これまでは、親要素から子要素を選択することはできましたが、子要素の状態によって親要素のスタイルを変えることはできませんでした。has()セレクタの登場により、これが可能になりました。

例えば、以下のようなケースで活躍します。

• フォームにエラーメッセージがある場合に、フォームのスタイルを変える
• 特定のクラスを持つ要素がある場合に、親要素のスタイルを変える
• ナビゲーションに特定の要素がある場合に、ナビゲーションのレイアウトを変える

4. has()セレクタの使い方

has()セレクタは、以下のような構文で使用します。

親要素:has(子要素のセレクタ) {
  /* スタイル */
}

例えば、.parent要素の中に.child要素がある場合に、.parent要素にスタイルを適用したい場合は、以下のように記述します。

.parent:has(.child) {
    background-color: #e0f7fa;
}

フォームにエラーメッセージがある場合に、フォームのスタイルを変える例を見てみましょう。

<div class="form-container">
  <form>
    <input type="text" placeholder="名前">
    <div class="error-message">名前を入力してください。</div>
  </form>
    <form>
    <input type="email" placeholder="メールアドレス">
  </form>
</div>

.form-container form {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

.form-container form:has(.error-message) {
  border: 2px solid red;
}

.error-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 5px;
}

このコードでは、.error-messageを持つform要素のボーダーが赤色になります。これにより、エラーが発生しているフォームを視覚的に強調できます。

まとめ

container queriesとhas()セレクタは、どちらもCSSの表現力を大幅に向上させる強力な機能です。
これらの機能を使いこなすことで、より柔軟で高度なWebデザインが可能になります。
ぜひ、あなたのWeb制作に取り入れてみてください！

今回の記事は以上です。
これからもWeb制作に役立つ情報を発信していきますので、お楽しみに！

次のステップへ：あなたの可能性を広げる

「HTMLコーディングやプログラミングを覚えたい・・・でも何をすればいいのかわからない」

そんな方におすすめなのが、コーチングです。

ご自身のお悩みに合わせた、トレーニング内容のコーチングサービスを提供しております。
HTMLやCSS、プログラミングを初歩から学びたいというニーズにも対応しております。

小さな目標を達成しながらコツコツを積み上げていくので、難しいことはありません。○○みたいに仕事ができるようになりたい。ウェブデザイナーになってみたいなどなど、あなたが思う未来の自分になれたらどおですか？

今すぐお問い合わせください！
デジタルスキルアップサポート