キーテイクアウト

• Googleの畫(huà)像検索レイアウトを再現(xiàn)するには、畫(huà)像の基本的なHTML構(gòu)造を作成し、CSSでスタイリングし、JavaScriptで機(jī)能を追加することが含まれます。 このプロセスで使用される重要なCSSプロパティには、ディスプレイ、グリッドテンプレートカラム、グリッドギャップ、およびオブジェクトフィットが含まれます。これらのプロパティは、グリッドレイアウトの作成、列の數(shù)とサイズを指定し、グリッドセル間のギャップを設(shè)定し、コンテナにフィットするように畫(huà)像を変更する方法を決定するのに役立ちます。
レイアウトは、個(gè)々のニーズに合わせてカスタマイズできます。これには、グリッド內(nèi)の列の數(shù)とサイズ、グリッドセル間のギャップ、畫(huà)像のサイズの変更が含まれます。さらにカスタマイズするために、追加のCSSプロパティを追加することもできます。 JavaScriptを使用して、
• 機(jī)能を畫(huà)像に追加できます。この例には、クリック時(shí)に畫(huà)像のより大きなバージョンを開(kāi)く畫(huà)像にイベントリスナーを追加し、畫(huà)像フィルタリングやソートなどの機(jī)能を追加することが含まれます。
レイアウトは、CSSのメディアクエリを使用することにより、レスポンシブにすることができます。これらにより、ユーザーの畫(huà)面のサイズに応じてさまざまなスタイルを適用できるようになり、すべてのデバイスに畫(huà)像が適切に表示されるようになります。
私が最近関與したプロジェクトでは、以下に示すスクリーンショットと同様に、Googleの畫(huà)像検索拡張機(jī)能を再作成するように頼まれましたが、剛性グリッド形式。
私の當(dāng)面の反応は、JavaScriptを使用して、私が常にやろうとしていて、最後の手段としてのみ行うレイアウトとボックスモデルのプロパティを設(shè)定する必要があるということでした。すでに完全に機(jī)能した例があったので、私はGoogleがどのようにそれをするかを見(jiàn)るために開(kāi)発者ツールを開(kāi)くことにしました（なぜホイールを再発明しますか？）

>

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

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

基本的なマークアップ

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

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> 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></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> 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></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

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

css

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

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

<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>

畫(huà)像セルに與えられる幅は、100に相當(dāng)して、1列あたりのアイテム數(shù)で割って、パーセンテージとして表されます。この例では、行ごとに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で、タイル張りの畫(huà)像の周りに等しいウィンドウフレーム効果を與えます。これらの値を変更することにより、畫(huà)像間のギャップを増やすことができます。

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

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

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

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

<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要素の最大高さは、初期狀態(tài)で0に設(shè)定されています。 .image-cell要素に.is拡張クラスがある場(chǎng)合、最大高さには500pxの値が與えられます。拡張エリアが増加する場(chǎng)合、領(lǐng)域全體を表示するには、最大高さの値も増加する必要があることに注意してください。 最大高さとマージンボトムに適用される遷移により、拡張エリアが切り替えられたときにスライド効果が可能になります。

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

1. まず、.image-- expandにはbox-sizing：content-boxが與えられます。パディング値をその幅から除外する。
2. .image - expand要素の幅は500％の幅の5倍です。これにより、拡張された領(lǐng)域が.image-gridの幅全體を占めることができます。
殘りのスペースを占有するために、.image - expand要素には5pxのパディングが與えられます。
3. ポジション：相対;左：-5px宣言拡張領(lǐng)域を左にわずかにシフトして、.image-gridパディングの左値を無(wú)効にします。
巧妙なビット

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

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

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

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> 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></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> 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></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

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

最初に、拡張ブロックがどの畫(huà)像に屬しているかを示すための上流の矢?。?p>

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

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

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> 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></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> 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></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

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

jquery

最後に、以下のjQueryは、各畫(huà)像セルと閉じるボタンをクリックすると、.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つの畫(huà)像セルがあることは理想的ではないため、メディアクエリを使用して行ごとのアイテム數(shù)を変更できます。たとえば、以下のCSSは、1行あたり2つの畫(huà)像に減少します。

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

codepenでSitePoint（@sitepoint）によるCSSでGoogle畫(huà)像検索を參照してください。

50個(gè)の畫(huà)像セルを吐き出すために私を救うためにセル関數(shù)を含めることに注意してください。

<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>

サス愛(ài)好家のために

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

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

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

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

??

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

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

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

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

レイアウトを応答するにはどうすればよいですか？ 。メディアクエリを使用すると、ユーザーの畫(huà)面のサイズに応じてさまざまなスタイルを適用できます。たとえば、小さな畫(huà)面のグリッド內(nèi)の列の數(shù)を変更して、畫(huà)像がまだ適切に表示されていることを確認(rèn)できます。このレイアウトは、畫(huà)像だけでなく、他のタイプのコンテンツに使用できますか？

はい、畫(huà)像だけでなく、他のタイプのコンテンツにこのレイアウトを使用できます。これを使用して、テキスト、ビデオ、またはその他の種類のコンテンツを表示できます。表示しているコンテンツのタイプに適合して、CSSプロパティを必ず調(diào)整してください。

どのようにして畫(huà)像にホバーエフェクトを追加できますか？

The：CSSにホバープソイドクラス。たとえば、ユーザーがその上に浮かんだときに畫(huà)像の境界色の色を変更するか、畫(huà)像に関する追加情報(bào)を表示できます。

グリッドセルに畫(huà)像が適切に適合していない場(chǎng)合、畫(huà)像のアスペクト比がグリッドセルのアスペクト比と同じではないためかもしれません。これは、CSSのオブジェクトフィットプロパティを使用して、コンテナに合わせて畫(huà)像のサイズを変更する方法を指定して修正できます。はい、WordPressのようなCMSでこのレイアウトを使用できます。 CSSをテーマのstyle.cssファイルに追加し、HTMLを適切なテンプレートファイルに追加する必要があります。また、WordPressサイトのセットアップに応じて、畫(huà)像のHTMLを動(dòng)的に生成するためにPHPコードを追加する必要があります。

以上がCSSを使用してGoogle畫(huà)像検索レイアウトを再作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。