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>
宜しくお願いします。
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/06 05:25
2016/05/06 05:30
2016/05/17 07:56