Q&Aサイトのページが増えていくのにつれて、いちいちHTMLコードを全ページにコピペしていくのがだんだんと嫌になり、（フッター部分の仕様変更が特に大きい）インターネットで検索したらJavascriptで共通化したらという結論になりました。
そこで、試行錯誤の上でJSで組むことになり、外部CSSでの読み込みも成功しました。しかしページ上では、HTMLとCSSで組んでいた時はヘッダーのタイトルバーが幅いっぱい出ていたのに、JSで書き直すとなぜか左寄せになり、ナビゲーションが終わるとすぐ切れてしまいます。そのため、全体を中央ぞろえにしましたが、ナビゲーションバーのバーが均等に広がっていないというのが一番の課題です。
これって、JSでの仕様なのでしょうか。それとも、もし解決できるとしたらどこをどういう風に直せばいいか教えてください。
※ レスポンシブ設定をかけていますが、モバイルの表示に問題はありません。
＜HTML+CSSだけ＞
HTML
1<header> 2 <h1> 3 タイトル 4 </h1> 5 <nav> 6 <ul class="nav"> 7 <li> 8 <a href="xxx.html"> 9 １ 10 </a> 11 </li> 12 <li> 13 <a href="#aaa"> 14 ２ 15 </a> 16 17 </li> 18 <li> 19 <a href="yyy/"> 20 ３ 21 </a> 22 23 </li> 24 <li> 25 <a href="zzz/"> 26 4 27 </a> 28 </li> 29 <li> 30 <a href="5/"> 31 43 32 </a> 33 </li> 34 <li> 35 <a href="https://go.gl/" target="_blank"> 36 ??? 37 </a> 38 39 </li> 40 </ul> 41 </nav> 42 43 </header>
css
1/*ヘッダー*/ 2header h1 { 3 text-align: center; 4 font-family: 'Meiryo'; 5} 6 7header a { 8 text-decoration: none; 9 color: black; 10} 11 12nav{ 13 background: #0399fc; 14 text-align:center; 15} 16 17.nav { 18 margin: 0 auto; 19 display:inline-block; 20 padding: 0; 21 text-align:center; 22} 23 24 header ul::after { 25 content: ""; 26 clear: both; 27 display: block; 28 } 29 30header li { 31 list-style-type: none; 32 text-align: center; 33 width: 16.66%; 34 float: left; 35 background: #0399fc; 36} 37 38header ul li a { 39 display: block; 40 width: 210px; 41 line-height: 50px; 42 margin: 5px; 43 color: white; 44 background: #000080; 45 text-decoration: none; 46} 47 48 header ul li a:hover { 49 background: #7fb3f3; 50 }
ーーー
JSで組んだ時
javaScript
1function header() { 2 var html = ""; 3 4 //HTML 5 html += '<header>'; 6 html += '<h1><a href="../../../../../index.html">タイトル</a></h1>'; 7 8 html += '<ul class="nav">'; 9 html += '<nav>'; 10 html += '<li><a href="../../../../../a.html">A</a></li>'; 11 html += '<li><a href="../../../../../b.html">B</a></li>'; 12 html += '<li><a href="../../../../../C/">C</a></li>'; 13 html += '<li><a href="../../../../../D/">D</a></li>'; 14 html += '<li><a href="../../../../../../E/">E</a></li>'; 15 html += '<li><a href="F.html" target="_blank">F</a></li>'; 16 html += '</nav>'; 17 html+='</ul>'; 18 html+='</header>'; 19 20 document.write(html); 21 document.write(' <link rel="stylesheet" href="../../../../../comp/header.css" type="text/css" /> '); 22 23}
この時のCSS
css
1/*ヘッダー*/ 2 3header h1 { 4 text-align: center; 5 font-family: 'Meiryo'; 6} 7 8header a { 9 text-decoration: none; 10 color: black; 11} 12 13nav{ 14 background: #0399fc; 15 text-align:center; 16 background: #0399fc; 17} 18 19.nav { 20 margin: 0 auto; 21 display:inline-block; 22 padding: 0; 23 text-align:center; 24} 25 26 .nav ul::after { 27 content: ""; 28 clear: both; 29 display: block; 30 } 31 32.nav li { 33 list-style-type: none; 34 text-align: center; 35 width: 16.66%; 36 float: left 37} 38 39.nav nav li a { 40 display: block; 41 width: 210px; 42 line-height: 50px; 43 margin: 5px; 44 color: white; 45 background: #000080; 46 text-decoration: none; 47} 48 49 .nav ul li a:hover { 50 background: #7fb3f3; 51 }
回答3件
0
ベストアンサー
おそらくですが、liとli aのwidthが単位違いでおかしくなっているのではないかと…
あと、CSSの記述に統一性がないので、揃えた方が良いですよ。
HTML
1<header> 2 <h1></h1> 3 <nav> 4 <ul> 5 <li><a></a></li> 6 </ul> 7 </nav> 8</header>
この構成であれば、headerにIDかClassを指定して、例；仮にheaderというIDにした場合
CSS
1#header {} 2#header h1 {} 3#header nav {} 4#header nav ul {/*navは省略可*/} 5#header nav ul::after {/*navは省略可*/} 6#header nav ul li {/*nav ulは省略可*/} 7#header nav ul li a {/*nav ul liは省略可だけどh1にトップページへのリンクを付ける場合などは必要*/} 8#header nav ul li a:hover {}
これでレスポンシブでScript適用とかがなければ、他のClass指定は必要なしです。
投稿2017/04/27 07:55
総合スコア1084
0
仕様がはっきりわからないのですがdocument.writeはまずいんじゃないでしょうか？
適当な受け皿を用意してinnerHTMLに流し込んでやればよいのでは？
ただ共通項目をjsなどユーザー環境に任せるのはあまり得策とはいえません
サーバーサイドのプログラムで処理するのが妥当です。
投稿2017/04/27 07:33
総合スコア114812
0
Javascript
1html+='<ul class="nav">'; 2html+='<nav>';
のソースコードを逆にするだけでHTML+CSSだけの時とまったく同じ表示になりました！順序が逆だったみたいですｗ
投稿2017/04/27 08:12
総合スコア21
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。