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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

2回答

3910閲覧

htmlで部品をjQueryのloadで表示ができない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2017/04/14 12:46

編集2017/04/14 13:04

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=問い合わせ&amp;body=ご記入ください"><i class="fa fa-envelope-o"></i>&nbsp;Mail</a></li> 7 <li><a href="" target="_blank"><i class="fa fa-twitter"></i>&nbsp;Twitter</a></li> 8 </ul> 9 </div> 10 <div class="footer-text">ホームページに関する注意事項など入ります</div> 11 <div class="footer-copyright">Copyright &copy; 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>&nbsp;ホーム</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タグの中に書かれているものをファイルにまとめた感じです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/04/14 12:53

header.html, sidemenu.html, footer.html, default.cssの内容を追記していただけませんか?
退会済みユーザー

退会済みユーザー

2017/04/14 12:57

かしこまりました、少々お待ち下さい。
guest

回答2

0

ベストアンサー

こちらではそのような挙動は再現しませんでした。キャッシュの消去をしてから以下のコードをもう一度試してみていただけませんか?
index.html

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="parts/default.css"> 13</head> 14 15<body id="top"> 16<div id="header"></div> 17 18 19<div class="body"> 20 <div id="sidemenu"></div> 21 22 <div class="content"> 23 <div class="article"> 24 <h2 class="article-title">更新履歴</h2> 25 <ul class="article-list"> 26 <li> 27 <span class="label label_danger">New</span> 28 <span class="article-list-date">2017年4月12日</span>作成中。 29 </li> 30 </ul> 31 </div> 32 33 <div class="article"> 34 <h2 class="article-title">このサイトについて</h2> 35 <p class="article-paragraph"> 36 あとでかきます。 37 <br/> 38 </p> 39 </div> 40 </div> 41</div> 42<div id="footer"></div> 43 44<a href="#top" class="btn-pagetop"><i class="fa fa-arrow-up"></i></a> 45<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 46<script> 47 // 画面上部にスクロールするボタン 48 $(function () { 49 var pageTop = $('.btn-pagetop'); 50 pageTop.hide(); 51 $(window).scroll(function () { 52 if ($(this).scrollTop() > 600) { 53 pageTop.fadeIn(); 54 } else { 55 pageTop.fadeOut(); 56 } 57 }); 58 pageTop.click(function () { 59 $('body, html').animate({ 60 scrollTop: 0 61 }, 500, 'swing'); 62 pageTop.blur(); 63 return false; 64 }); 65 }); 66 67 $(function () { 68 $("#header").load("parts/header.html"); 69 $("#sidemenu").load("parts/sidemenu.html"); 70 $("#footer").load("parts/footer.html"); 71 }); 72</script> 73</body> 74</html>

parts/header.html

HTML

1<div class="header"> 2 <h1 class="header-title">たいとる</h1> 3</div>

parts/sidemenu.html

HTML

1<div class="nav"> 2 <ul class="nav-group"> 3 <li><a href="/index.html"><i class="fa fa-home"></i>&nbsp;ホーム</a></li> 4 <li><a href="/other/thissite.html">このサイトについて</a></li> 5 <li><a href="/java/javaindex.html">Java</a></li> 6 <li><a href="/other/links.html">リンクとか</a></li> 7 </ul> 8</div>

parts/footer.html

HTML

1<div class="footer"> 2 <div class="footer-nav"> 3 <ul class="footer-nav-group"> 4 <li><a href="mailto:info@example.com?subject=問い合わせ&amp;body=ご記入ください"><i class="fa fa-envelope-o"></i>&nbsp;Mail</a> 5 </li> 6 <li><a href="" target="_blank"><i class="fa fa-twitter"></i>&nbsp;Twitter</a></li> 7 </ul> 8 </div> 9 <div class="footer-text">ホームページに関する注意事項など入ります</div> 10 <div class="footer-copyright">Copyright &copy; 20xx xxxxx.</div> 11</div>

parts/default.css
入力できなかったので、こちらに記述しました。

投稿2017/04/14 13:15

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/04/14 13:43

ご回答ありがとうございます。 んー、けどやっぱりうまくいかないみたいです。 もう少しやってみてダメそうだったら、 共通化を断念して、1ページ毎に書くようにしてみます。
s8_chu

2017/04/14 13:47

質問文にも記述がありませんでしたが、ブラウザとOSは何を使っているのかを良ければ教えていただけませんか?
退会済みユーザー

退会済みユーザー

2017/04/15 05:38

すいません返事が遅れましたが、 ブラウザはchromeでOSはWindows7です
guest

0

作り直しになってしまうかもしれませんが、わたしが制作中の1500万ページ以上のサイトで、
以下のサイトを参考に作り直ししております…あと何年かかるかな

【JavaScript】ヘッダーなどHTMLの共通部分をJSで外部化してメンテナンス性を高めよう

参考までに

投稿2017/04/14 13:17

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/04/14 13:46

ご回答ありがとうございます。 こういった手法もあるのですね、 ちょっと大変そうですが一つの手段として考えてみようと思います。
LibertyBell3

2017/04/14 14:18

別ファイルのHTMLにあるリンク先には、{$root}を追記して、 表示する場所に、writeなんちゃらと記述する必要があるので、 すでにページが揃っていたら、大変だと思いますね…本当に参考まで
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問