質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

226閲覧

AmazonのLPの模写

japan_japan

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/12 10:41

前提・実現したいこと

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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

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

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

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

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

投稿2019/11/12 12:09

編集2019/11/12 12:10
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

japan_japan

2019/11/12 12:59

コメントありがとうございます。 「navbarというIDがない」については、抜粋した箇所にnavbarがなかっただけで、もっと前の部分にはnavbarがありました。 CSSスプライトというのは、初めて聞きました。 実はこのアマゾンのLPの模写は、ある指導者からの課題で出されたものです。 ProgateでHTML CSS Javascript jQueryを終了した後、ボックスを下→右へスライダさせる課題、クリックで左から右へ出てくるサイドバーの作成の課題、を完了した後に、出された課題です。 私がCSSスプライを学習しているわけではないです。
guest

0

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

投稿2019/11/12 13:39

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

japan_japan

2019/11/13 02:52

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

2019/11/13 03:16

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

2019/11/13 06:50

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

2019/11/13 06:57

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

2019/11/16 01:38

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

0

ちょっとわかりませんが

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

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

投稿2019/11/12 11:34

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

japan_japan

2019/11/13 02:53

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

2019/11/13 02:54

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

2019/11/16 01:38

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

0

[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をブラウザのアドレス欄に入れて、アクセスしてみてください。

投稿2019/11/12 11:17

coco_bauer

総合スコア6915

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

japan_japan

2019/11/12 11:28

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

2019/11/12 12:32

表示されたのは、一つの画像ファイル(URLの末尾が ".png"となっていることから、PNGフォーマットの画像ファイルだと判ります)、壁紙です。 そこにイメージマップ(画像内の範囲を指定して、そこにリンクを張る機能)を重ねて、壁紙の部分部分がリンクになっているWebページが構成されているのだと思います。 質問の該当のソースコードに書かれているのは、WebページのHTMLソースの一部にすぎません。HTMLのソース全体を眺めれば、イメージマップなどについての記述が見つかると思いますよ。
japan_japan

2019/11/16 01:39

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問