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

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

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

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

0回答

859閲覧

IEでbackground-imageの表示が遅いです。

mcy

総合スコア25

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/09/16 06:21

編集2022/01/12 10:55

bodyにbackground-image(擬似要素(before))を設定しているのですが、
IE11でサイトを表示する際に、アクセス時は表示されず、メニューボタン(ハンバーガーメニュー)を押したタイミングで表示されます。
どなたか原因をご教示いただけると幸いです。
よろしくお願いいたします。

html

1<!DOCTYPE html> 2<html> 3<head> 4割愛 5</head> 6<header> 7 <div id="head" class="before"> 8 <div id="menuWrapper"> 9 <a id="menuButton"><span>MENU</span></a> 10 </div> 11 <img id="headLogo" class="logoHide" src="image/logoMark.png" alt="ロゴマーク"> 12 <nav class="nav close" id="nav"> 13 <ul class="navList"> 14 <li><a id="moveTop" href="#head">Top</a></li> 15 <li><a id="moveAbout" href="#about">About</a></li> 16 <li><a id="moveProduct" href="#product">Service</a></li> 17 <li><a id="moveContact" href="#contact">Contact</a></li> 18 </ul> 19 </nav> 20 </div> 21</header> 22<main> 23 <!-- About --> 24 <section> 25 <div id="about"> 26      割愛 27 </div> 28 </section> 29 <!-- Product --> 30 <section> 31 <div id="product"> 32 割愛 33 </div> 34 </section> 35 <!-- Contact --> 36 <section> 37 <div id="contact"> 38 割愛 39 </div> 40 </section> 41</main> 42<footer> 43 割愛 44</footer> 45<script src="js/ofi.js"></script> 46<script src="js/jquery-3.4.1.min.js"></script> 47<script src="js/main.js"></script> 48

css

1body:before { 2 content: ""; 3 display: -webkit-block; 4 display: -ms-block; 5 display: block; 6 position: fixed; 7 top: 0; 8 left: 0; 9 z-index: -1; 10 width: 100%; 11 height: 100vh; 12 background: url("image/bg.jpg") center no-repeat; 13 background-size: cover; 14} 15

js

1'use strict'; 2{ 3 //query,ID,class取得 4 var body = document.querySelector("body"); 5 var head = document.getElementById('head') 6 var headLogo = document.getElementById('headLogo'); 7 var menuWrapper = document.getElementById('menuWrapper'); 8 var menuButton = document.getElementById('menuButton'); 9 var nav = document.getElementById('nav'); 10 var moveTop = document.getElementById('moveTop'); 11 var moveAbout = document.getElementById('moveAbout'); 12 var moveProduct = document.getElementById('moveProduct'); 13 var moveContact = document.getElementById('moveContact'); 14 15 //ページ読み込み時処理 16 window.onload = function(){ 17 //画面をゆっくり明るくする 18 head.classList.remove('before'); 19 head.classList.add('after'); 20 //ロゴをゆっくり表示 21 headLogo.classList.remove('logoHide'); 22 headLogo.classList.add('after'); 23 } 24 25 //読み込み時とリサイズ時、高さを画面いっぱいにする 26 $(function () { 27 $("#head").css("height",$(window).outerHeight()); 28 $(window).resize(function(){ 29 $("#head").css("height",$(window).outerHeight()); 30 }); 31 }); 32 //メニューボタン押下時処理 33 menuWrapper.onclick = function() { 34 //メニューが隠れている場合 35 if (nav.classList.contains('close')){ 36 //メニューを開く 37 nav.classList.remove('close'); 38 nav.classList.add('open'); 39 //背景を固定する 40 body.classList.add('fixed'); 41 //メニュー表示中の場合 42 } else { 43 //メニューを閉じる 44 nav.classList.add('close'); 45 nav.classList.remove('open'); 46 //背景固定を解除 47 body.classList.remove('fixed'); 48 } 49 };

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

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

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

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

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

m.ts10806

2019/09/16 06:25

>bodey 「body」ですね >IE11で IE11以外ではどうなのでしょうか >:before JavaScriptを切った場合はどうなりますか? あと、HTMLもご提示ください。 どのような画像なのか(ファイルサイズや縦横幅など)も追記願います
mcy

2019/09/16 07:24

ご回答ありがとうございます。 HTMLを追記しました。 IE11以外では未確認です。 画像は1.2MBで2288 × 1436です。 javascriptを切ってChromeで確認したところ、bg-imageは正常に表示されました。(IEでは未確認) 以前はbeforeではなくbodyにbg-imageを記述していましたが、ios端末でうまく表示されないとのことでしたので擬似要素に記述するようになりました。 よろしくお願いいたします。
m.ts10806

2019/09/16 07:31

あえーっと・・・ たぶんそこまで時間がかかることではないですし、 コメントを書くのももったいないので「未確認」はなるべく確認してから結果を教えてほしいところです。 問題切り分けに必要な情報なので「未確認」とされても「確認してください」としかいえませんし
mcy

2019/09/16 08:02

大変失礼しました。 >JavaScriptを切った場合はどうなりますか? background-imageが表示されました。 >IE11以外ではどうなのでしょうか 現在仮想環境でIE11のみ確認できる状況ですので、明日以降IE10以下での表示を確認し、追記させていただきます。 お手数おかけしております。
aKusano

2019/09/16 21:49

> >IE11以外ではどうなのでしょうか > 現在仮想環境でIE11のみ確認できる状況ですので、明日以降IE10以下での表示を確認 えっと、IE以外のブラウザ(ChromeとかFirefoxとかSafariとか)ではどうなるのか? ということを確認して欲しいのだと思いますよ。。。
mcy

2019/09/16 22:07

Chrome、Safari、Firefoxでは正常に表示されます。
yambejp

2019/09/17 01:17

なんとも言えませんがbody:beforeをやめるという選択肢はありませんか?
mcy

2019/09/17 02:51

以前はbodyに直接bg-imgをかけていましたが、それだとiPhoneとiPadにbackground-size: coverとbackground-attachmentが使えなかったので、beforeを使っています。 そちらも含め、何かいい解決法はないかと思っております。。 最終は@mediaでiPadの最大サイズ以下はbefore、以上はbodyにbg-imgをかけようと考えています。
kyoya0819

2019/09/17 02:54

IEだけだったらUser-agentでもいい気がする
mcy

2019/09/17 09:23

useragentですね。 一度試してみます。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問