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

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

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

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

CSS

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

Q&A

解決済

5回答

2489閲覧

htmlの背景表示について

kumakumatan

総合スコア213

HTML

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

CSS

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

0グッド

1クリップ

投稿2016/05/06 00:44

htmlにてweb画面を作成しています。自分のローカル環境にて、htmlファイルをダブルクリックして表示すると、背景色は表示されます。しかし、webサーバ(Appache環境)にて実行すると、背景が非表示になってしまい、白くなってしまいます。
どこが悪いのかご教授いただきたくお願いします。下記にhtmlソースコードを記載します。

html

1<!doctype html> 2<head> 3<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS"> 4 5 <title>ダウンロードページ</title> 6 <meta name="robots" content="noindex,nofollow" /> 7 8<style> 9html{ 10 height:100%; 11 margin:0; 12 padding:0; 13 background: -webkit-gradient 14 (linear, left top, left bottom, color-stop(1.00, #f2f5f6), color-stop(0.00, #c8d7dc)); 15 background: -webkit-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%); 16 background: -moz-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%); 17 background: -o-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%); 18 background: -ms-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%); 19 background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%); 20 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; 21} 22 23#container { 24 width: 600px; 25 margin: 0px auto; 26 padding: 30px; 27 background: rgba(256,256,256,0.7); 28 border-radius: 10px; 29 box-shadow:10px #aaa; 30 height:100%; 31 -webkit-box-shadow: 0px 0px 5px 3px rgba(100, 100, 100, 0.5); 32 -moz-box-shadow: 0px 0px 5px 3px rgba(100, 100, 100, 0.5); 33 box-shadow: 0px 0px 5px 3px rgba(100, 100, 100, 0.5); 34} 35 36h1{ 37 font-size:1.1em; 38 letter-spacing: 0.1em; 39 border-bottom:3px dotted #aaa; 40 padding-bottom:10px; 41 margin-bottom:1.5em; 42} 43 44a.css3button { 45 font-family: Arial, Helvetica, sans-serif; 46 font-size: 14px; 47 color: #ffffff; 48 49 padding: 10px 20px; 50 background-color:#0d57a6; 51 52 background: -moz-linear-gradient( 53 top, 54 #4185d3 0%, 55 #0d57a6); 56 background: -webkit-gradient( 57 linear, left top, left bottom, 58 from(#4185d3), 59 to(#0d57a6)); 60 border-radius: 5px; 61 -moz-border-radius: 5px; 62 -webkit-border-radius: 5px; 63 border: 1px solid #04346c; 64 -moz-box-shadow: 65 0px 1px 8px rgba(000,000,000,0.7), 66 inset 0px 0px 2px rgba(255,255,255,0.7); 67 -webkit-box-shadow: 68 0px 1px 8px rgba(000,000,000,0.7), 69 inset 0px 0px 2px rgba(255,255,255,0.7); 70 text-shadow: 71 0px -1px 0px rgba(000,000,000,0.4), 72 0px 1px 0px rgba(255,255,255,0.3); 73 text-decoration:none; 74 display: block; 75 margin: 20px; 76} 77 78div.btn{ 79 margin-top: 2em; 80 margin-bottom: 2em; 81 text-align: center; 82 width: 100%; 83} 84</style> 85 86 87</head> 88 89<body> 90 <div id="container"> 91 92 <header> 93 <center><h1 id="title">一覧<br></h1></center> 94 </header> 95 96 <p>モジュールダウンロードページです。</p> 97 98 <div class="btn"> 99 100 <a href="test.bat" class="css3button">1.参加</a> 101 <Div Align="right"><small>※モジュールです。</small></Div> 102 </div> 103 104 <div class="btn"> 105 106 <a href="test2.bat" class="css3button">2.認証</a> 107 <Div Align="right"><small>※モジュールです。</small></Div> 108 </div> 109 110 <div class="btn"> 111 112 <a href="test3.bat" class="css3button">3.変更</a> 113 <Div Align="right"><small>※モジュールです。</small></Div> 114 </div> 115 116 </div> 117 118</body> 119</html>

宜しくお願いします。

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

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

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

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

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

guest

回答5

0

ベストアンサー

IE10のグラデーション構文は、最新のW3C仕様のみのサポートとなりますので、

CSS

1background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);

ではなく、

CSS

