AmazonのLPの模写

Question

前提・実現したいこと

AmazonのLPの模写
https://www.amazon.co.jp/

発生している問題・エラーメッセージ

初めて利用します。

最上段の「amazon.co.jp　プライムを始める」の作り方が分かりません。

要素の検証を見たところ、「amazon.」「co.jp」はアイコン画像で、「プライムを始める」は文字列で、画像に関しては、いろんなアイコンや文字列が一枚のシート（？）に記載されていて、background-image:url()にシートのURLが入っているだけのように見えます。どうすれば、シートにある各アイコンのみを呼び出すことができるのでしょうか。

該当のソースコード

<div id="nav-logo">
    <a href="/ref=nav_logo" class="nav-logo-link" aria-label="Amazon" tabindex="6">
      <span class="nav-sprite nav-logo-base"></span>
      <span class="nav-sprite nav-logo-ext"></span>
      <span class="nav-sprite nav-logo-locale"></span>
    </a>
  <a href="/prime?ref_=nav_logo_prime_join" aria-label="" class="nav-sprite nav-logo-tagline nav-prime-try" tabindex="7">
    プライムを始める
  </a>
  </div>

#navbar .nav-sprite {
    background-image: url(https://images-fe.ssl-images-amazon.com/images/G/09/gno/sprites/nav-sprite-global_bluebeacon-2x_optimized_layout1._CB468502041_.png);
    background-size: 350px;
}
#nav-logo .nav-logo-base {
    float: left;
    text-indent: -500px;
    background-position: -10px -51px;
    width: 97px;
    height: 30px;
}

試したこと

一度、background-image:url()にシートのURLを入れてみましたが、シート画像は表示されませんでした。

補足情報（FW/ツールのバージョンなど）

Answer 1

#navbar .nav-sprite というセレクター、 navbarというIDがないので無効になってます。
ここを、#nav-logo .nav-sprite に修正すれば画像は表示されるようになります。

このテクニックは、CSSスプライトといわれるものです。
「CSSスプライト」をキーワードにWEB検索してみてください。解説ページがいろいろ見つかると思いますので、それを学習してください。
例えば、CSSスプライトを使ってアイコンを表示する | GRAYCODE HTML&CSS

ただし、冒頭に指摘したこのミスに気が付かない時点で、CSS、HTMLの基本から学習しなおす必要がありそうです。CSSスプライトを使いこなせるスキルに達していないのでは。

また、CSSスプライトは高速化の手段としてもてはやされましたが、最近は下火になってきています。いまから学習するメリットは少ないように個人的には思います。

Comments

[japan_japan]

コメントありがとうございます。

「navbarというIDがない」については、抜粋した箇所にnavbarがなかっただけで、もっと前の部分にはnavbarがありました。
CSSスプライトというのは、初めて聞きました。

実はこのアマゾンのLPの模写は、ある指導者からの課題で出されたものです。

ProgateでHTML CSS Javascript jQueryを終了した後、ボックスを下→右へスライダさせる課題、クリックで左から右へ出てくるサイドバーの作成の課題、を完了した後に、出された課題です。

私がCSSスプライを学習しているわけではないです。

Answer 2

模写の目的次第なのですけど、要素検証で見てしまっては意味がないように思います。
どのような言語も、ですが、1つのことを実現する手段は1つではないので、
「どうやったら実現できるか」を考えるのも課題のテーマの1つだと思いますよ。
ですから「既存の作りと同じようにやる」のではなく「今持っている知識技術で可能な実現方法を考察する」方向にシフトした方が学習効果は上がると思います。

Comments

[japan_japan]

コメントありがとうございます。確かに要素の検証は閲覧するべきではないですね。模写の目的は分かりません。

[m.ts10806]

目的なしにただ作業していてもモチベーションがもたないばかりか何も身に付きませんよ

[japan_japan]

転職活動における作品作りの一つとしてAmazonのLPの模写を与えられました。これが目的ということになるでしょうか・・・

[m.ts10806]

模写で作品と言えるのでしょうか。疑問ですね。
私が面接官なら「自分の作品を持ってきなさい」と一喝しますけど。
せめて自己PR用のWebサイトくらいは作りましょう。そこに作品集的なものを載せるのが楽です。

[japan_japan]

指導者に確認します。ありがとうございました。

Answer 3

ちょっとわかりませんが

問題は、この一覧表からどのように特定のアイコンだけを抽出して、imgタグに反映させるかということです

background-position: -10px -51px;で調整しているのでは？

Comments

[japan_japan]

コメントありがとうございます。別の方がご指摘いただいた、CSSスプライトのことようです。

[kyoya0819]

しっています。なので。具体的に-10px, -51pxで取得できる画像を表示しているのでは？ということです。

[japan_japan]

そのようですね。ありがとうございました。

Answer 4

[background-image:url()のカッコ内に書かれているURL]

https://images-fe.ssl-images-amazon.com/images/G/09/gno/sprites/nav-sprite-global_bluebeacon-2x_optimized_layout1._CB468502041_.png

が背景の画像ではないですか？

上記のURLをブラウザのアドレス欄に入れて、アクセスしてみてください。

Comments

[japan_japan]

コメントありがとうございます。ご指摘のURLをブラウザのアドレス欄に入れてみたところ、アイコンの一覧が表示されます。問題は、この一覧表からどのように特定のアイコンだけを抽出して、imgタグに反映させるかということです。

[coco_bauer]

表示されたのは、一つの画像ファイル(URLの末尾が ".png"となっていることから、PNGフォーマットの画像ファイルだと判ります）、壁紙です。
そこにイメージマップ（画像内の範囲を指定して、そこにリンクを張る機能）を重ねて、壁紙の部分部分がリンクになっているWebページが構成されているのだと思います。

質問の該当のソースコードに書かれているのは、WebページのHTMLソースの一部にすぎません。HTMLのソース全体を眺めれば、イメージマップなどについての記述が見つかると思いますよ。

[japan_japan]

ご回答ありがとうございました。