ウェブサイトを構築するときに画像を使用するよりも素晴らしいことは何か知っていますか? HTML と CSS を使用して、画像のように見えて動作するものを作成してみてはいかがでしょうか。そしてご存知のとおり、これはコンテナー クエリを使用することで非常に簡単になりました。この投稿では、HTML と CSS を使用して画像のような広告を作成します。 次に、それを押しつぶしたり、拡大したり、ドキュメント内の他の場所に移動したりする際に、画像のように動作させるようにします。よし、チェックしてみよう！   https://youtu.be/5ugwp7HlpGs?embedable=true さて、私たちが構築しているサイトのサイドバーにこの 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 ここでは、  を使用します。これは、コンテナー クエリ インラインの略だと思います。 1  ユニットはコンテナの幅の 1 パーセントに相当します。 OK、必要なのはこれだけです。ここからは、必要に応じて単位を設定するだけです。 cqi cqi ここには、この広告内のいくつかの要素で使用されるカスタム プロパティがいくつかあります。   figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; } このフレームがコンテナの外縁からどれだけ挿入されるかから始めましょう。 3  にしましょう。 cqi   figure { ... --frameInset: 3cqi; } 次にここで枠線の太さを設定しましょう。この場合、  関数を使用して境界線が 1 ピクセル未満に縮小し続けるのを防ぎますが、境界線が 1 ピクセルの値より大きい限り動的であるようにしたいと考えています。 max したがって、最初の値は 1 ピクセルで、2 番目の値は動的値です。それを 1  にしましょう。 cqi   figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; } さて、メインタイトルである「Vans」のテキストである 要素については、25  にしましょう。そして、タイトルの下のスペースを 3  にしましょう。 strong cqi cqi   strong { font-size: 25cqi; padding-bottom: 3cqi; } さて、「オフ・ザ・ウォール」というサブタイトルに移りましょう。メイン タイトルの約半分のサイズになるはずなので、12 個の を試してみましょう。そして、テキストの上のスペースについては、再び 3 つの を使用してみましょう。 cqi cqi   em { font-size: 12cqi; padding-top: 3cqi; } さて、最後の部分である「since 1966」ラベルでは、フォント サイズを 6  にしましょう。また、上下のスペースには、最大 2 つの値を取る の論理プロパティを使用しています。最初の値はテキストの上の値で、2 番目の値は下のスペースの値です。 cqi padding-block それでは、上記の 2 つの を使用してみましょう。また、計算では、  そのままにしておきますが、追加のスペースとして 5  を使用します。 cqi --frameInset 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 の例で、デモ コードとこれらのテクニックの例を確認してください。ご質問やご意見がございましたら、お気軽にコメントを残してください。   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

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

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Telegram: クリプト島と本土を結ぶ橋

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Telegram: クリプト島と本土を結ぶ橋

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

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