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 までご連絡ください。

Deepseekへの最初のAndroidアクセスの背後：女性の力を見るMar 12, 2025 pm 12:27 PM

AIの分野での中国の女性の技術力の台頭：Deepseekの女性の技術分野への貢献とのコラボレーションの背後にある物語は、ますます重要になっています。中国の科学技術省からのデータは、女性科学技術労働者の数が巨大であり、AIアルゴリズムの開発においてユニークな社会的価値感度を示していることを示しています。この記事では、携帯電話の名誉に焦点を当て、その背後にある女性チームの強さを探り、Deepseek Bigモデルに最初に接続し、技術の進歩を促進し、技術開発の価値座標系を再構築する方法を示します。 2024年2月8日、Honorは、Deepseek-R1 FullbloodバージョンのBig Modelを正式に立ち上げ、Android Campで最初のメーカーになり、Deepseekに接続し、ユーザーから熱狂的な反応を喚起しました。この成功の背後にある女性チームメンバーは、製品の決定、技術的なブレークスルー、ユーザーを行っています

Deepseekの「驚くべき」利益：理論的利益率は545％です！Mar 12, 2025 pm 12:21 PM

DeepseekはZhihuに関する技術記事をリリースし、Deepseek-V3/R1推論システムを詳細に導入し、初めて主要な財務データを開示し、業界の注目を集めました。この記事は、システムの毎日のコストの利益率が545％に高いことを示しており、グローバルなAIビッグモデルの利益の新たな高値を設定しています。 Deepseekの低コスト戦略は、市場競争において有利になります。モデルトレーニングのコストは同様の製品の1％から5％であり、V3モデルトレーニングのコストはわずか5576百万米ドルであり、競合他社のコストよりもはるかに低くなっています。一方、R1のAPI価格設定は、Openaio3-Miniの1/7〜1/2です。これらのデータは、DeepSeekテクノロジールートの商業的実現可能性を証明し、AIモデルの効率的な収益性も確立します。

Mideaは、最初のDeepSeekエアコンを起動します。AIVoiceInteractionは400,000コマンドを達成できます！Mar 12, 2025 pm 12:18 PM

Mideaは、Deepseek Big Model -Midea Fresh and Clean Air Machine T6を装備した最初のエアコンをリリースします。このエアコンには、環境に応じて温度、湿度、風速などのパラメーターをインテリジェントに調整できる、高度な空気インテリジェントな駆動システムが装備されています。さらに重要なことは、DeepSeek Big Modelを統合し、400,000を超えるAI Voiceコマンドをサポートすることです。 Mideaの動きは、業界での激しい議論を引き起こし、特に白物と大規模なモデルを組み合わせることの重要性を懸念しています。従来のエアコンの単純な温度設定とは異なり、Midea Fresh and Clean Air Machine T6は、より複雑で曖昧な指示を理解し、家庭環境に従って湿度をインテリジェントに調整し、ユーザーエクスペリエンスを大幅に改善します。

2025年のトップ10のベスト無料バックリンクチェッカーツールMar 21, 2025 am 08:28 AM

ウェブサイトの構築は最初のステップに過ぎません：SEOとバックリンクの重要性ウェブサイトを構築することは、それを貴重なマーケティング資産に変換するための最初のステップにすぎません。検索エンジンでのWebサイトの可視性を向上させ、潜在的な顧客を引き付けるために、SEO最適化を行う必要があります。バックリンクは、ウェブサイトのランキングを改善するための鍵であり、Googleや他の検索エンジンにWebサイトの権限と信頼性を示しています。すべてのバックリンクが有益であるわけではありません：有害なリンクを特定して回避するすべてのバックリンクが有益であるわけではありません。有害なリンクはあなたのランキングに害を及ぼす可能性があります。優れた無料のバックリンクチェックツールは、ウェブサイトへのリンクのソースを監視し、有害なリンクを思い出させます。さらに、競合他社のリンク戦略を分析し、それらから学ぶこともできます。無料のバックリンクチェックツール：SEOインテリジェンスオフィサー

Baiduの別の国の製品は、Deepseekに接続されていますか？Mar 12, 2025 pm 01:48 PM

DeepSeek-R1はBaidu LibraryとNetDiskを支援します。深い思考と行動の完璧な統合は、わずか1か月で多くのプラットフォームに迅速に統合されました。大胆な戦略的レイアウトにより、BaiduはDeepSeekをサードパーティモデルのパートナーとして統合し、それをそのエコシステムに統合します。これは、「ビッグモデル検索」の生態学的戦略の大きな進歩を示しています。 Baidu SearchとWenxin Intelligent Intelligent Platformは、DeepSeekおよびWenxin Bigモデルの深い検索関数に最初に接続し、ユーザーに無料のAI検索エクスペリエンスを提供します。同時に、「Baiduに行くときにあなたが知っている」という古典的なスローガンとBaiduアプリの新しいバージョンは、WenxinのBig ModelとDeepseekの機能も統合し、「AI検索」と「ワイドネットワーク情報の改良」を起動します。

GOでネットワークの脆弱性スキャナーを構築しますApr 01, 2025 am 08:27 AM

このGOベースのネットワーク脆弱性スキャナーは、潜在的なセキュリティの弱点を効率的に識別します。 Goの同時機能機能を速度で活用し、サービスの検出と脆弱性のマッチングが含まれます。その能力と倫理を探りましょう

Web開発のための迅速なエンジニアリングMar 09, 2025 am 08:27 AM

コード生成のAIプロンプトエンジニアリング：開発者ガイドコード開発の風景は、大きな変化を遂げています。大規模な言語モデル（LLMS）と迅速なエンジニアリングのマスタリングは、今後数年間で開発者にとって非常に重要です。 th

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

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