1background: linear-gradient(to bottom, #c8d7dc 0%, #f2f5f6 100%);

でないと効かないはずです。
まずはそちらでIE10で表示されるか確認してください。

投稿2016/05/06 04:52

aKusano

総合スコア3763

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

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

kumakumatan

2016/05/06 05:25

ご回答ありがとうございます。 a.css3button { 以下に記述したのですが、変化なしです。
aKusano

2016/05/06 05:30

ん?今回背景が出ないのはhtml要素ですよね? a.css3buttonの話はしてないと思いますが。。。 まぁよく見たらa.css3buttonのグラデ構文もW3C標準仕様の構文が記載されていないので、このままではIE10ではグラデ表示されませんけどね。
kumakumatan

2016/05/17 07:56

ありがとうございました。何とか表示できました。
guest

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

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

kumakumatan

2016/05/06 04:22

ご返信ありがとうございます。 Windows7 SP1/apache2.2で作成しています。 上記の設定をしても変わりません。 ちなみに、IE(IE10)では背景が非表示になり、chromeでは表示されます。
kentei_syunrai

2016/05/06 04:28 編集

あっ・・・Chromeでは出るんですね。 IE10ってそもそもサポート外な気もしますが、以下が参考になるかもしれません。 http://topweb.co.jp/blog/?p=108 (IE10でグラデーションが効かなくて参った件)
guest

0

htmlが宣言されてないからじゃないですか?

投稿2016/05/06 01:30

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kumakumatan

2016/05/06 01:53

ご回答ありがとうございます。 <!doctype html> これが宣言ではないのですか? 具体的にご教授いただければ幸いです。 宜しくお願いします。
退会済みユーザー

退会済みユーザー

2016/05/06 01:59

`<!doctype html>`はDOCTYPE宣言です この後に`<html>`を記述してみてはどうでしょう?
kumakumatan

2016/05/06 02:59

<!doctype html> <html> <head> ・ ・ ・ と記載したのですが、表示されません。 ちなみにIEのキャッシュも削除しています。 宜しくお願いします。
退会済みユーザー

退会済みユーザー

2016/05/06 03:35 編集

今、こちらのローカルサーバーで試してみたんですけど 背景は全域にグラデーションがかかってますねぇ... kumakumatanさんのサーバーの設定環境に原因があるんでしょうか? だとしたら済みませんが私そんなに詳しくなくって.. 追記---- ブラウザのデベロッパーツールで原因を確認されてみてはいかがでしょう?
tonarino210

2016/05/06 03:49

サーバにファイルを置き、chrome・Edgeで確認しましたがローカルとの差異はありませんでした。(回答にはなりませんが一応報告だけ)
退会済みユーザー

退会済みユーザー

2016/05/06 03:58 編集

ん~~~ WEBサーバーでも確認しましたが 問題なく背景はかかりますねぇ.. デベロッパーツールはご利用になられました? chromeだと 問題のページを表示して「F12」キーを押すだけです エラーがあれば[コンソール]タブで確認できます
退会済みユーザー

退会済みユーザー

2016/05/06 04:35

えぇ~~..chromeでは出来てるんですか?↓@@ じゃじゃ「to bottom」で試されてみては... background: linear-gradient(to bottom, #c8d7dc 0%,#f2f5f6 100%);
kumakumatan

2016/05/06 05:00

ご回答ありがとうございます。 追記したのですが、変わらないです。。
退会済みユーザー

退会済みユーザー

2016/05/06 05:05 編集

IEだけってことになると 原因はブラウザの非対応だと思うんですけど.... こちらのジェネレーターで作成したものですけど 「http://www.colorzilla.com/gradient-editor/」 一度背景部分を下記のソースで試して見られては... background: #c8d7dc; /* Old browsers */ background: -moz-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c8d7dc 0%,#f2f5f6 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c8d7dc 0%,#f2f5f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8d7dc', endColorstr='#f2f5f6',GradientType=0 ); /* IE6-9 */
guest

0

<html>自身は描画されないので、表示されたとしても仕様外かバグコンパチビリティです。そもそも<html><head>と同じく、幅/高さをもっていません。

<html>に適用するのはInheritされるものだけにしましょう。Inheritされないbackgroundなどはそれぞれの要素(今回の場合だと<body>)に適用してください。

投稿2016/05/06 06:21

編集2016/05/06 06:23
sharow

総合スコア1149

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

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

0

試しにインラインで書かれてみてはいかがでしょう。

HTML

1<html style="background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);">

投稿2016/05/06 04:23

kei344

総合スコア69364

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

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

kumakumatan

2016/05/06 05:09

<!doctype html> <html style="background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);"> と記載しても変わらないです。。
kei344

2016/05/06 05:12

回答前にブラウザの確認すればよかったのですが、他の方へのコメント中にIE10でのみの現象との記述がありましたので、aKusanoさんの回答で対応できそうですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問