CSSを使用してGoogle画像検索レイアウトを再作成します-IT業界-php.cn

ホームページ

テクノロジー周辺機器

IT業界

CSSを使用してGoogle画像検索レイアウトを再作成します

Joseph Gordon-Levitt

Feb 20, 2025 pm 12:27 PM

CSSを使用してGoogle画像検索レイアウトを再作成します

キーテイクアウト

Googleの画像検索レイアウトを再現するには、画像の基本的なHTML構造を作成し、CSSでスタイリングし、JavaScriptで機能を追加することが含まれます。このプロセスで使用される重要なCSSプロパティには、ディスプレイ、グリッドテンプレートカラム、グリッドギャップ、およびオブジェクトフィットが含まれます。これらのプロパティは、グリッドレイアウトの作成、列の数とサイズを指定し、グリッドセル間のギャップを設定し、コンテナにフィットするように画像を変更する方法を決定するのに役立ちます。
機能を画像に追加できます。この例には、クリック時に画像のより大きなバージョンを開く画像にイベントリスナーを追加し、画像フィルタリングやソートなどの機能を追加することが含まれます。

Googleが構造を2つのDIVに分解し、1つのDIVにはすべての画像セルが含まれており、もう1つのDIVは拡大領域用です。画像がクリックされ（および拡張された）、JavaScriptは、クリックされたDivの行に最後の画像セルの後にスペーサーDivを挿入します。 JavaScriptは、高さを拡張Divと同じに設定し、拡張されたDivをスペーサーDivが占める位置に完全に配置します。これは賢いですが、JavaScriptに大きく依存しているため理想的ではありません。

すべてのレイアウトとボックスモデルのプロパティにCSSを使用して、作業デモに発展することができたという基本的なアイデアがありました。必要な唯一のJavaScriptは、拡張トグルに基づいてクラス名を変更することです。

CSSを使用してGoogle画像検索レイアウトを再作成します基本的なマークアップ

まず、.image __cellとともに.image-gridコンテナを構築する必要があります。これがHTMLです：

<span><span><span><section> class<span>="image-grid"</span>></section></span>
</span>  <span><span><span><div> class<span>="image__cell is-collapsed"</span>>
    <span><span><span><div> class<span>="image--basic"</span>>
      <span><span><span><a> href<span>="#expand-jump-1"</span>></a></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSSを使用してGoogle画像検索レイアウトを再作成します" > id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><div> class<span>="arrow--up"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="image--expand"</span>>
      <span><span><span><a> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></a></span><span><span></span>></span>
</span>      <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSSを使用してGoogle画像検索レイアウトを再作成します" > class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
<span><span><span></span>></span></span></span>

上記のマークアップには、グリッド内の各画像に対して複製する必要があるイメージセル要素の1つの例が含まれています。＃close-jump-1および＃endax-jump-1の識別子に注意してください。その後のHREF属性は、.image__cellに固有のものである必要があります。次のようなハッシュリンク：href = "＃Expand-JUMP-1"を使用すると、ブラウザが押されたときにアクティブな画像セルにジャンプできます。

css

最初に、ボックスサイズ：border-boxを適用します。以下を含むすべての要素に対して：Universalセレクターを使用した擬似要素の後。これにより、幅が固定されたパディング値を組み合わせるため、幅を組み合わせた要素を簡単に処理できます。

.image-grid要素にはclearfixオーバーフローが与えられます：hidden;画像セルフロートに基づいてレイアウトを維持するため

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

画像セルに与えられる幅は、100に相当して、1列あたりのアイテム数で割って、パーセンテージとして表されます。この例では、行ごとに5つのアイテムがあります。つまり、各.image__cellの幅は20％です。

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

パディング：10px 5px 0;パディングと組み合わせた.image-gridに適用：0 5px; on .image - basic、およびheight：10px; .image__cell.is-collapsed .arrow-upで、タイル張りの画像の周りに等しいウィンドウフレーム効果を与えます。これらの値を変更することにより、画像間のギャップを増やすことができます。

最後に、.basic__img画像要素に表示されます：ブロック;間隔の問題を防ぐため。 himax-width：100％;および高さ：自動;宣言により、画像はコンテナの幅にスケーリングできますが、独自の幅を超えないようにします。

