電子書籍発売! Web制作の現場で使うjQueryデザイン入門[改訂新版]

このエントリーをはてなブックマークに追加

Web制作の現場で使う jQueryデザイン入門[改訂新版] (アスキー書籍)
Web制作の現場で使うjQueryデザイン入門[改訂新版]の電子書籍が発売されました。

Amazon Kindleの他、iBookstore /Google Playブックス/楽天kobo/BOOK☆WALKER/ニコニコ静画などで様々なところで発売しております。

本書はこれからjQueryを始めたい!jQueryに興味がある!という方にはお勧めの一冊です。そろそろjQuery勉強始めないと・・・と思っている方はぜひ一度手にとってみてください。

スポンサードリンク

«CSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」が終了しました | メイン | Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/618
コメント

初めて投稿させてもらいます。
『Web制作の現場で使うjQueryデザイン入門』[改訂新版]の上梓、おめでとうございます。当方は、その改訂前(旧版)を購入して、自学実習してきた63歳・団塊世代のおじさんです。

さて、西畑先生の上記旧版の内容に関して、1つ質問をさせて頂きたく投稿させてもらいました。(※西畑先生がいくつもサイトを手掛けておられる中で、本サイトの投稿月日が比較的新しい日付のものだったので、記事内容に即してこちらのサイトで質問投稿をさせてもらいます)。

質問の内容ですが、旧版の「3-8」(第3章)にサイトの使い勝手を上げるナビゲーション「多階層対応ドロップメニュー」という見出しの記述が掲載されています。

質問は、その制作・実行の際に生じる不具合(トラブルシューティング)の原因特定と、正しく表示させるための対処策を教えていただきたい、というのが趣旨です。

いきなりで大変ぶしつけな質問投稿とは存じますが、西畑先生の著書の読者・学習実践者という点に免じてお許し願います。

端的に申し上げれば、多階層ドロップメニューのHTML指定とCSS指定、そしてjQueryのJavaScript指定により、表記のサイトを制作する際にトライしてみたのですが、5つのメインメニューのうち、2つのメニューに対してサブメニューを指定して、ドロップメニューを作成しました(上記サイト=商用HP用に作成し、うまく動作しました)。

その延長で、とりあえずサイトの内容とは別に、自己確認の意味も含めて5項目のメインメニュー全部にサブメニューを設定したらどうなるかを実習・制作してみました。

その際に、header下に横並びのナビゲーションメニューとして設置し、それにサブメニューをjQueryのScript(上記書籍に掲載されていたものを参考に)を記述し、制作を試みてみました。

ところが、“どういう理由によるものか、5つ目=右端のメニュー項目のサブメニュー(マウスオーバーした際に下に表示されるサブメニュー)だけ、サブメニューの背景が半透明になってしまい、メインメニューのマウスオーバーから下に垂れ下がって表示されるサブメニューをクリックして該当リンクページを表示させようとするのですが、サブメニューのボタンが、スルリと消えてしまい、クリック選択することができない”というトラブルに遭遇したのです。

なお、HTMLファイルでは、上記書籍にあるのと同様に、2次元の“入れ子”になる形でulタグと、liタグによる記述を行いました。

しかし、何度トライしても、また関連ファイル類をチェックしても、書籍の記述通りに正しく記載しているはずなのに、メインメニュー最後の5番目に当たるメニュー項目のサブメニューだけが、半透明状態になってしまい、サブメニューをクリック選択することができません。

ちなみに、半透明にはなるものの、HTMLの記述内容に沿って、サブメニュー自体は、他の4つのメインメニュー項目と同様に表示されます。表示はされますが、半透明状態のため、マウスオーバーすると同時にスルリと非表示になってしまいます。

いったい何が原因して、こういう現象が生じているのかが、まったく見当がつきません。どうかよろしくご教授、ご指導のほど、お願い申し上げます。

※ご参考までに、実際のHTML指定個所は、上記のサイト用に以下のように記述しています─




 HOME
    
NEWS&TOPICS


 GOODS

  ボーデッサン
  ヴィアドアン
  スギタニ
  ポーター
  アベクス

 
SHOP
ACCESS
FAQ


上記の記述における最後のメニュー項目「FAQ」にサブメニュー項目を追加記入してブラウザで表示させると、そのサブメニューだけが半透明になってしまいます。

原因が正しく把握できれば、「なるほど」と合点がいくのでしょうが、jQueryの実行制作に不慣れな身としては、どうしても原因を特定することができません。

なお、当方は、昨年暮れに、(60歳過ぎの手習いですが)HTML&CSSによるWebサイトの制作技術資格である『Webクリエイター上級資格』の試験に合格いたしました。ほぼHTMLとCSSによるサイト作成については、理解できる素地はあるつもりです。

jQueryだけでなく、多方面でWebサイト制作と指導を実践しておられる西畑先生に、ぜひともjQueryの理解を深める意味も含めて、お尋ねするしだいです。

どうかよろしくご教授のほど、お願い申し上げます。

投稿者:渡辺健一 | 2013年7月 1日 01:59

ちょっと状況がよくわからないので、何処か確認できる所にアップしていただけないでしょうか。。。

投稿者:西畑一馬 | 2013年7月 2日 02:10
コメントを投稿