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

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

ただいまの
回答率

90.48%

  • HTML

    9325questions

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

  • CSS

    6040questions

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

htmlの背景表示について

解決済

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 561

kumakumatan

score 127

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,'MS Pゴシック',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">1.参加</a>
            <Div Align="right"><small>※モジュールです。</small></Div>
        </div>

        <div class="btn">

            <a href="test2.bat" class="css3button">2.認証</a>
            <Div Align="right"><small>※モジュールです。</small></Div>
        </div>

        <div class="btn">

            <a href="test3.bat" class="css3button">3.変更</a>
            <Div Align="right"><small>※モジュールです。</small></Div>
        </div>

    </div>

</body>
</html>


宜しくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+1

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

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


ではなく、

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/06 14:25

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

    キャンセル

  • 2016/05/06 14:30

    ん?今回背景が出ないのはhtml要素ですよね?
    a.css3buttonの話はしてないと思いますが。。。

    まぁよく見たらa.css3buttonのグラデ構文もW3C標準仕様の構文が記載されていないので、このままではIE10ではグラデ表示されませんけどね。

    キャンセル

  • 2016/05/17 16:56

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/06 10:53

    ご回答ありがとうございます。
    <!doctype html>
    これが宣言ではないのですか?
    具体的にご教授いただければ幸いです。

    宜しくお願いします。

    キャンセル

  • 2016/05/06 10:59

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

    キャンセル

  • 2016/05/06 11:59

    <!doctype html>
    <html>
    <head>



    と記載したのですが、表示されません。
    ちなみにIEのキャッシュも削除しています。

    宜しくお願いします。

    キャンセル

  • 2016/05/06 12:27 編集

    今、こちらのローカルサーバーで試してみたんですけど
    背景は全域にグラデーションがかかってますねぇ...

    kumakumatanさんのサーバーの設定環境に原因があるんでしょうか?
    だとしたら済みませんが私そんなに詳しくなくって..

    追記----
    ブラウザのデベロッパーツールで原因を確認されてみてはいかがでしょう?

    キャンセル

  • 2016/05/06 12:49

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

    キャンセル

  • 2016/05/06 12:58 編集

    ん~~~ WEBサーバーでも確認しましたが 問題なく背景はかかりますねぇ..

    デベロッパーツールはご利用になられました?
    chromeだと 問題のページを表示して「F12」キーを押すだけです
    エラーがあれば[コンソール]タブで確認できます

    キャンセル

  • 2016/05/06 13:35

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

    キャンセル

  • 2016/05/06 14:00

    ご回答ありがとうございます。
    追記したのですが、変わらないです。。

    キャンセル

  • 2016/05/06 14: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 */

    キャンセル

+1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/06 13:22

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

    キャンセル

  • 2016/05/06 13:27 編集

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/06 14:09

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

    キャンセル

  • 2016/05/06 14:12

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

    キャンセル

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • HTML

    9325questions

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

  • CSS

    6040questions

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