- ベストアンサー
html5とcss3、 jQueryで動きのあるメニューを作りたい
- html5とcss3、 jQueryを使用して動きのあるメニューを作成します。センタリングされたcontainerクラス内にはheader、main、sub、footerのクラスが配置されます。メインメニューの項目上にマウスを置くとサブメニューが表示されます。サブメニューの幅は統一されます。jQueryの使用はオプションです。
- html5とcss3、 jQueryを使用して動きのあるメニューを作成します。メニューはcontainerクラス内にセンタリングされます。header、main、sub、footerのクラスが表示され、mainクラス内にはsidebar1、content、sidebar2のクラスが配置されます。メインメニューの項目上にマウスを置くとサブメニューが表示されます。
- html5とcss3、 jQueryを使用して動きのあるメニューを作成します。containerクラス内にセンタリングされたheader、main、sub、footerのクラスが表示されます。mainクラス内にはsidebar1、content、sidebar2のクラスが配置され、サイドメニューとコンテンツが表示されます。メインメニューの項目上にマウスを置くとサブメニューが表示されます。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートです。 ややこしいセレクタは使ってありません。子孫セレクタと擬似クラス(:hover)だけです。 セレクタの書き方で詳細度が変わりますから、それを利用しています。 HTMLもCSSもシンプルで分かりやすいので、ツールを使うより早いし、後々のメンテナンスが楽です。 ★サブメニューは親メニューの近くに表示されます。 その他、下記サイトが参考になるでしょう。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で[表示]→[スタイルシート]で色々なスタイルを選択する。 ★ウェブ製作なら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、firebugを使われると楽です。 @charset "UTF-8"; html,body{margin:0;padding:0;} header,section,footer{width:80%;min-width:640px;max-width:800px;margin:0 auto;position:relative;} header{min-height:200px;} h1,h2,h3{margin:0;line-height:1.6em;} p{line-height:1.6em;margin:0 1em;;text-indent:1em;} header h1{width:20%;margin:0;position:absolute;} header h1 img{width:100%;height:auto;} section{min-height:300px;} section section,section h2{margin:0 21%;min-width:0;width:auto;} nav ol,nav ol li{list-style:none;margin:0;padding:0;text-align:center;line-height:2em;position:relative;} nav ol li ol{display:none;} nav ol li:hover ol{display:block;} nav ol li a{display:block;width:100%;height:100%;} header nav ol{margin:5px 1% 2em 20%;font-size:0;} header nav ol li{float:left;display:inline-block;width:15%;font-size:18px;} header nav ol li ol{width:100%;margin:0;position:absolute;top:36px;left:0;} header nav ol li ol li{display:block;width:100%;} section nav,section aside{width:20%;position:absolute;top:0;height:100%;} section nav{left:0;} section aside{right:0;font-size:0.9em;} section nav ol li ol{width:100%;position:absolute;left:100%;top:0;} /* 分かりやすいように色分け */ body{background-color:gray;} header,section,footer{background-color:silver;} section section{background-color:white;} nav{background-color:rgb(255,255,160);} nav ol li{background-color:yellow;} aside{background-color:lime;} nav li a:hover{background-color:white;}
お礼
ありがとうございます。自作のサイトに適用するのは時間がかかりそうですが、焦らずじっくり理解しながらやっていこうと思います。
補足
cssとhtmlに書ける要素名（タグ名と言えば好いのでしょうか。例えば、navやheader,footer,section等）はいくつかに決められているのでしょうか。それともclass名のように或る程度自由に決める事が出来るのでしょうか。 決められているとすれば、一覧表、対応表みたいなモノは有るのでしょうか。またそれが有るとすれば日本語ですか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- f1204-okw
- ベストアンサー率84% (16/19)
- f1204-okw
- ベストアンサー率84% (16/19)
jQuery を使って実装しました。 まず div.header 内にサブメニューを作成します。 簡単のため span 要素を使っていますが，実際には ul 要素で作成した水平リストを置くことになります。 <div class="header"> <img src="/images/logo-mark.gif" class="logo_mark" alt="ロゴ" /> <span id="nav-sub-top" style="display: none">「トップページ」のサブメニュー</span> <span id="nav-sub-business" style="display: none">「業務内容」のサブメニュー</span> ... </div> 次に，イベントを割り当てやすくするため ul#menu 内の li 要素に id を設定しておきます。 <ul class="nav" ID="menu"> <li id="nav-top"><a href="/index.htm" title="トップページ" target="_self">トップページ</a></li> <li id="nav-business"><a href="#" title="業務内容" target="_self">業務内容</a></li> ... </ul> 最後に head 要素内に下記のようなスクリプトを記述します。 jQuery の hover() メソッドを用い，サブメニューの show() メソッド，hide() メソッドを呼び出します。 （簡単のため span 要素を用いたので，$('.header ul') とすべき場所が $('.header span') となっています。） <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('#nav-top').hover( function() { $('.header span').hide(); $('#nav-sub-top').show(); } ); $('#nav-business').hover( function() { $('.header span').hide(); $('#nav-sub-business').show(); } ); }); </script> これで「マウスを置くとサブメニューが表示される」機能は満たせると思います。 「クリックした段階でそのページに飛ぶとともにサブメニューは固定されるようにしたい」とのことですが，飛んだ先のページの HTML に直書きしてしまうのが簡単です。 ただ，このデザインは，ユーザビリティの点からあまり良いものではないかもしれません。 メインメニューとサブメニューの位置が離れているからです。 「トップページ」のリンクに対するものならまだしも，最後の「活動報告」に対してはかなり距離が生じます。 マウスを動かすのが面倒だし，マウスを動かす間に他のメニューにポインターを合わせてしまってサブメニューが書き換えられてしまうかもしれないし，そもそもサブメニューが表示されたことに気づけないかもしれません。 いろんなサイトで見たサンプルを気にいらなかったのは，それらのメインメニューとサブメニューがくっついたような位置関係にあるものしかなかったからではないかと推測します。 メインメニューとサブメニューのくっついたデザインしかないのは，おそらくそれ以外のデザインでは不便だからでしょう。 また，メインメニューとサブメニューの離れたデザインは，文書構造的にも良いものではありません。 メインメニューとサブメニューの関連がなくなるからです。 あるメニューに対するサブメニューであることを明示するには，メニューの li 要素内に ul 要素を入れ子にすべきなのです。 入れ子にすると，文書構造やユーザビリティ，そして実装の点において簡潔で優れたものとなります。 <ul class="nav" ID="menu"> <li> <a href="/index.htm" title="トップページ" target="_self">トップページ</a> <ul> <li>トップページ サブメニュー 1</li> <li>トップページ サブメニュー 2</li> ... </ul> </li> ... </ul> このような HTML の構造ならば #menu > li > ul { display: none; } #menu > li:hover > ul { display: block; } のように簡単な CSS のみでも実装できます。 ちなみに，もともとの文書構造は割ときれいだと思います。 header, nav, contents, footer の順序が素直で，CSS を無効にしても文書として成り立っているからです。 そのシンプルさを失わないような形でサブメニューの追加を検討することをおすすめいたします。
お礼
ありがとうございます。考えてみれば確かにMAINメニューとSUBメニューが離れているのって使いづらいですね。くっついて欄外に吹き出すか、メイン項目の間に挿入されるかのパターンを考えてみたのですが、 http://www.expansys.jp/ か、もしくは http://windows.microsoft.com/ja-jp/windows-8/meet をまねてみようかと思いました。 しかし、ソースを見るでＨＴＭＬは見られますが、CSSは見られないので困っています。よろしくお願いします。 なお、縦に並んでいるメニューを横に並べたり、横に並んでいた『sidebar1』『contents』『sideber2』が縦に並んでしまったのをfloatを使わずに修正するやり方も分かりません。どうかご教示下さい。よろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
できません。いくらスタイルシートが強力なプレゼンテーション能力を持つといっても文書構造に逆らうデザインは出来ませんし、出来ても使い物にはなりません。(CSS2.1で出来ることはできます) ただ、スタイルシートは「HTMLがきちんとできている必要があります。」 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator )』 HTML5(小文字じゃないです)なのに、なぜ<div class="header">を使うのですか!!HTML5では、厳格に 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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の使用を避けるように強く書かれています。極論すればDIVは可能な限り使うな!! HTML5、CSS3はまだ時期尚早なので、HTML4.01として回答すると <body> <div class="header"> <h1>タイトル</h1> </div> <div class="section"> <h2>本文見出し</h2> <p>記事</p> <div class="nav"> <ol> <li><a href=""></a> <ol> <li><a href=""></a></li> </ol> </li> <li></li> <li></li> </ol> </div> </div> <div class="footer></div> </body> HTML5だと <body> <header> <h1>タイトル</h1> </header> <section"> <h2>本文見出し</h2> <p>記事</p> <nav> <ol> <li><a href=""></a> <ol> <li><a href=""></a></li> </ol> </li> <li></li> <li></li> </ol> </nav> </section> <footer></footer> </body> になります。 div.header,div.section,div.footer{min-width640～max-width:800px程度で中央配置} div.section{position:relative;} div.section div.nav{position:absolute;top:0;right:0;width:20%;} 当たりになるでしょう。 ナビゲーションにポインターをあわせると、サブメニューがsectionの上部に表示させるようにする。 なお、floatは使うべきではありません。本文中で挿絵等を自在にfloat(本来の使い方)が出来なくなります。また、HTMLを文書構造を無視してデザインのために書くことになり、デザインの変更ができなくなります。 ★問題点、ページが長くなるとサブメニューが見えない!! ★クリックではなく:hoverになる。 よって、あまり良いデザインとは思えません。 ナビゲーションをfixedで常に左右どちらかにおいておいて、ポインターが乗ればサブ項目が現れるようにするほうが良いでしょう。 スタイルシートで自由自在にデザインできるメタには、正統なHTMLをまず覚えましょう。そうしないと、何も出来ない。デザインのためにHTMLを書くことになり、使い勝手もメンテナンス性も低下します。
お礼
ありがとうございました。
補足
すみません。Adobe Dreamweaver CS5.5でテンプレートから作成したのでこのようになってしまいました。なお、現時点では、CSS検証サイトで『エラーはありません』と出ました。 http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbelatero.cmbc.jp%2Findex.htm&profile=css3&usermedium=all&warning=1&vextwarning= DIVや、floatを出来るだけ使わないように変更しようと思うのですが、floatを消しただけだと、横に並んでいた『sidebar1』『contents』『sideber2』が縦に並んでしまいました。 DIVでは、例えば『<div class="header">』を『<header>』に変更する時にスタイルシートは『.header』を変更する必要はありますか？
- kosukejlampnet
- ベストアンサー率44% (126/282)
いろいろ書いているけど、jQueryを使わなくてはならない必要性が一切ありませんね・・・。 単純なレイアウトなんだから、HTML、CSSですることです。
お礼
ありがとうございます。jQueryとは何なのかをよく分かってなくて、でも、使用出来るならしたいなと思っていました。 もう少し勉強します。
お礼
大変分かり易い説明をありがとうございます。自分の勉強や認識の不足を痛感しました。 要するに、タグ名だけを書くと <doctype> <html> <head> <title></title> (<meta> 必要に応じて） (<link> 必要に応じて） </head> <body> <header> <section> <h2>・・・</h2> <section> <h3>・・・</h3> <section> <h4>・・</h4> </section> </section> </section> </header> <section> <h2>・・・</h2> <nav> <ul> <li></li> ・ ・ ・ </ul> </nav> <section> <h3>・・・</h3> <img> (他必要に応じて） <section> (他必要に応じて） <h4>・・</h4> (他必要に応じて） </section> (他必要に応じて） </section> </section> <footer> <address> (他必要に応じて）</address> </footer> </body> </html> と、こんな感じの流れで良いのでしょうか。あとはこれに肉付け・羽付けをし、コンピュータにとっても、ホームページ閲覧者にとっても分かり易いページを作っていけばよいような気がしています。 あと、表示速度の面から、scriptはhtmlの最後に記述した方が良いと書かれたサイトが存在したのですが、この辺はどう思われますか。 なお、本日通っている施設より、『施設では使わなくなった本』を１３冊ほど貰ってきました。その中にホームページ・ＣＧＩ関係も４冊ほどあるので、少しだけ古いXHTMLの本等は、教えて頂いたページと比較しながら勉強したいと思います。 ありがとうございました。