以下のCSSは、拡張可能な領域のレイアウトを提供します。

上記のコードから奪うメモが次のとおりです。

カーソルは、崩壊した状態のみである場合に、.imageの上でホバリングするときにポインターに変化します。これにより、画像をクリックすると何かが行われるという視覚的なインジケーターがユーザーに与えられます。

<span><span>.image__cell.is-collapsed .image--basic</span> {
</span>  <span>cursor: pointer;
</span><span>}
</span>
<span><span>.image__cell.is-expanded .image--expand</span> {
</span>  <span>max-height: 500px;
</span>  <span>margin-bottom: 10px;
</span><span>}
</span>
<span><span>.image--expand</span> {
</span>  <span>position: relative;
</span>  <span>left: -5px;
</span>  <span>padding: 0 5px;
</span>  <span>box-sizing: content-box;
</span>  <span>overflow: hidden;
</span>  <span>background: #222;
</span>  <span>max-height: 0;
</span>  <span>transition: max-height .3s ease-in-out,
</span>              margin-bottom <span>.1s .2s;
</span>  <span>width: 500%;
</span><span>}</span>

.image-Expand要素の最大高さは、初期状態で0に設定されています。 .image-cell要素に.is拡張クラスがある場合、最大高さには500pxの値が与えられます。拡張エリアが増加する場合、領域全体を表示するには、最大高さの値も増加する必要があることに注意してください。最大高さとマージンボトムに適用される遷移により、拡張エリアが切り替えられたときにスライド効果が可能になります。

視覚的には、拡張領域を.image-gridと整列させたいと考えています。これを行うには、.image-grid要素に設定された水平パディングを無効にする必要があります。

まず、.image-- expandにはbox-sizing：content-boxが与えられます。パディング値をその幅から除外する。
.image - expand要素の幅は500％の幅の5倍です。これにより、拡張された領域が.image-gridの幅全体を占めることができます。
ポジション：相対;左：-5px宣言拡張領域を左にわずかにシフトして、.image-gridパディングの左値を無効にします。

.image-gridの左側とアライメントして、すべての.image - expand要素を左端にシフトしたい。これを行うために、列の位置に応じて負のマージンを設定します。これは、nth-of-typeが入る場所です

最初に、私はnth-childを使用して同じ効果を達成しましたが、他のプロジェクトでは、iOS8 Safariがこれで非常にバギーであることを発見したため、使用を避けようとします。代わりに、nth-of-typeを使用します。これは、同じ目的に役立つためです。興味があれば、ここでnth-of-typeの簡単な説明を見つけることができます上記のCSSでは、各行の2番目、3番目、および4番目の.image__cell拡張可能な領域をターゲットにしています。マージン左の値は、要素の行の位置にも依存します。各行の最初の要素には、既に希望の位置にあるため、マージン左の値が設定されていないことに注意してください。要素が左からさらに進むほど、拡張可能な領域を左側に戻す必要があります（-100％の増分）。これを行わなければ、拡張可能な領域は、以下に示すように、親に整合します。

また、以下に示すCSSを挿入して、最初の行の最初の.image__cellが、以前の.image__cell要素が拡張されたときにその位置に固執することを確認する必要があります。

<span><span><span><section> class<span>="image-grid"</span>></section></span>
</span>  <span><span><span><div> class<span>="image__cell is-collapsed"</span>>
    <span><span><span><div> class<span>="image--basic"</span>>
      <span><span><span><a> href<span>="#expand-jump-1"</span>></a></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSSを使用してGoogle画像検索レイアウトを再作成します" > id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><div> class<span>="arrow--up"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="image--expand"</span>>
      <span><span><span><a> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></a></span><span><span></span>></span>
</span>      <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSSを使用してGoogle画像検索レイアウトを再作成します" > class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
<span><span><span></span>></span></span></span>

基本的なレイアウトが整っているので、ユーザーエクスペリエンスを向上させるためにいくつかのスタイルを追加できます。

最初に、拡張ブロックがどの画像に属しているかを示すための上流の矢印：

