スマホで画像が表示できない

HTMLとCSSで自分でwebサイトを作っているんでが、widthによって(PCとスマホで)表示させる画像を変えようと思っているのですが、PCでサイトを開いてウィンドウの横幅を変えると正常に画像が切り替わるのですが、スマホでサイトを開くと何も画像が表示されません。。。

そのサイトのurlが(http://pandaman1482.html.xdomain.jp/)です。
どうか助けてください。。。

退会済みユーザー

2020/12/23 01:02

URLだけ示されると、質問に見せかけたサイト宣伝や広告なのかと身構えてリアクションが少なくなります。質問文中にHTMLソースコードを貼って示すなど工夫をお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

えーっと、Google Chromeのデベロッパーツールの
Toggle Device Toolbarでスマホやタブレットのシミュレーションをさせても
再現するので、まずはそこからお試しください。

style.css で
@media(max-width: 599px){
で示されている中身が、スマホに適用されると考えて、

css
1.top-wrapper{
2  height: 760px;
3  background-image: url("https://twitter.com/pandaman1482148/status/1340614440870236161?s=20");
4  background-size: cover;
5  text-align: center;
6  opacity: 0.6;
7}

みたいな背景画像の指定ミスがあれば、
そりゃ画像なんて表示されませんよね。
画像じゃなく、ただのツイートへのリンクじゃないですか。

そもそもPC向けの箇所でも

css
1.top-wrapper{
2  height: 760px;
3  background-image: url("https://pbs.twimg.com/media/EnK90DBVoAABuvE?format=jpg&name=large");
4  background-size: cover;
5  text-align: center;
6  opacity: 0.6;
7}

みたいな、ツイッターを画像置き場のように使うやり方は、
利用規約違反かもしれません。
画像を自分のサイト上に配置して、そこを示してください。

余談ですが、
<a href="file:///C:/Users/yuya-/OneDrive/Desktop/index.html">
みたいな、パソコン無いファイルへのリンクは修正しましょうね。

HTML5 Reset Stylesheet
の使い方が間違っています。
http://html5doctor.com/html-5-reset-stylesheet/
に対してリンクするだけじゃ適用されません。
示されているスタイルシートのコードを
なにかCSSファイルに書き出した上で、
head要素ないlink要素でそのファイルを示すことで組み込まれます。

投稿2020/12/23 01:14

退会済みユーザー

総合スコア0

pandaman

2020/12/23 03:00

まず、回答ありがとうございます！ Toggle Device Toolbar使ってシュミレーションしてみます！ urlの作り方を、Twitterからのリンクしか思いつかなかったので…やり方を変えて画像を表示しようと思います。リンク修正忘れてました…ご指摘ありがとうございます。 stylesheetの使い方も初心者でまだあやふやでした…勉強のし直しですね… この回答とても参考になりました！本当にありがとうございます。

行動規範の内容に同意します

まず前提として、スマホで表示させたいなら、ビューポート設定をしてください。

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

次に、背景画像のスタイルですが、

css
1/*スマホ用*/
2@media(max-width: 599px){
3
4/* ... */
5
6.top-wrapper{
7  height: 760px;
8  background-image: url("https://twitter.com/pandaman1482148/status/1340614440870236161?s=20");
9  background-size: cover;
10  text-align: center;
11  opacity: 0.6;
12}
13
14/* ... */
15
16}