ソースコード
index.html
HTML
1<html> 2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 3 <head> 4 <title>MonsterLifeServer</title> 5 <link rel="stylesheet" href="css/style.css" type="text/css"> 6 <link rel="timeoptions" href="js/time.js" type="text/javascript"> 7 <link rel="shortcut icon" href="img/favicon.ico"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 9 </head> 10 <body> 11 <div id="header"></div> 12 <br><br><hr> 13 <div align="center"> 14 <p> 15 16 <h1>MonsterLifeServer</h1><br><br> 17 18 MonsterLifeServerとは <b>Minecraft JavaEdition</b> のミニゲーム企画サーバーです。<br> 19 MonsterLifeServer稼働日<br> 20 2018年9月10日 0時0分0秒<br><br> 21 22 MonsterLifeServerが稼働してから<br> 23 24 </p> 25 </div> 26 27 <div id="footer"></div> 28 </body> 29</html>
style.css
css
1body { 2 background: url("../img/back.jpg") no-repeat fixed; 3 z-index: 0; 4 }
header.html
html
1<html lang="ja"> 2<head> 3<link rel="stylesheet" href="include/css/header.css"> 4</head> 5<body> 6<div class="Header"> 7<div align="left"> 8<b>MonsterLifeServer</b> 9</div> 10<a href="index.html"><img src="img/logo.png"width="80px" height="80px" alt="welcome"></a> 11</div> 12</body> 13</html>
header.css
css
1body{ 2margin: 20px; /* bodyの外側の余白を指定する */ 3padding: 50px 10px 50px 10px; /* bodyの内側余白を指定する(上:右:下:左) */ 4z-index: 1; 5} 6.Header { 7position: fixed; /* ヘッダーを固定する */ 8top: 0; /* 上部から配置の基準位置を決める */ 9left: 0; /* 左から配置の基準位置を決める */ 10width: 100%; /* ヘッダーの横幅を指定する */ 11height: 100px; /* ヘッダーの高さを指定する */ 12padding: 10px; /* ヘッダーの余白を指定する(上下左右) */ 13background-color: #747474; /* ヘッダーの背景色を指定する */ 14color: #ff0000; /* フォントの色を指定する */ 15} 16.Contents { 17width: 100%; /* コンテンツの横幅を指定する */ 18overflow: auto; /* コンテンツの表示を自動に設定(スクロール) */ 19}
#試したことなど
ヘッダーを表示するためのコード<div id="header"></div>
を一度消して、読み込む。そしてまた書き込み(<div id="header"></div>
を)読み込むと表示されました。しかし、少ししたらまた、見えなくなりました。
#聞きたいこと
ソースコードだけでおかしなところはありますでしょうか?
#フォルダの位置
test ├css │ └style.css ├img ├include │ ├css │ │ ├footer.css │ │ └header.css │ ├footer.html │ ├header.html │ └notice.html ├js │ └time.js └index.html
回答1件
あなたの回答
tips
プレビュー