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

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

ログイン後にコピー

上記のマークアップには、グリッド内の各画像に対して複製する必要があるイメージセル要素の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</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>

ログイン後にコピー

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

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

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

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

<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は、各画像セルと閉じるボタンをクリックすると、.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画像では、同じアスペクト比の画像を使用して均一なレイアウトを作成します。画像のアスペクト比が異なる場合、レイアウトは同じように見えない場合があります。