- ベストアンサー
固定メニューの更新
- みんなの回答 （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を使用するのが一般的です。具体的には <!--#include virtual="ssi/siteMap.txt" --> とナビゲーションを入れたいところに書いておく [例] <body> <header> <h1>このページの見出し</h1> <!--#include virtual="ssi/siteMap.txt" --> </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> <!--#include file="test.txt" --> </header> <section> <h2>本文</h2> </section> <footer> <h3>A nice footer</h3> </footer> </body> </html> 同じ場所にtest.txtを置く 動かなければ、.htaccess に AddHandler server-parsed shtml ダメならサーバーの説明を読むこと。禁止されているかも。 なおはじめに示した方法は絶対パスで書かれていますから、サーバーのどこからでも有効ですがテストのためにローカルサーバーが必要になります。
関連するQ&A
- 左メニューをCSSで固定したい
左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。 固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。 これをフレームを使わずに作ることはできないでしょうか？ できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu ■ main ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる ・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール 【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }
- ベストアンサー
- HTML
- メニューを固定したい
Dreamweaverはメニューを一度作ると新規に作るページに自動的に挿入されるみたいですが、もうちょっと安いソフトで同じことはできないものでしょうか？ フレームはできれば使いたくないと考えています。 ビルダーではメニューの固定はできませんよね？ HP作成ソフト以外でも、メニュー固定できる方法がありましたら教えてください。 よろしくおねがいいたします。
- 締切済み
- ホームページ作成ソフト
- メニューやフッターの一括更新
最近Dreamweaverを使い始めました。練習に小さなサイトを作ってみましたが、こちらで作るページでは、メニューやフッターをLibraryにして、一括で更新できるようにしましたので便利です。でも、これと同じことは、ホームページビルダーではできないのでしょうか？ Dreamweaverを使い始めてみたものの細かいところが覚えきれず、以前から使っているホームページビルダーのほうがやはり使いやすいのです。 ビルダーで、「メニューやフッターの一括更新」は可能でしょうか？可能であればその方法をお教えください。 （個人ページです。ページ数はとても多いです。不可能ならDreamweaverに慣れるしかないのですが・・・）
- 締切済み
- HTML
- メニューについて
こんにちは。私の少ない知識＆経験では分からないので、教えてください。（質問が） webサイトのメニューですが、1ページごとの設定ではなく、フレームのように全てのページに一括でメニュー設定する方法ってありますでしょうか？ つまりメニューのリンク先が変更になった場合、フレームだと、1ページのUPだけで済みますが、フレームでない場合、メニューを設定している全てのページのUPをしないといけなくなります。 これを、メニュー設定ページだけの修正・更新で済むようにすることは可能なのでしょうか？ 会社のホームページを作成しており、社長から「メンテナンスが楽になるよう、CSSだけの変更で済むよう作成出来ないのか」と指示されました。 私の少ない知識では、CSSはデザインなので、メニューのリンク設定は無理だと思うのですが…。 ページ数が多いサイトなどは、どのように管理されているのでしょうか？ 方法があれば教えていただけませんか?
- ベストアンサー
- HTML
- CSSのみを修正してデザインを更新することはどの程度まで可能でしょうか？
今やHTMLファイルは文書情報のみ、デザインはCSSで定義することが常識となっています。ふと思ったのですが、この規則に厳密にのっとり、HTMLファイルをいじることなくCSSファイルの修正のみでデザインを変更することはどの程度可能でしょうか？ 簡単な例を出しますと、以下のようなソースが書かれたHTMLファイルがあるとします。 <div id="top">This is top.</div> <div id="middle">This is middle.</div> <div id="bottom">This is bottom.</div> これを、CSSの修正のみで上からbottom, middle, topの順にできますでしょうか？HTMLファイルを編集してdiv要素の順番を変えればすぐ解決できる問題ですが、せっかく文書とデザインを分離する手法が提唱されたので、なんとかCSSの修正のみで対応してみたいと思うのです。 なぜこんなこと考えたのかと言いますと、Webデザインのお仕事では数千ページという大規模構成のサイト更新を請け負うこともあると聞き、どういう方法がもっとも楽に更新できるだろうかと考えたからです。もちろん、CSSのみでの修正が可能だとしてもHTML文書の構造がめちゃくちゃではどうしようもありませんが、HTML文書の構造がしっかりしている（完全にValidなXHTML）場合、なんらかの効率的な手段があるんじゃないかと思いまして。
- ベストアンサー
- CSS
- [DreamWeaver8]テンプレートはどこまで更新
Dreamweaver8のテンプレートを使ってサイトを制作しています。 テンプレート内にプルダウンメニューを使ったリンクを貼ったのですが、 Value内は自動でリンク更新してくれないみたいで、 数十ページを手作業で更新するのは辛いので何か代替案があればお願いします。 [補足・・・必要なければすみません。] ・テンプレートは Base-main－コンテンツ1 ├コンテンツ2 └コンテンツ3－コンテンツ3-1 のように階層にしています。
- 締切済み
- CSS
- 効率の良いメニュー
はじめまして。早速ですが質問をさせていただきます。 今、サイトを作っているのですが、メニューの更新について不便な点があります。 常に左端にメニューを置いているのですが、 ひとつメニューが増えるとすべてのページを改変しなければなりません。 メニューとページをフレームで分ければ良かったのですが、 検索エンジンなどへの対応などを考えると、 フレームは使いたくなかったんです。 何か、便利というか、効率の良い方法はないでしょうか？ あまり詳しくないですが、cgiなどそっちの方面や、 メニューの表示の形を変えるなどアドバイスいただければ、 お願いします。
- ベストアンサー
- レンタルサーバ・ASP
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか？現状では無理なのでしょうか？ HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
- 左メニュー部分をひとつのhtmファイルだけで済ませられないか？
ショッピングサイトを制作しています。使用ソフトはDreamweaver 4です。 左にメニューの画像があり、その他「特集」などのテキストが記載している場合、ページが多くなると左の共通部分は、変更のたびにすべてのページを変更しないといけなくなるため、ひとつのファイルだけ変更すればすべてのページで、左の部分が変更するようにしたいと思っています。で、フレームセットを使用してみました。フレームの境界線は動かさないようにはできたのですが、スクロールバーがでてきたり、画像がうごいたり、画像の長さだけフレームの長さを調節しても実際はもっと長くなったりと、うまくいきません。それとも、cssファイルなど使えばできるのでしょうか？？あるいは何も使わないのが常識なのでしょうか？プロの方はどうしてるのでしょうか？
- ベストアンサー
- HTML
- HTMLとCSSのホームページのメニューについて
HTMLで過去に作った経験がほんのちょっとだけありますが、フレームは良くないという話もあり、 またCSSたどあとで全HTMLファイルに対してちょっとの変更でデザイン変更できるということで 今回初めてHTMLとCSSでホームページを作りました。 HTMLはまあこんな感じです。 <body> <div id="contener"> <div id="contents"> <h1>内容だよ</h1> <div id="main"> <p>内容１だよ<br> 内容１ですよ。内容１だって言ってるよ。 </p> </div> </div> </div> <!--左サイドメニューバー（回り込み）--> <ul> <li><a href="index.html">TOPページ</a></li><br> <li><a href="naiyou1/naiyou1.html">naiyou1</a></li> <li><a href="naiyou2/naiyou2.html">naiyou2</a></li> <li><a href="naiyou3/naiyou3.html">naiyou3</a></li> <li><a href="naiyou4/naiyou4.html">naiyou4</a></li> </ul> </body> で今困っているのが「左サイドメニューバー（回り込み）」以下で左にメニューバーを設置しているのですが、 コンテンツを増やすたび”全部のHTMLにリンク１行追加しなければいけない”ということです。 <li><a href="naiyou5/naiyou5.html">naiyou5</a></li> とか。 数ページだったらなんてことないのですが、２０ページ以上になると手間ですし、ミスも出てきます。 こんなものなのでしょうか？ いい知恵があれば教えてください。
- ベストアンサー
- CSS
お礼
…… 素人の技術では少々(というか結構)ハードルの高い技ですね💦 ちょっとSSIを勉強してきます！ divに関しては初めて知りました、 早いうちに気付けて、助かりました ありがとうございました。