html5とcss3、 jQueryで動きのあるメ

Question

html5とcss3、 jQueryで動きのあるメニューを作りたいと思っています。

いろんなサイトでサンプルを見て回ったのですが、僕が作りたいメニューに合うものは有りませんでした。

細かい事はもう少し自分で勉強してみますが、まずは初めが肝心ということでよろしくお願いします。

なお、tableは使わずにやりたいです。

全画面幅の80%をcontainerクラスの枠にし、センタリングします。
その内部に上から『header』『main』『sub』『footer』のクラスを配置します。
『header』クラスは、backgroundを指定し、left20%にjpeg画像のロゴを配置します。
『footer』クラスは、copylightクラスをセンターに置きます。
『sub』クラスは、画面が縦に長くなった時によくある≪ページのtopへ≫を置こうと思っています。

肝心の『main』クラスですが、この中にsidebar1クラスを幅20%で"float: left"指定、contentクラスが60%幅で"float: left"指定、残り20%がsidebar2クラスで"float: left"指定です。

sidebar1クラスの中のnavクラスで作られるメインメニューの縦に並んだ各li項目上にマウスが置かれた時に『header』クラスのjpeg画像のロゴの右側の何も無い部分にサブメニューを横に並べて表示させたいのです。

サブメニューの項目数は不定であるため、８０％÷項目数ではなく、統一した幅にしたいです。
なお、メインメニューの項目をクリックするまでは、サブメニューは固定されず、クリックした段階でそのページに飛ぶとともにサブメニューは固定されるようにしたいです。と言っても、メニュー項目上にマウスを置けば、そこのサブメニューにしたいのですが....

そもそもこういう事は可能でしょうか。

jQueryは、出来れば使いたいですが、使わなくて出来るならそれでいいです。
なお、『sub』クラスが思った表示にならないのですが、こんな事は後回しで良いです。

とにかく、よろしくお願いします。

belatero.cmbc.jp

ORUKA1951 · Accepted Answer

＞それともclass名のように或る程度自由に決める事が出来るのでしょうか。

　自由に決めることは出来ません。XHTML(XML)だと自由に決めることが出来ます。

　これには歴史があって、

　HTML自体、本来--その文書をタグを用いて、その文書を構成する要素(element)をマークアップする、言い換えれば文書構造をマークアップするものなのですが、それがデザインに流用されると言うことがされてきました。そのため・・
　『Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　正しく理解されていなかったのですが、HTML4の時代から、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』とされていました。
　その当時から、すでに自由ではなく、class名やidは「文書構造を示す物」だったはずです。そうすることで、検索エンジンはどの部分がheaderであり、どの部分が節--章--項(section)であるかが理解できるはずでした。
　「class名やidが文書構造を示すために使われてこなかった」という反省から、HTML5では、『文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』となり、DIVは、原則として使えなくなりました。
　DIVは、文書構造を示す他に適当な要素がないときのための最後の手段として使用する---と変わりました。

