- ベストアンサー
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）
- 専門家の回答
質問者が選んだベストアンサー
＞それともclass名のように或る程度自由に決める事が出来るのでしょうか。 自由に決めることは出来ません。XHTML(XML)だと自由に決めることが出来ます。 これには歴史があって、 HTML自体、本来--その文書をタグを用いて、その文書を構成する要素(element)をマークアップする、言い換えれば文書構造をマークアップするものなのですが、それがデザインに流用されると言うことがされてきました。そのため・・ 『Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 正しく理解されていなかったのですが、HTML4の時代から、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされていました。 その当時から、すでに自由ではなく、class名やidは「文書構造を示す物」だったはずです。そうすることで、検索エンジンはどの部分がheaderであり、どの部分が節--章--項(section)であるかが理解できるはずでした。 「class名やidが文書構造を示すために使われてこなかった」という反省から、HTML5では、『文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』となり、DIVは、原則として使えなくなりました。 DIVは、文書構造を示す他に適当な要素がないときのための最後の手段として使用する---と変わりました。 そのために、私は、HTML4であっても極力HTML5の新しい要素名を、class名として使用することにしています。もちろん、その意味も含めて!!! ⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) に追加すると section 原則としてh1, h2, h3, h4, h5, h6 要素を(ひとつだけ)伴う。sectionの階層とhのレベルは一致する。 <section> <h2>・・・</h2> <section> <h3>・・・</h3> <section> <h4>・・</h4> article 内部に<header><section><footer>を持つ、あるいは持つと期待される。 など・・ あなたの質問で示されている『main』『sub』をあえて使用しなかったのは、これらはそれぞれ『main』→section、『sub』→aside,ないしnavになるべき「構成要素」だと判断したからです。 ★class名は文書構造をしめすもの。その名称と意味はHTML5の新しい要素名をモデルとする。 将来HTML5が本格的に利用できるようになったとき移行が容易。 検索エンジンに正確に内容を示すことが出来る。(SEO) 自身も将来のメンテナンスが極めて楽になる。 【参考資料】 ⇒HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) の【問題2】 ⇒HTML5タグリファレンス - HTML5.JP( http://www.html5.jp/tag/index.html ) 邦訳です。原文は、 ⇒HTML5( http://www.w3.org/TR/html5/ )
その他の回答 (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)
ごく簡単な例を挙げておきます。 1) 文書はHTML5の定番どおり<header><section><nav><aside><footer>の構成にしてあります。 HTML4.01にする場合は、それぞれ<div class=""></div>としてください。 2) サブメニューはマウスオーバーで下、または横に開きます。 3) 縦に並んだ各li項目上にマウスが置かれた時に『header』クラスのjpeg画像のロゴの右側に並べて表示させたいのです。 ※これは、問題です。本文が長いときはページがスクロールされた時には隠れて見えないのですからね。 個別のHTMLにスタイルを追加しましょう。 サブメニューはメインメニューの近くに表示させるほうが良いでしょう。そうすべきです。 4) ページをスクロールさせたときすべてのメインナビが使えるようにするには、fixedを使うと良いでしょう。 5) リンクして移動した先では、共通のナビに対して、スタイルを一行追加するだけです。サンプルのli.A{} ★HTMLをご覧になると分かるように、文書構造だけしか記述してありませんから、ユーザビリティもメンテナンスも楽です。 オーサリングツールでは、文章の内容を読み取って最適な要素(タグ)やclass名を示してはくれません。この部分は必ず著者が行うことになります。 またスタイルシートもHTMLの文書構造を元にセレクタを書くのですから、サンプルのようなセレクタは書いてくれません。 nav{}ナビゲーションのデザイン header nav{}header内のnav section nav{}セクション内のnav これは著者自身で指定することになります。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済み ★タブは＿に置換してあるので戻すこと。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿<!--[if IE]> ＿＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> ＿<![endif]-->＿<link rel="stylesheet" href="css/style.css"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/test2.css"> <style media="screen"> <!-- /* 個別のHTMLに記述するかカテゴリーごとに外部ファイル */ header nav li.A ol{display:block;} nav ol li.A,nav ol li.A li{background-color:orange;} --> </style> </head> <body> ＿<header> ＿＿<h1><img src="./images/abc2.jpg" width="200" height="200" alt="ページタイトル"></h1> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li class="A"><a href="/A">A</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/A/1">A-1</a></li> ＿＿＿＿＿＿<li><a href="/A/2">A-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="B"><a href="/B">B</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/B/1">B-1</a></li> ＿＿＿＿＿＿<li><a href="/B/2">B-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="C"><a href="/C">C</a></li> ＿＿＿＿<li><a href="/D">D</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/D/1">D-1</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-2</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="E"><a href="/E">E</a></li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>本文</h2> ＿＿<section> ＿＿＿<h3>記事</h2> ＿＿＿<p> ＿＿＿＿全画面幅の80%をcontainerクラスの枠にし、センタリングします。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿その内部に上から『header』『main』『sub』『footer』のクラスを配置します。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿『header』クラスは、backgroundを指定し、left20%にjpeg画像のロゴを配置します。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿『footer』クラスは、copylightクラスをセンターに置きます。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿『sub』クラスは、画面が縦に長くなった時によくある≪ページのtopへ≫を置こうと思っています。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿肝心の『main』クラスですが、この中にsidebar1クラスを幅20%で"float: left"指定、contentクラスが60%幅で"float: left"指定、残り20%がsidebar2クラスで"float: left"指定です。 ＿＿＿</p> ＿＿</section> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li class="A"><a href="/A">A</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/A/1">A-1</a></li> ＿＿＿＿＿＿<li><a href="/A/2">A-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="B"><a href="/B">B</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/B/1">B-1</a></li> ＿＿＿＿＿＿<li><a href="/B/2">B-2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="C"><a href="/C">C</a></li> ＿＿＿＿<li><a href="/D">D</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/D/1">D-1</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-2</a></li> ＿＿＿＿＿＿<li><a href="/D/2">D-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li class="E"><a href="/E">E</a></li> ＿＿＿</ol> ＿＿</nav> ＿＿<aside> ＿＿＿<h3>付録</h3> ＿＿＿<p>本文とは関係ない記事</p> ＿＿</aside><!-- 本文とは直接関係ない記事 --> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<address>copyright</address> ＿</footer> </body> </html>
- f1204-okw
- ベストアンサー率84% (16/19)
スタイルを確認する方法はおもに２つあります。 １つめは，外部 CSS ファイルを直接見るという方法です。 head 要素内にある <link rel="stylesheet"... というタグを探してください。 その要素の src 属性が見るべき css です。 ２つめは，ブラウザの開発者ツールを利用する方法です。 Firefox の Firebug などが有名です。 各要素を解析し，当てられているスタイルなどを細かく教えてくれるので重宝します。 自作の Web デザインを行なうならば持っておくべきかと思います。 横並びのメニューリストを作成する方法は，数多くのブログや How to サイトに載っています。 「メニュー 横並び」などのワードで調べてみてください。 www.expansys.jp で利用されているメニューのデザインは，とくに「メガメニュー」と言いますので，こちらも調べてみてください。 『float を使わずに修正』ですが，あまりこだわらず，float を使って修正してください。 「float を使うべきではない」というのは，float の仕様を理解しないまま使うと予期せぬデザイン崩れの原因になるから気をつけなさい，というくらいの意味です。 横並びメニューの作成にも float を使うことになるかと思います。 正しい用法・用量を守ってデザインしてみてください。
- 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の本等は、教えて頂いたページと比較しながら勉強したいと思います。 ありがとうございました。