htmlの背景表示について
解決済
回答 5
投稿
- 評価
- クリップ 1
- VIEW 561
htmlにてweb画面を作成しています。自分のローカル環境にて、htmlファイルをダブルクリックして表示すると、背景色は表示されます。しかし、webサーバ（Appache環境）にて実行すると、背景が非表示になってしまい、白くなってしまいます。
どこが悪いのかご教授いただきたくお願いします。下記にhtmlソースコードを記載します。
<!doctype html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<title>ダウンロードページ</title>
<meta name="robots" content="noindex,nofollow" />
<style>
html{
height:100%;
margin:0;
padding:0;
background: -webkit-gradient
(linear, left top, left bottom, color-stop(1.00, #f2f5f6), color-stop(0.00, #c8d7dc));
background: -webkit-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: -moz-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: -o-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: -ms-linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
#container {
width: 600px;
margin: 0px auto;
padding: 30px;
background: rgba(256,256,256,0.7);
border-radius: 10px;
box-shadow:10px #aaa;
height:100%;
-webkit-box-shadow: 0px 0px 5px 3px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 5px 3px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 5px 3px rgba(100, 100, 100, 0.5);
}
h1{
font-size:1.1em;
letter-spacing: 0.1em;
border-bottom:3px dotted #aaa;
padding-bottom:10px;
margin-bottom:1.5em;
}
a.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background-color:#0d57a6;
background: -moz-linear-gradient(
top,
#4185d3 0%,
#0d57a6);
background: -webkit-gradient(
linear, left top, left bottom,
from(#4185d3),
to(#0d57a6));
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #04346c;
-moz-box-shadow:
0px 1px 8px rgba(000,000,000,0.7),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 8px rgba(000,000,000,0.7),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
text-decoration:none;
display: block;
margin: 20px;
}
div.btn{
margin-top: 2em;
margin-bottom: 2em;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<header>
<center><h1 id="title">一覧<br></h1></center>
</header>
<p>モジュールダウンロードページです。</p>
<div class="btn">
<a href="test.bat" class="css3button">１.参加</a>
<Div Align="right"><small>※モジュールです。</small></Div>
</div>
<div class="btn">
<a href="test2.bat" class="css3button">２.認証</a>
<Div Align="right"><small>※モジュールです。</small></Div>
</div>
<div class="btn">
<a href="test3.bat" class="css3button">３.変更</a>
<Div Align="right"><small>※モジュールです。</small></Div>
</div>
</div>
</body>
</html>
宜しくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
IE10のグラデーション構文は、最新のW3C仕様のみのサポートとなりますので、
background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);
ではなく、
background: linear-gradient(to bottom, #c8d7dc 0%, #f2f5f6 100%);
でないと効かないはずです。
まずはそちらでIE10で表示されるか確認してください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
htmlが宣言されてないからじゃないですか？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
試しにインラインで書かれてみてはいかがでしょう。
<html style="background: linear-gradient(top, #c8d7dc 0%, #f2f5f6 100%);">投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
<html>自身は描画されないので、表示されたとしても仕様外かバグコンパチビリティです。そもそも<html>は<head>と同じく、幅/高さをもっていません。
<html>に適用するのはInheritされるものだけにしましょう。Inheritされないbackgroundなどはそれぞれの要素(今回の場合だと<body>)に適用してください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2016/05/06 14:25
a.css3button {
以下に記述したのですが、変化なしです。
2016/05/06 14:30
a.css3buttonの話はしてないと思いますが。。。
まぁよく見たらa.css3buttonのグラデ構文もW3C標準仕様の構文が記載されていないので、このままではIE10ではグラデ表示されませんけどね。
2016/05/17 16:56