　そのために、私は、HTML4であっても極力HTML5の新しい要素名を、class名として使用することにしています。もちろん、その意味も含めて!!!
　⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
に追加すると
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/n … )
　　の【問題2】
　⇒HTML5タグリファレンス - HTML5.JP( http://www.html5.jp/tag/index.html )
　　邦訳です。原文は、
　　　⇒HTML5( http://www.w3.org/TR/html5/ )

・・・

・・・

・・

article　内部に

ORUKA1951 · Answer

スタイルシートです。
ややこしいセレクタは使ってありません。子孫セレクタと擬似クラス(: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;}

ORUKA1951 · Answer

ごく簡単な例を挙げておきます。 1) 文書はHTML5の定番どおり

f1204-okw · Answer

スタイルを確認する方法はおもに２つあります。

１つめは，外部 CSS ファイルを直接見るという方法です。
head 要素内にある <link rel="stylesheet"... というタグを探してください。
その要素の src 属性が見るべき css です。

２つめは，ブラウザの開発者ツールを利用する方法です。
Firefox の Firebug などが有名です。
各要素を解析し，当てられているスタイルなどを細かく教えてくれるので重宝します。
自作の Web デザインを行なうならば持っておくべきかと思います。

横並びのメニューリストを作成する方法は，数多くのブログや How to サイトに載っています。
「メニュー　横並び」などのワードで調べてみてください。
www.expansys.jp で利用されているメニューのデザインは，とくに「メガメニュー」と言いますので，こちらも調べてみてください。

『float を使わずに修正』ですが，あまりこだわらず，float を使って修正してください。
「float を使うべきではない」というのは，float の仕様を理解しないまま使うと予期せぬデザイン崩れの原因になるから気をつけなさい，というくらいの意味です。
横並びメニューの作成にも float を使うことになるかと思います。
正しい用法・用量を守ってデザインしてみてください。

f1204-okw · Answer

jQuery を使って実装しました。まず div.header 内にサブメニューを作成します。簡単のため span 要素を使っていますが，実際には ul 要素で作成した水平リストを置くことになります。次に，イベントを割り当てやすくするため ul#menu 内の li 要素に id を設定しておきます。最後に head 要素内に下記のようなスクリプトを記述します。 jQuery の hover() メソッドを用い，サブメニューの show() メソッド，hide() メソッドを呼び出します。（簡単のため span 要素を用いたので，$('.header ul') とすべき場所が $('.header span') となっています。）これで「マウスを置くとサブメニューが表示される」機能は満たせると思います。「クリックした段階でそのページに飛ぶとともにサブメニューは固定されるようにしたい」とのことですが，飛んだ先のページの HTML に直書きしてしまうのが簡単です。ただ，このデザインは，ユーザビリティの点からあまり良いものではないかもしれません。メインメニューとサブメニューの位置が離れているからです。「トップページ」のリンクに対するものならまだしも，最後の「活動報告」に対してはかなり距離が生じます。マウスを動かすのが面倒だし，マウスを動かす間に他のメニューにポインターを合わせてしまってサブメニューが書き換えられてしまうかもしれないし，そもそもサブメニューが表示されたことに気づけないかもしれません。いろんなサイトで見たサンプルを気にいらなかったのは，それらのメインメニューとサブメニューがくっついたような位置関係にあるものしかなかったからではないかと推測します。メインメニューとサブメニューのくっついたデザインしかないのは，おそらくそれ以外のデザインでは不便だからでしょう。また，メインメニューとサブメニューの離れたデザインは，文書構造的にも良いものではありません。メインメニューとサブメニューの関連がなくなるからです。あるメニューに対するサブメニューであることを明示するには，メニューの li 要素内に ul 要素を入れ子にすべきなのです。入れ子にすると，文書構造やユーザビリティ，そして実装の点において簡潔で優れたものとなります。このような HTML の構造ならば #menu > li > ul { display: none; } #menu > li:hover > ul { display: block; } のように簡単な CSS のみでも実装できます。ちなみに，もともとの文書構造は割ときれいだと思います。 header, nav, contents, footer の順序が素直で，CSS を無効にしても文書として成り立っているからです。そのシンプルさを失わないような形でサブメニューの追加を検討することをおすすめいたします。

ORUKA1951 · Answer

　できません。いくらスタイルシートが強力なプレゼンテーション能力を持つといっても文書構造に逆らうデザインは出来ませんし、出来ても使い物にはなりません。(CSS2.1で出来ることはできます) 　ただ、スタイルシートは「HTMLがきちんとできている必要があります。」『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator )』 HTML5(小文字じゃないです)なのに、なぜ

を使うのですか!!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として回答すると　　

本文見出し

記事

本文見出し

記事

　　　　になります。 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を書くことになり、使い勝手もメンテナンス性も低下します。

kosukejlampnet · Answer

いろいろ書いているけど、jQueryを使わなくてはならない必要性が一切ありませんね・・・。
単純なレイアウトなんだから、HTML、CSSですることです。

html5とcss3、 jQueryで動きのあるメ

＞それともclass名のように或る程度自由に決める事が出来るのでしょうか。

スタイルシートです。

この回答への補足

ごく簡単な例を挙げておきます。

スタイルを確認する方法はおもに２つあります。

jQuery を使って実装しました。

できません。

この回答への補足

いろいろ書いているけど、jQueryを使わなくてはならない必要性が一切ありませんね・・・。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　できません。