HTML: CSS コンテナ クエリを使用して画像のサイズを変更する方法!

ウェブサイトを構築するときに画像を使用するよりも素晴らしいことは何か知っていますか? HTML と CSS を使用して、画像のように見えて動作するものを作成してみてはいかがでしょうか。そしてご存知のとおり、これはコンテナー クエリを使用することで非常に簡単になりました。この投稿では、HTML と CSS を使用して画像のような広告を作成します。

次に、それを押しつぶしたり、拡大したり、ドキュメント内の他の場所に移動したりする際に、画像のように動作させるようにします。よし、チェックしてみよう！

さて、私たちが構築しているサイトのサイドバーにこの Vans の広告があります。これは現在画像です。

これにより、編集が困難になります。何かを変更する必要がある場合、デザイナーはそれを更新し、新しいイメージを提供する必要があります。

また、高密度ディスプレイと低解像度ディスプレイの両方で鮮明に表示されるように、ソース セットで使用する複数のバージョンが必要になる可能性があります。

したがって、私たちはそれを HTML に変換する必要があります。どうすればこれができるでしょうか？

画像とビューポートユニットの使用に関するいくつかの欠点

おそらくビューポート ユニットを使用することもできますが、サイズが異なるさまざまな場所に広告を配置する場合は、追加のコードを追加する必要があります。これは、すべてがコンテナのサイズではなくビューポートに基づいているためです。

したがって、うまくいくことはできましたが、少し面倒になる可能性があります。代わりに、コンテナ クエリとコンテナ クエリ ユニットを使用できます。コンテナ クエリはメディア クエリに少し似ていますが、ビューポート全体ではなく、ページ内の特定のコンテナのサイズに基づいています。

CSSのcontainer-typeプロパティを使用したコンテナのセットアップ

さて、何から始めるのかチェックしてみましょう。

ここではかなり良いように見えますが、応答はどうなるのでしょうか?

ああ、テキストと枠線のサイズは変わらないので、このままではかなり壊れているので、多少の愛情が必要です。さて、ここですでに行っていることの 1 つは、コンテナが画像と同じように応答できるようにするaspect-ratioを使用していることです。これですべて問題ありません。

 figure { aspect-ratio: 1 / 1.5; }

コンテンツが正しく応答するように、コンテンツのすべてのサイズを変更するだけです。ここでの最初のステップは、ディメンションを監視するコンテナを提供することです。これが図の要素になります。

ここでコンテナ クエリを使用するには、コンテインメント コンテキストと呼ばれるものを定義する必要があります。これは、 container-typeプロパティを使用して行うことができます。この例では、インライン サイズの値を使用できます。

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

これは、インライン サイズ (この場合は Figure の幅) に基づいてサイズを決定するコンテナーをセットアップします。これで、監視するコンテナーができたので、コンテナー クエリ ユニットを自由に使用できるようになりました。そして、選択肢はたくさんあります。次の単位値のいずれかを使用できます。

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

ここでは、 cqiを使用します。これは、コンテナー クエリ インラインの略だと思います。 1 cqiユニットはコンテナの幅の 1 パーセントに相当します。 OK、必要なのはこれだけです。ここからは、必要に応じて単位を設定するだけです。

ここには、この広告内のいくつかの要素で使用されるカスタム プロパティがいくつかあります。

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

このフレームがコンテナの外縁からどれだけ挿入されるかから始めましょう。 3 cqiにしましょう。

 figure { ... --frameInset: 3cqi; }

次にここで枠線の太さを設定しましょう。この場合、 max関数を使用して境界線が 1 ピクセル未満に縮小し続けるのを防ぎますが、境界線が 1 ピクセルの値より大きい限り動的であるようにしたいと考えています。

したがって、最初の値は 1 ピクセルで、2 番目の値は動的値です。それを 1 cqiにしましょう。

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

さて、メインタイトルである「Vans」のテキストであるstrong要素については、25 cqiにしましょう。そして、タイトルの下のスペースを 3 cqiにしましょう。

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

さて、「オフ・ザ・ウォール」というサブタイトルに移りましょう。メイン タイトルの約半分のサイズになるはずなので、12 個のcqiを試してみましょう。そして、テキストの上のスペースについては、再び 3 つのcqiを使用してみましょう。

 em { font-size: 12cqi; padding-top: 3cqi; }

さて、最後の部分である「since 1966」ラベルでは、フォント サイズを 6 cqiにしましょう。また、上下のスペースには、最大 2 つの値を取るpadding-blockの論理プロパティを使用しています。最初の値はテキストの上の値で、2 番目の値は下のスペースの値です。

それでは、上記の 2 つのcqiを使用してみましょう。また、計算では、 --frameInsetそのままにしておきますが、追加のスペースとして 5 cqiを使用します。

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

わかりました、これは良さそうです。

どのように反応するかを見てみましょう。絞り込むと、すべてが希望どおりに均一に適切に反応します。イメージとしてはかなり似ています。

小さくても見た目はかなり良く、境界線が 1 ピクセル未満に縮小することがないことがわかります。次に、非常に狭い幅に入るとさらに幅が広くなり、それでもすべてが素晴らしく見えます。

これはどれくらいクールですか？ 1 つのスタイル セットで最後まで機能します。前後に拡大縮小すると、見栄えがよくなります。

さらにすごいのは、広告マークアップを取得してメイン列領域に移動すると、すべてが画像の場合と同じように機能し続けることです。

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

これはとても素敵でとてもクールです。これらすべてを実現するには 1 つのスタイル セットしかないことに注意してください。また、メディア クエリは一切含まれていませんでした。コンテナー クエリ全体についてはさらに多くの点があるため、さまざまな側面について説明する今後の投稿に注目してください。

実際の動作を見てみたいですか?

以下の Codepen の例で、デモ コードとこれらのテクニックの例を確認してください。ご質問やご意見がございましたら、お気軽にコメントを残してください。