- ベストアンサー
jQueryプルダウンメニュー個別着色
- jQueryを使用してプルダウンメニューの個別着色を行いたいです。
- CSSクラス名ごとにスクリプトを書かなければならないのでしょうか？
- $('.btn')の部分を省略できるのか知りたいです。
- powbluesky
- お礼率90% (29/32)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
リンクによって個別に色を変えたい場合は、属性セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#attribute-selectors )で指定するのが楽です。いちいちidを振るのは馬鹿げています。後々メンテナンスで困るのが目に見えている。 なお、製作する立場になるとホムペなんて変な略語は使わないようにしましょう。 ウェブサイトとかウェブページとか・・ ホームページとは、ブラウザを最初に起動した時に表示されるホーム(基点)のページです。「私はホームページはgoogleにしています。」と使います。 ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) まだ、始めたばかりのようですから、アドバイスを まず基礎となる仕様書 HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) は一応、目を通しておきましょう。巷には本当にたくさんの？？？？のマニュアルサイトがたくさんあります。基本を身につけていれば、無駄なおかしなものを身につけて、本堂に戻るのに苦労するなんて事は減ります。 DIVやSPANはclassやidを併用して文書構造を補完するためのものでデザインのためじゃない。その文書構造に基づいてスタイルシートでデザインする。という基本中の基本すら説明されていないことが多い。
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
私の示したサンプル、ゆっくりと開くはずです。 スタイルシートのこの三行がそれです。 transition-property:height;/* 高さを時間で制御する。 */ transition-duration:1s;/* 一秒 */ transition-timing-function:ease-in-out;/* 変化の仕方 */ ＞普通、あのような、サンプルはプロの方は使わないってことでしょうか～？ ど素人なクライアント受けはよいのですが(苦笑)。あまり使うとプロ間では馬鹿にされます。 最後に、サンプルコード全体を上げて置きますが、試されたら分かるように印刷には適用されませんね。代わりに印刷ではリンク先が表示されます。 なによりも、HTMLもCSSもメンテナンスが楽なのは分かりますよね。デザインを変更する時にHTMLを弄(いじ)くる必要ありませんし、スタイルシートも慣れればHTML見なくても良い。 ★タブは＿に置換してあるので戻す。 ★リキッドでスマホにも対応 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> <style type="text/css"> <!-- body{line-height:1.6em;} h1,h2,h3,h4,h5,h6 p{margin:0;} p{text-indent:1em;} --> </style> <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} div.section div.section{min-width:0;width:auto;} div.header div.nav ul{ list-style:none; margin:0 auto;padding:0; width:80%; line-height:30px; text-align:center; font-size:0; z-index:100; } div.header div.nav ul li{ display:inline-block; margin:0;padding:0; width:20%; position:relative; height:30px; font-size:16px; } div.header div.nav ul li ul{ display:block; overflow:hidden; width:100%; transition-property:height; transition-duration:1s; transition-timing-function:ease-in-out; position:absolute; height:0; top:30px;left:0; } div.header div.nav ul li:hover ul{ height:120px; } div.header div.nav ul li ul li{ display:block; width:100%; } div.header div.nav li a{ display:block; width:100%; height:100%; text-decoration:none; } div.section{position:relative;} div.section div.aside{ position:absolute; top:0;right:0; width:180px;height:100%; font-size:0.8em; } div.section h2,div.section p{margin-right:190px;} div.section div.section p{margin-right:5px;} /* 色を指定 */ body{background-color:silver;} div.header,div.section,div.footer{color:white;background-color:gray;} div.header div.nav ul li a:link{color:yellow;background-color:silver;} div.header div.nav ul li a:hover{background-color:black;} div.header div.nav ul li a[href="/Books/2.html"]{background-color:green;} div.header div.nav ul li a[href="/Books/2.html"]:hover{background-color:lime;} div.header div.nav ul li a[href="/Profile"]+ul li a{background-color:red;} div.section div.aside{background-color:white;color:black;} --> </style> <style type="text/css" media="print"> <!-- a:after{content:"(http://hoge.com"attr(href)")";} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Books">Books</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Books/1.html">Book1</a></li> ＿＿＿＿＿＿<li><a href="/Books/2.html">Book2</a></li> ＿＿＿＿＿＿<li><a href="/Books/3.html">Book3</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Products">Products</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Products/1.html">Product1</a></li> ＿＿＿＿＿＿<li><a href="/Products/2.html">Product2</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Profile">Profile</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="/Profile/info.html">Infomation</a></li> ＿＿＿＿＿＿<li><a href="/Profile/formMail.html">ContactUs</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>関連情報</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
jqueryには無関係です。firebugで調べたらお分かりのようにCSSで色は ul.nav li:hover { background: none repeat scroll 0 0 #333; cursor: pointer; } と書かれていますよ。 そもそも、この程度のプルダウンにjquery使用するのは問題です。 javascriptが無効だとメニュー開きません。下記でも最初に否定されている。デザイナーと自称されるなら、基本的な事です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )］より <div class="header"> <h1>ページタイトル</h1> <div class="nav"> <ul> <li><a href="/">Top</a></li> <li><a href="/Books">Books</a> <ul> <li><a href="/Books/1.html">Book1</a></li> <li><a href="/Books/2.html">Book2</a></li> <li><a href="/Books/3.html">Book3</a></li> </ul> </li> <li><a href="/Products">Products</a> <ul> <li><a href="/Products/1.html">Product1</a></li> <li><a href="/Products/2.html">Product2</a></li> </ul> </li> <li><a href="/Profile">Profile</a> <ul> <li><a href="/Profile/info.html">Infomation</a></li> <li><a href="/Profile/formMail.html">ContactUs</a></li> </ul> </li> </ul> </div> </div> ※多分このように、「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」してマークアップされていると思います。HTML5では<header></header><nav></nav>になります。 それをスタイルシートでデザインしていけば、検索エンジンは無論、スタイルシートだけ変えるなりでスマホもフィーチャホンも印刷にも対処できる。 色は、セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#pattern-matching )を使ってお好きに設定すればよい。順番や項目数が変わっても使えるしね。 <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.header div.nav ul{ list-style:none; margin:0 auto;padding:0; width:80%; line-height:30px; text-align:center; font-size:0; } div.header div.nav ul li{ display:inline-block; margin:0;padding:0; width:20%; position:relative; height:30px; font-size:16px; } div.header div.nav ul li ul{ display:block; overflow:hidden; width:100%; transition-property:height; transition-duration:1s; transition-timing-function:ease-in-out; position:absolute; height:0; top:30px;left:0; } div.header div.nav ul li:hover ul{ height:120px; } div.header div.nav ul li ul li{ display:block; width:100%; } div.header div.nav li a{ display:block; width:100%; height:100%; text-decoration:none; } /* 色を指定 */ div.header div.nav ul li a:link{color:white;background-color:silver;} div.header div.nav ul li a:hover{background-color:black;} div.header div.nav ul li a[href="/Books/2.html"]{background-color:green;} div.header div.nav ul li a[href="/Books/2.html"]:hover{background-color:lime;} div.header div.nav ul li a[href="/Profile"]+ul li a{background-color:red;}
お礼
すみませ～ん； 丁寧にサンプル提示ありがとうございます。 CSSで個別に形や色をつけたりはできるんですけど、 プルダウンメニューのあの滑らかな動きを取り入れたく、 そこをjqueryの部分とどう対応させたらいいのかが解らないのですぅ（；；） クラスに対して、ひとつずつ、scriptいれるととっても長くなっちゃうので 嫌かなぁと。。。 でも、メニューがでないと困りますね（汗 普通、あのような、サンプルはプロの方は使わないってことでしょうか～？ 3作目のホムペなので試行錯誤してます（＾＾；
- hitomura
- ベストアンサー率48% (325/664)
> btnってクラス名はいけないのですね； 異論はあるとは思いますが、自分は btn という名前はあっても問題ないと思います。 # 自分が新たにクラス名を付けられるなら menu_list とかいう感じでそのクラス名の意図を一目で理解できるものにしますが。 自分が問題があると言っているのは、btn と同じ動作・性質を持つものに対して btn2, btn3,... といった名前を付けることです。それはあなたが id とクラスを混同していることの現れです。 id とクラスの使い分けについてもっと詳しい方が詳細な回答をなさると思いますが、とりあえず検索で見つかった以下のページをお読みください。 http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/css-id-class-%E9%81%95%E3%81%84/
お礼
なるほど。 では、画像等のボタンであれば、btnってクラス名はつけてもいいということですね。 私が混同したのはメニューリストをボタンだと思っていたことですね（汗 いつもはナビをfireworksで作っていたのですが、同じ動作ならjjqueryにしてみようと思って。 見た目が同じでもfireworksならボタンって名前ですから（＾＾； いろいろ誤解があるみたいです（汗 大変勉強になります。 ありがとうございましたm（＝＝）m
- hitomura
- ベストアンサー率48% (325/664)
> ボタンに個別に色を付ける つ nth-child() https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child 念のために言っておきますが、btn2 とかいうクラス名を作ってはいけません。それはクラスの意味を誤解したデザインです。
お礼
ご参考ありがとうございます☆ ちょっとハードルが高いですが、がんばってみます～（＾＾； btnってクラス名はいけないのですね； 多用してました（汗 ご指摘ありがとうございましたm（＝＝）m
- hitomura
- ベストアンサー率48% (325/664)
すみませんが、この中に色の指定や変更を行っているところはありません。 おそらく JavaScript/jQuery の方ではなく CSS の方にメニューの色指定を行っている個所があるのではないでしょうか。
補足
すみません； '.btn'が、CSSのクラス名なので、li タグにクラスをそれぞれ与えて色を付けるのですが、 jqueryの仕掛けを動かすために、＄の中にクラス名を入れてあげないといけないようなのです。 なので、ボタンに個別に色を付けると先程のスクリプト数行分が、 ボタンの数だけ書かないといけないので分量が多くなってしまうなと思って； わかりにくくてすみません；宜しくお願いしますm（＝＝）m 以下見本のページでこれをメニューごとに色分けしたいのです； http://zxcvbnmnbvcxz.com/demonstration/jqnav.html
お礼
ORUKA1951さまm（＝＝）m 早速やってみました。確かにjqueryなど入れなくてもゆっくり表示されますね。 ○○入門ってページはよく利用させて頂いておりますm（＝＝）m ORUKA1951さんが私の作ったページをみたら失神するかもしれません。。。 いままではとりあえず形にするだけで精一杯だったので、 基本を押さえて綺麗なソースのかけるようになりたいとおもいます♪ サンプル、検索等ありがとうございました☆