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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

スマホでレスポンシブ画像を確認すると拡大される

kazuki0316
kazuki0316

総合スコア7

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

1回答

0グッド

0クリップ

498閲覧

投稿2020/01/30 17:57

編集2020/02/06 04:25

前提・実現したいこと

質問を見ていただきありがとうございます。2週間くらい悩んでいる内容ですので解決できると嬉しいです。
また初めて投稿するので不備が多くあると思いますが、足りない情報は言っていただけるとありがたいです。
すぐに追加します。

[内容]
githubにあげているポートフォリオがpcでgooglechromeの検証を見るとレスポンシブできている画像が、スマートフォン(iPhoneのSafari)でgithubを通じて見るとすごく拡大されるに加えて画質が大荒れ。
[pcの場合]
イメージ説明

[スマホ(iPhoneのSafari)の場合]
イメージ説明

html

1**HTML ** 2 <div class="skill"> 3 <h1 class="sec03">Skill</h1> 4 </div>

css

1**CSS ** 2.skill { 3 position: relative; 4 background: url(book.png) no-repeat center center fixed; 5 -webkit-background-size: cover; 6 -moz-background-size: cover; 7 background-size: cover; 8 color: #fff; 9 padding-top: 110px; 10 min-height: 900px; 11 letter-spacing: 2px; 12} 13 14.sec03{ 15 text-align: center; 16 font-size: 30px; 17 line-height: 1.8; 18 text-transform: uppercase; 19 font-family: "Montserrat", sans-serif; 20 margin: 0; 21}

試したこと

background-imageではなくimgを使い行なったところ綺麗な画像で表示できたが、写真が小さくなりすぎたため、できればpc画面に表示されているような綺麗なレスポンシブにしたい。

chrome以外にpcのsafariで確認したが、正常に画像が反映した。そのためスマホ(iPhoneのSafari)の何かしらの影響が原因と考えられた。

javascriptのアニメーションが重いため動かないかと考えて、ファイルを消しましたが効果がなかったです。

<meta name="viewport" content="width=device-width,initial-scale=1.0"> を一度消して見ると画像は綺麗に反映したが、消してしまうとそもそもレスポンシブが対応にならない

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

拙い文章ですが、回答していただけると幸いです。よろしくお願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Takumiboo

2020/01/31 00:27

ご提示のコードと実際の画面が全く違いませんか? また「スマホ」とは具体的に何なんでしょう。(おそらくiPhoneのSafariかとは思いますが。) あとなんでPCの画面はスクリーンショットではなくて写真なんでしょう…
kazuki0316

2020/01/31 03:00

ご指摘ありがとうございます。コードを画面と同じものに編集しました。Takumibooさんのおっしゃられている通りiPhoneのSafariで確認しました。pc画面でスクリーンショットしたものに変更しました。
kazuki0316

2020/02/06 04:27 編集

URL変更のため削除

回答1

0

ベストアンサー

別の質問でも回答したのですが、JPGという拡張子画像のフォーマットは拡大縮小などで劣化しやすい形式となります。
↑の回答に記載のURL確認の上、「どの拡張子でどのサイズの画像を使うか」というところから検討しなおした必要に思います。

投稿2020/01/30 23:22

m.ts10806

総合スコア79963

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Takumiboo

2020/01/31 00:28

画質は置いておいて、写真の一部しか表示されていない(横方向がはみ出ている)ことが質問されている問題なのではないでしょうか。
m.ts10806

2020/01/31 00:39

それもあるかもしれませんね。複数要因は考えられます。 「画質が大荒れ。」と言う部分が気になったための回答でした。
kazuki0316

2020/01/31 03:16

お二方コメントありがとうございます。m.ts10806さんの別の質問を見させていただきました。jpgとpngなどの違いがわかり勉強になりました。しかしpngに変更しても修正は得られませんでした。考えられる原因としてTakumibooさんが言われている、画像が大きすぎて一部しか見えていない可能性が要因の一つかもしれません。このこと解決方法がありましたら教えていただけるとありがたいです。
m.ts10806

2020/01/31 04:38

となるとwidth等を調整すればなんとかなるかもしれません。background-sizeとかですかね。%で指定してみるとか。当然PCでの調整も必要ですがモバイルファーストで作ったほうがSEO的にも優しいです
kazuki0316

2020/01/31 10:55

ありがとうございます。一度試してみます!!
m.ts10806

2020/01/31 10:56

ひとまず質問編集してコード部分をマークダウンのcode機能で対応しておいてください。 また試してみたら「試してみたこと」として”質問本文に”追記してみてください。
kazuki0316

2020/01/31 12:59

code機能対応しました。background: url(book.png) 0 0 no-repeat;に変更すると綺麗に画像が映し出されました。m.ts10806さん、親身に教えてくださりありがとうございます。また質問する機会があると思いますのでその時はまた回答していただけると幸いです。
m.ts10806

2020/01/31 18:24

解決されたようで何よりです。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。