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

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

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

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

Q&A

解決済

1回答

922閲覧

Chromeで表示される画像がieで表示されない

Yuriplllll

総合スコア29

CSS3

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

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

0グッド

0クリップ

投稿2020/02/17 20:48

Windows10のpcでHP作成をしてChromeでは正常に画像が表示されるのにIeでは表示されません。
Ieの設定を見るとMicrosoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18363
@2019Microsoft
となっています。
最初のimgのclass名headerimgが表示されません。
下のimgのclass名header_tellとheader_contactの画像は表示されます。
画像のプロパティを見るとディスク上のサイズheaderimgは24.0 KB (24,576 バイト)、header_tellは4.00 KB (4,096 バイト)、header_contactは4.00 KB (4,096 バイト)です。
重さが関係しているのでしょうか?

htmlです。

<body> <div class="box1"> <img class="headerimg" src="images/%E3%81%82%E3%81%84%E3%81%AF%E3%82%89%E6%AD%AF%E7%A7%91%E5%8C%BB%E9%99%A2-header_01.jpg" alt=""> <div class="box1_inner"> <div class="site"> <h1 id="home"><a href="#">あいはら歯科医院<br><span>AIHARA DENTAL CLINIC</span></a></h1> </div> <div class="header_info"> <div class="header_01"><a href="tel:0222886116"><img class="header_tell" src="images/%E3%81%82%E3%81%84%E3%81%AF%E3%82%89%E6%AD%AF%E7%A7%91%E5%8C%BB%E9%99%A2_05.png"></a></div> <div class="header_02"><img class="header_contact" src="images/%E3%81%82%E3%81%84%E3%81%AF%E3%82%89%E6%AD%AF%E7%A7%91%E5%8C%BB%E9%99%A2_10.png" alt=""></div> </div> <nav class="menu"> <ul> <li><a href="#home">ホーム<br><span>Home</span></a></li> <li><a href="#contact">お問い合わせ<br><span>Contact</span></a></li> <li><a href="#access">アクセス<br><span>Access</span></a></li> <li><a href="#medical">診療について<br><span>Medical</span></a></li> <li><a href="#opentime">診察時間<br><span>Opentime</span></a></li> </ul> </nav> </div> </div> <body>

以下がCSSです。

@charset "utf-8"; /* ======================================== リセットcss ========================================= */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html{overflow-y: scroll;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;} input, textarea{margin: 0; padding: 0;} ol, ul{list-style:none;} table{border-collapse: collapse; border-spacing:0;} caption, th{text-align: left;} a:focus {outline:none;} div#test { text-align: center; position: absolute; top: 0; opacity: 0.5; } /* micro clearfix */ .cf:before, .cf:after { content: " "; display: table; } .cf:after {clear: both;} .cf {*zoom: 1;} /* フォント */ body{ margin: 0; padding: 0; font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; color: #000000; width: 100%; height: auto; } /* 左右の余白 */ .box1_inner,.box2,.box4_inner,.box5,.box6_inner{ padding-left: 50px; padding-right: 50px; margin: 0; } .box1_inner,.box2,.box4_inner,.box5,.box6_inner{ vertical-align: bottom; clear: both; } /* ヘッダー */ /* ヘッダー画像 */ .box1{ position: relative; padding-bottom: 30px; } .headerimg{ width: 100%; height: 200px; display: block; margin: auto; right: 0; left: 0; } .site{ margin: 0; padding: 0; width: auto; } .site h1 a{ font-size: 45px; text-decoration: none; color: #333232; font-weight: 600; } .site span{ font-size: 15px; display: block; margin-left: 40px; } /* ヘッダー画像とテキストを重ねる */ .hederimg{ position: relative; } .site h1 { position: absolute; top: 10%; width: 100%; } .menu ul{ position: absolute; right: 8%; } /* お問い合わせの設定 */ .header_info{ display: flex; flex-direction: column; display: block; } /* お問い合わせをヘッダー画像に重ねる*/ .header_info{ position: absolute; top: 0; right: 5%; padding: 0 10px 0 10px; background-color: rgba(255,255,255,0.8); } /* ナビゲーション */ .menu ul{ margin-top: 10px; padding: 0; width: auto; } .menu ul li a{ font-size: 20px; text-decoration: none; padding: 15px; display: block; text-align: center; color: #333232; font-weight: 600; } .menu ul li a:hover{ color: #eeeeee; } .menu ul li a span{ font-size: 12px; display: block; } .box1:after{ content: ""; display: block; clear: both; } .site h1{ float: left; } /* ナビゲーションを横に並べる */ .menu ul:after{ content: ""; display: block; clear: both; } .menu li{ float: left; width: auto; } /* ナビゲーションを右端へ移動 */ .menu ul{ float: right; }

他に必要な情報があれば申しつけ下さい。
よろしくお願いいたします。

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

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

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

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

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

kyoya0819

2020/02/17 21:11

それ、IEではなくEdgeという別のブラウザです。
退会済みユーザー

退会済みユーザー

2020/02/17 22:01

「表示されない」とは具体的にどうなるのか、スクリーンショットは貼れませんか? そもそも画像は存在するのですか (ファイル名が間違っているとか、.jpg ではなくて .png の間違いとか言うことはないですか)? サーバーの設定の問題とか言うことはないですか?
tabuu

2020/02/17 23:12

コピペミスかもしれませんが下のbodyタグが閉じてません。またhtmlタグやheadタグを付けても同様でしょうか?
guest

回答1

0

ベストアンサー

コードはよく見ていませんが、少なくとも日本語名のファイルは不具合を引き起こす可能性が高いので、英語にすることをお勧めします。

投稿2020/02/17 21:29

kyoya0819

総合スコア10429

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

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

m.ts10806

2020/02/18 01:04

これぽいですね。 body内に限っては致命的となりそうな文法エラー(HTMLint調べ)はないですし。
Yuriplllll

2020/02/18 16:10

ありがとうございます。 ファイル名を日本語から英字に変えたら画像が表示されました。 また機会がありましたらよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問