矢印スタイルは、CSSトライアングルを作成することで実現されるため、HTTPリクエストを保存することに注意してください。この効果は、境界を巧みに使用し、高さと幅を0に設定することで簡単に実現できます。また、.image__cell要素が展開されている場合にのみ矢印が表示されたいと思います。これは、.IS拡張クラスの追加によって行われます。最後に、矢印を.image__cell要素の水平中心に留まるようにしたいので、マージン：0 auto;適用されます。 CSSを使用してGoogle画像検索レイアウトを再作成します

これで、ユーザーが拡張エリアを閉じることができる「閉じる」ボタンをスタイリングする準備ができました。

<span><span><span><section> class<span>="image-grid"</span>></section></span>
</span>  <span><span><span><div> class<span>="image__cell is-collapsed"</span>>
    <span><span><span><div> class<span>="image--basic"</span>>
      <span><span><span><a> href<span>="#expand-jump-1"</span>></a></span>
</span>        <span><span><span><img  alt="CSSを使用してGoogle画像検索レイアウトを再作成します" > id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><div> class<span>="arrow--up"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="image--expand"</span>>
      <span><span><span><a> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></a></span><span><span></span>></span>
</span>      <span><span><span><img  alt="CSSを使用してGoogle画像検索レイアウトを再作成します" > class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
<span><span><span></span>></span></span></span>

a：pseudo-elementの前に、domに表示されずに「×」文字をページに挿入し、再び1つのHTTPリクエストを保存することができることに注意してください。挿入された特別な文字は、Boostrapも使用する乗算文字です。

jquery

最後に、以下のjQueryは、各画像セルと閉じるボタンをクリックすると、.is-expandedおよび.is-clapsedクラスの間を単純に切り替えます。

もちろん、「クラスリスト（）」およびその他のネイティブテクニックを使用することで、jQueryを完全に避けることができますが、ポリフィルを喜んでいない限り、深いブラウザのサポートを得ることはできません。グリッドの応答性を

にします

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

小さなデバイス上の各行に5つの画像セルがあることは理想的ではないため、メディアクエリを使用して行ごとのアイテム数を変更できます。たとえば、以下のCSSは、1行あたり2つの画像に減少します。

行ごとの5つのアイテムに関連するCSSが早期に適用されないようにするには、これらの値をリセットするか、プロパティを抽出し、以下のCodepenで行われる独自のメディアクエリに配置する必要があります。

codepenでSitePoint（@sitepoint）によるCSSでGoogle画像検索を参照してください。

50個の画像セルを吐き出すために私を救うためにセル関数を含めることに注意してください。

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

サス愛好家のために

この記事を書くときにSASSを使用しない読者を除外したくありませんでしたが、私もそれらを割引したくありませんでした。このプロジェクトは、行あたりのアイテムの数が非常に多くの異なるプロパティに関連しているため、開発のSASSの優れたユースケースとして自分自身を貸します。

次の代替Codepenデモをご覧ください。そのデモでは、CSSの上部にSASS変数を使用していることに注意してください。これにより、画像、最大画像幅、および行ごとの最小および最大画像の間のギャップを指定できることに注意してください。さまざまな計算を使用して、SASSは提供されたオプションに基づいてCSSにコンパイルされます。行ごとのアイテムの最大数に基づいて最適なメディアクエリを自動的に計算します。これにより、画像は最大寸法内に保持されます。

このSASSバージョンは実験的ですが、通常のバージョンまたはSASSバージョンのいずれかでバグまたは潜在的なコードの改善に気付いた場合はお知らせください。Google画像の再作成に関するよくある質問（FAQ）CSSを使用してレイアウトを検索することについて

CSSを使用してGoogle画像検索レイアウトを再作成するにはどうすればよいですか？

CSSを使用してGoogle画像検索レイアウトを再現するには、いくつかのステップが含まれます。まず、画像の基本的なHTML構造を作成する必要があります。これには、各画像のDIVを作成し、クラスを割り当てることが含まれます。次に、CSSを使用してこれらのDIVをスタイリングして、Google画像のレイアウトを模倣する必要があります。これには、DIVの幅と高さ、およびページ上の位置を設定することが含まれます。また、CSSを使用して画像にホバーエフェクトを追加することもできます。最後に、JavaScriptを使用して画像に機能を追加します。たとえば、画像がクリックされたときに画像の大きなバージョンを開くなどです。

