html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <title>たいとる</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> 10 <!-- アイコンフォントの利用方法 http://fortawesome.github.io/Font-Awesome/ --> 11 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 12 <link rel="stylesheet" href="css/default.css"> 13 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 14 <script> 15 // 画面上部にスクロールするボタン 16 $(function() { 17 var pageTop = $('.btn-pagetop'); 18 pageTop.hide(); 19 $(window).scroll(function() { 20 if ($(this).scrollTop() > 600) { 21 pageTop.fadeIn(); 22 } else { 23 pageTop.fadeOut(); 24 } 25 }); 26 pageTop.click(function() { 27 $('body, html').animate({ 28 scrollTop: 0 29 }, 500, 'swing'); 30 pageTop.blur(); 31 return false; 32 }); 33 }); 34 35 $(function() { 36 $("#header").load("parts/header.html"); 37 $("#sidemenu").load("parts/sidemenu.html"); 38 $("#footer").load("parts/footer.html"); 39 }); 40 </script> 41</head> 42 43<body id="top"> 44 <div id="header"></div> 45 46 47 <div class="body"> 48 <div id="sidemenu"></div> 49 50 <div class="content"> 51 <div class="article"> 52 <h2 class="article-title">更新履歴</h2> 53 <ul class="article-list"> 54 <li> 55 <span class="label label_danger">New</span> 56 <span class="article-list-date">2017年4月12日</span>作成中。 57 </li> 58 </ul> 59 </div> 60 61 <div class="article"> 62 <h2 class="article-title">このサイトについて</h2> 63 <p class="article-paragraph"> 64 あとでかきます。 65 <br /> 66 </p> 67 </div> 68 </div> 69 </div> 70 <div id="footer"></div> 71 72 <a href="#top" class="btn-pagetop"><i class="fa fa-arrow-up"></i></a> 73</body> 74</html>
どこが原因なのか検討がつかないのでベタ貼りします。
これを表示しようとすると、一瞬body内の更新履歴とこのサイトについてが表示されて
その後に真っ白な画面に遷移してしまいます。
恐れ入りますがお願い致します。
追記---
html
1header.html 2 3<div class="header"> 4 <h1 class="header-title">たいとる</h1> 5</div>
html
1footer.html 2 3 <div class="footer"> 4 <div class="footer-nav"> 5 <ul class="footer-nav-group"> 6 <li><a href="mailto:info@example.com?subject=問い合わせ&body=ご記入ください"><i class="fa fa-envelope-o"></i> Mail</a></li> 7 <li><a href="" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></li> 8 </ul> 9 </div> 10 <div class="footer-text">ホームページに関する注意事項など入ります</div> 11 <div class="footer-copyright">Copyright © 20xx xxxxx.</div> 12 </div>
html
1sidemenu.html 2 3 <div class="nav"> 4 <ul class="nav-group"> 5 <li><a href="/index.html"><i class="fa fa-home"></i> ホーム</a></li> 6 <li><a href="/other/thissite.html">このサイトについて</a></li> 7 <li><a href="/java/javaindex.html">Java</a></li> 8 <li><a href="/other/links.html">リンクとか</a></li> 9 </ul> 10 </div>
CSSはちょっと長くて文字数制限に引っかかってしまいました。
Fc2のテンプレートで書かれてたのをcssファイルにまとめただけになります。
http://web.fc2.com/fc2html/designtemplates/6/
これのstyleタグの中に書かれているものをファイルにまとめた感じです。
回答2件
あなたの回答
tips
プレビュー