Q&A
再現環境やこれまで試したことなどを詳細欄に記載した方が良いかもしれません。
色々と試してみましたが画像が表示されないため、ご教授お願い致します。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content="***"> 6<link href="css/reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="css/style.css" rel="stylesheet" type="text/css" madia="screen"> 8<link rel="shortcut icon" href="/favicon.ico"> 9<meta name="viewport" content="width=device-width,initial-scale=1.0"> 10 <title>***｜***</title> 11 </head> 12 <body> 13 <header> 14 <div class="top"></div> 15 <div class="wapper"> 16 <a href="./"><img class="mainlogo" src="imges/ks_logo10.png" alt="コーポレートマーク"></a> 17 </div> 18 </header> 19 <main> 20 <div class="topnav"> 21 <nav> 22 <ul> 23 <li><a href="#">HOME</a></li> 24 <li><a href="#">会社案内</a></li> 25 <li><a href="#">製品紹介</a></li> 26 <li><a href="#">お問い合わせ</a></li> 27 </ul> 28 </nav> 29 </div> 30 <div class="topga"> 31 <img class="pc" src="imges/P1290025-8.JPG" alt=""> 32 <p><span class="kyatticopy">***</span>***<br><br><br> 33 ***</p> 34 <img class="moble" src="imges/topimges.JPG" alt=""> 35 </div> 36 <div class="meinsetumei"> 37 <h2 class="meinsyousai1">***</h2> 38 <h2 class="meinsyousai"><span class="henkou">***</span>で<span class="henkou2">***</span>***<br>***</h2> 39 </div> 40 <div class="topmongon"> 41 <p>***<br><span class="tokusyu">***</span>***<br> 42 ***</p> 43 </div> 44 <div class="topics"> 45 <h2>TOPICS</h2> 46 <h3 class="kako">***</h3> 47 <p class="setumei">***<br> ***<br> 48  ***<br></p> 49 <h3 class="kako">***</h3> 50 <p class="setumei">***<br> ***<br></p> 51 <p class="sonota">***</p> 52 </div> 53 <h2 class="topsyoukai">商品紹介</h2> 54 <div class="henatuki-contener"> 55 <div class="syoukai"> 56 <img class="gazou" src="imges/aburairi.png"> 57 <p class="syouhin"><a href="#">油入変圧器</a></p> 58 </div> 59 <div class="syoukai"> 60 <img class="gazou" src="imges/hsyukansiki.jpg"> 61 <p class="syouhin2"><a href="#">乾式変圧器</a></p> 62 </div> 63 <div class="syoukai"> 64 <img class="gazou" src="imges/morudo.jpg"> 65 <p class="syouhin3"><a href="#">モールド変圧器</a></p> 66 </div> 67 </div> 68 </main> 69 <footer> 70 <div class="sita"> <img src="imges/ks_logol.png" alt=""> 71 </div> 72 <p class="adores">***</p> 73 <div class="itibansita"> 74 <p class="tel">TEL<span class="fax">FAX</span></p> 75 </div> 76 <p class="kopi">©All rights reserved</p> 77 </footer> 78 </body> 79</html>
CSS
1@charset "utf-8"; 2/* CSS Document */ 3html{ 4 font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','Osaka-mono', 'MS Gothic', 'monospace','ＭＳ Ｐゴシック',sans-serif 5} 6.henatuki-contener{ 7 margin: 0 auto; 8 width: 960px; 9 max-width: 100%; 10 display: flex; 11} 12.topsyoukai{ 13 font-size:28px; 14 margin: 0 auto; 15 width: 960px; 16 max-width: 100%; 17 padding-top: 30px; 18 border-bottom: solid 1px #dcdcdc; 19} 20.syoukai{ 21 margin-top: 50px; 22 margin-left: auto; 23 margin-right: auto; 24 align-items: center; 25} 26.syouhin{ 27 text-decoration: none; 28 margin-left: auto; 29 margin-right: auto; 30 width: 110px; 31} 32.syouhin2{ 33 text-decoration: none; 34 margin-left: auto; 35 margin-right: auto; 36 width: 110px; 37} 38.syouhin3{ 39 text-decoration: none; 40 margin-left: auto; 41 margin-right: auto; 42 width: 120px; 43} 44.gazou{ 45 width: auto; 46 height: 250px; 47} 48 49/* ########### 500px以下 ########### */ 50@media screen and (max-width: 400px){ 51main{ 52 width: 100%; 53} 54 55.henatuki-contener{ 56 display:flex; 57 flex-flow: column; 58 justify-content:space-between; 59 width: 400px; 60 max-width: 100%; 61} 62.gazou{ 63 width: auto; 64 height: 150px; 65} 66 67.setumei02{ 68 font-size: 32px; 69 background-color: #afeeee; 70 height: 200px; 71 width: auto; 72 text-align: center; 73 margin: 0 auto; 74 width: 960px; 75 max-width: 100%; 76} 77/*製品紹介*/ 78.seihintopga{ 79 position: relative;/*相対配置*/ 80} 81.aburairi-contener{ 82 display:flex; 83 flex-flow: column; 84 margin: 0 auto; 85 width: 400px; 86 max-width: 100%; 87} 88.syouhinsiyou{ 89 width: 30px; 90 height: 100px; 91 margin-left:10px; 92 margin-right: auto; 93 max-width: 100%; 94 border: solid 1px #90ee90; 95} 96}
回答2件
0
PC表示ではレイアウトが崩れているように見えるけど、PC/SPとも画像が表示されないというような事象は確認できませんでした。
確認はブラウザで行っていますでしょうか？？
別の質問者とのやり取りでDWのプレビューウインドで試したというのを見たので気になりました。
投稿2021/06/13 14:26
総合スコア508
スマホで確認しておりますが、画像が表示されません。
こんな事は初めてなのでどこから手をつけていいかわからず困っています。
```
.gazou {
width: auto;
height: 250px;
}
```
これが怪しいかもですね。
SP表示時は以下にしたらどうでしょう？
```
.gazou {
width: 100%;
height: auto;
}
```
あとはここら辺も直した方が良いと思いました。SPでは幅固定にしたら横スクロールが発生します。
最終的にどういうレイアウトにしたいかは私には分かってないですが^^;
```
.henatuki-contener {
margin: 0 auto;
width: 960px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
}
```
ご返答いただきありがとうございます
どちらもためしてみましたが変化ありませんでした
となると、HTMLの問題ではない可能性もありますね。画像データの問題の可能性も出てきます。
例えば
jpg拡張子のものをエンコードせずにファイルのリネームのみでpngにかえたなどをすると、ブラウザによっては画像が表示されません。
試しに他の画像と差し替えてみるなどうでしょう？
クロームのデベロッパーツールで画面を広げていくと画像は表示されます。
ですのでパスは間違えていないと思われます。
私の指摘はパスの間違えではなく、エンコードの指摘でした。
ただ、上記の回答からそれもないなと思いました。
0
コードを拝見しました。
imgタグのsrcに書かれたパスが正しいか確認するしかないように思います。
フォルダimgesに画像がすべて入っていますでしょうか？
一般的にimagesにするからaが抜けてパスが間違っているなどかなと考えています。
ご確認ください。
投稿2021/06/13 11:11
総合スコア563
DWで作成しているのですが、PCの横幅に広げていれば画像は表示されます。
プレビューウインドウを狭めていくと画像が表示されなくなります。ですので、パスは間違えておりません。
どこがおかしいのかわからない状況です。
.henatuki-contenerの display:flex;をけしてみたのですが変化ありませんでした。
flexで設定している所のみ画像が消えるのはなぜでしょうか。今までこんな状況になった事がないので困っています。ご教授お願い致します。
わかりました。
ちなみに画像のサイズはいかほどでしょうか？
こちらで再現するかやってみます。
今のところ、画面幅４００程度で横から縦に切り替わることのみ確認しています。
画像が３個並べているのですが、一枚目がｗ96*ｈ89、ｗ150*ｈ114、ｗ150*ｈ128です。
返信がおそくなり申し訳ありません。
google chromeで確認しておりますが、再現しませんでした。
重ねてもうしわけありません。
あなたの回答
tips
プレビュー
