ベストアンサー

固定メニューの更新

2014/05/25 19:32

現在HTML５とCSS3を使って個人のwebサイトを制作中の素人ですやっとベースが出来上がったところですがある疑問が生まれました frameを使わずにメニューをdivで作っているけど… メニューの更新のときにframeと違って 1ページに書いているからメニューのある全ページを書き換えなければいけないのでは！？と、思ったのですがさすがにそんな馬鹿なことはないと思うので… 分かる方、効率の良い方法を教えてくださいませんか非推奨言語、Dreamweaverを使用する場合を除いてでお願いします

kagariya
お礼率37% (36/95)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/26 14:09 回答No.1

＞frameを使わずにメニューをdivで作っているけど… 　HTML5では、DIVは原則使いません。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )］より　簡単に訳すと、『著者は、他に適切な要素がないときの最後の最後の手段としてdiv要素を使うことを強く推奨する。div要素の変わりにより適切な要素を用いることで、読者には寄りよいアクセス性を著者には保守性の向上につながる』　そもそもHTML4の時代から、DIVは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」であって、決してデザインのためじゃありません。　HTML4の時代、ナビゲーションを示すために<div class="nav"></div>とclassを使ってナビゲーションだと示していたものを、HTML5では<nav></nav>とマークアップすることになった。というだけです。　その上で、header内のnav(ナビゲーション)は横並びのボタンにする。 header nav ol{list-style:none;text-align:center;} header nav ol li{display:inline-block;width:18%;} とするということ。　さて、各ページに共通な記事がある場合、ウェブサーバー創成期からあるとっても古い技術ですが、SSIを使用するのが一般的です。具体的には  　とナビゲーションを入れたいところに書いておく [例] <body> 　<header> 　　<h1>このページの見出し</h1>  　</header> 　<section> 　　・・・【中略】・・・　</section> 　<footer> 　</footer> </body> [/ssi/siteMap.txt] 　　<nav> 　　　<ol> 　　　　<li><a href="/">Top</a></li> 　　　　<li><a href="/Diary">日記</a></li> 　　　　<li><a href="/Profile"></a>プロフィール</li> 　　　　<li><a href="/ContactUs">問合せ</a></li> 　　　</ol> 　　</nav> [結果]サーバーから送られるHTMLのソース [例] <body> 　<header> 　　<h1>このページの見出し</h1> 　　<nav> 　　　<ol> 　　　　<li><a href="/">Top</a></li> 　　　　<li><a href="/Diary">日記</a></li> 　　　　<li><a href="/Profile"></a>プロフィール</li> 　　　　<li><a href="/ContactUs">問合せ</a></li> 　　　</ol> 　　</nav> 　</header> 　<section> 　　・・・【中略】・・・　</section> 　<footer> 　</footer> </body> [スタイルシート] header,section,footer{ width:80%;min-width:480px;max-width:900px; margin:0;padding:5px; } header nav ol{ list-style-none; margin:0;padding:0; text-align:center; } header nav ol li{ display:inline-block; width:20%; } 拡張子htmlのファイルをSSIとして動作させるためには.htaccessに AddHandler server-parsed html と書いておく。 ★SSIが使用できない場合は、テキストエディタで一括置換ですかね。 [SSIが可能かテスト] [test.shtml] <!doctype html> <html> <head> <meta charset="utf-8"> <title>サンプル</title> </head> <body> <header> <h1>Your title</h1>  </header> <section> <h2>本文</h2> </section> <footer> <h3>A nice footer</h3> </footer> </body> </html> 同じ場所にtest.txtを置く動かなければ、.htaccess に AddHandler server-parsed shtml ダメならサーバーの説明を読むこと。禁止されているかも。なおはじめに示した方法は絶対パスで書かれていますから、サーバーのどこからでも有効ですがテストのためにローカルサーバーが必要になります。

質問者