Google画像レイアウトの再作成に使用される重要なCSSプロパティには、ディスプレイ、グリッドテンプレートコラム、グリッドギャップ、オブジェクトフィットが含まれます。ディスプレイプロパティはグリッドに設定されており、グリッドレイアウトを作成します。 Grid-Template-Columnsプロパティは、グリッド内の列の数とサイズを指定するために使用されます。グリッドギャッププロパティは、グリッドセル間のギャップを設定するために使用されます。オブジェクトフィットプロパティは、コンテナに適合するように画像のサイズをどのように変更するかを指定するために使用されます。

自分のニーズに合わせてレイアウトをカスタマイズできますか？あなた自身のニーズに合わせて。グリッド内の列の数とサイズ、グリッドセル間のギャップ、画像のサイズを変更できます。画像に境界や影を追加するなど、レイアウトをさらにカスタマイズするために追加のCSSプロパティを追加することもできます。 JavaScriptを使用した画像。たとえば、イベントリスナーをクリックしたときに画像のより大きなバージョンを開く画像に追加できます。画像のフィルタリングや並べ替えなどの機能を追加することもできます。

レイアウトがGoogleイメージのレイアウトのように見えないのはなぜですか？いくつかの理由があります。まず、CSSプロパティを正しく実装していることを確認してください。次に、画像が同じアスペクト比であるかどうかを確認します。 Google画像では、同じアスペクト比の画像を使用して均一なレイアウトを作成します。画像のアスペクト比が異なる場合、レイアウトは同じように見えない場合があります。

レイアウトを応答するにはどうすればよいですか？。メディアクエリを使用すると、ユーザーの画面のサイズに応じてさまざまなスタイルを適用できます。たとえば、小さな画面のグリッド内の列の数を変更して、画像がまだ適切に表示されていることを確認できます。このレイアウトは、画像だけでなく、他のタイプのコンテンツに使用できますか？
はい、画像だけでなく、他のタイプのコンテンツにこのレイアウトを使用できます。これを使用して、テキスト、ビデオ、またはその他の種類のコンテンツを表示できます。表示しているコンテンツのタイプに適合して、CSSプロパティを必ず調整してください。
どのようにして画像にホバーエフェクトを追加できますか？
The：CSSにホバープソイドクラス。たとえば、ユーザーがその上に浮かんだときに画像の境界色の色を変更するか、画像に関する追加情報を表示できます。
グリッドセルに画像が適切に適合していない場合、画像のアスペクト比がグリッドセルのアスペクト比と同じではないためかもしれません。これは、CSSのオブジェクトフィットプロパティを使用して、コンテナに合わせて画像のサイズを変更する方法を指定して修正できます。はい、WordPressのようなCMSでこのレイアウトを使用できます。 CSSをテーマのstyle.cssファイルに追加し、HTMLを適切なテンプレートファイルに追加する必要があります。また、WordPressサイトのセットアップに応じて、画像のHTMLを動的に生成するためにPHPコードを追加する必要があります。

以上がCSSを使用してGoogle画像検索レイアウトを再作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

2025年に購読する上位21の開発者ニュースレターApr 24, 2025 am 08:28 AM

これらのトップ開発者ニュースレターを使用して、最新のハイテクトレンドについてお知らせください！このキュレーションされたリストは、AI愛好家からベテランのバックエンドやフロントエンド開発者まで、すべての人に何かを提供します。お気に入りを選択し、Relを検索する時間を節約してください

AWS ECSとLambdaを備えたサーバーレス画像処理パイプラインApr 18, 2025 am 08:28 AM

このチュートリアルは、AWSサービスを使用してサーバーレスイメージ処理パイプラインを構築することをガイドします。 APIゲートウェイ、Lambda関数、S3バケット、およびDynamoDBと対話するECS Fargateクラスターに展開されたnext.jsフロントエンドを作成します。 th

CNCF ARM64パイロット：インパクトと洞察Apr 15, 2025 am 08:27 AM

このパイロットプログラム、CNCF（クラウドネイティブコンピューティングファンデーション）、アンペアコンピューティング、Equinix Metal、およびActuatedのコラボレーションであるCNCF GithubプロジェクトのARM64 CI/CDが合理化されます。このイニシアチブは、セキュリティの懸念とパフォーマンスリムに対処します

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6

ビジュアル Web 開発ツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。