2007/03/05
【DreamweaverではじめるWeb標準】第100号 ［86］いまどきのドロップダウンメニュー（1）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□ DreamweaverではじめるWeb標準 □□□ □□ 〜XHTMLとCSSで構築するWebサイト〜 □□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 第100号 発行日：2007年3月5日月 ほぼ週刊 発行：鷹野雅弘（株式会社スイッチ） ………………………………………………………………… このメルマガでは、Dreamweaverを使って、 Web標準に準拠したサイトを構築するワークフローや Tips、書籍、セミナー、有用サイトなどをご紹介しています。 Web制作の現場の方だけでなく、企業内のWeb担当の方も、 Web標準について興味があるという方に、 短時間で、少しずつ理解を深めていただく助けになれば幸いです。 ┼────────────────────────── 目次 ──────────────────────────┼ ├ お知らせ：参照アドレスが変更になります ├ ムービーで学ぶWeb標準［86］いまどきのドロップダウンメニュー（1） ├ サイト紹介：ユーザビリティ 実践メモ ├ 話題紹介：ブラウザ・フォーマティング（CSSリセット）はどこへ行く？ ├ 書籍紹介：『実践 Web Standards Design』 ├ サイト記事紹介：数字でわかる最適レンタルサーバー ├ サイト紹介：【まる・てん.てん・】する ├ 書籍紹介： 『カラー・ルールズ 色とデザインについて知っておきたいこと』 ├ サイト記事紹介：Webプログラミングに役立つ Dreamweaverの基礎知識 ├ セミナー紹介：『クリエイティブ・チルドレン・プロジェクト』 ├ サイト記事紹介：バーバル・アイデンティティ ├ サイト記事紹介：日経IT pro「日々の作業効率を高める Dreamweaverの小技」 ├ Q and A：Dreamweaverで［タグを削除］が使えない ├ サイト記事紹介：JOBZINE ├ 書籍紹介：『Webブランディングの入門教科書』 ├ セミナー紹介：CSS Nite in Nagoya 2007（再掲） ├ イベントカレンダー ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ お知らせ：参照アドレスが変更になります ──────────────────────────────────── 弊社の契約サーバーの移転に伴い、IPアドレスが変更になりました。 以前の記事で http://202.133.126.132/dwstd/xxx.html のようにご紹介している記事は、 http://202.164.255.128/dwstd/xxx.html のように、変換してご利用ください。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ムービーで学ぶWeb標準［86］いまどきのドロップダウンメニュー（1） ──────────────────────────────────── 2月15日に開催の「CSS Nite Vol.17」の再録／フォローとして、 「いまどきのドロップダウンメニュー」をお届けします。 こちらもご参照ください。 http://cssnite.jp/archives/post_480.php http://cssnite.jp/archives/post_484.php 本日のムービーはありません。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● いまどきのドロップダウンメニュー ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ たとえば、最近のアドビのサイトでは、上部のメインメニューにマウスオーバーすると、 それぞれのカテゴリのサブメニューがポップアップして開きます。 http://www.adobe.com/jp/ FirefoxなどでCSSをオフにすると、リストでマークアップされていることがわかります。 さらに、FirefoxのWeb DeveloperでJavaScriptをオフにした状態でも、 サブメニューがポップアップすることが確認できます。 このように、ここ最近、ドロップダウンメニューを実装するには、 リストを使ってマークアップし、JavaScriptなしでも CSSのみで表示できるようにするのがトレンドといえます。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● ドロップダウンメニュー？ ポップアップメニュー？ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ Fireworksには、ウィザード形式で簡単な操作を進めるだけで ドロップダウンメニューを実装できる「ポップアップメニュー」機能があります。 一時期、よく使われた時期もありますが、 ブラウザ互換のため、ファイルサイズが大きいJavaScriptファイルをはき出し、 マークアップという観点からも、今、思えば悲しい品質でした。 （「DHTML」と呼ばれていました。） ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● JavaScriptのあるなし ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ JavaScriptを使わず、CSSのみで実装した方がベターというわけではありません。 CSSのみでは「遅延」を演出することができないため、 メニュー領域から少しでもマウスアウトしてしまうと、メニューが消えてしまいます。 下方向のみならOKですが、横方向の展開を伴うメニューを利用する場合、 ユーザビリティの観点で厳しいものがあります。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● そもそもドロップダウンメニューは有効か？ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ドロップダウンメニューの場合、視覚ブラウザでは、 マウスオーバーするまで、そのメニュー内のどんな項目があるのかがわかりません。 つまり、内容の一覧性という点で劣ってしまいます。 ある程度サイトのコンテンツや階層構造を把握したユーザーには ナビゲーションの領域を有効活用できるなど、利便性が高くなることもありますが、 その一方、サイトのはじめてのユーザーには、 各メニューをそれぞれ見ていかなければならないため、あまり親切とはいえません。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● CSS-drivenのドロップダウンメニューを実装するには ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ CSS-drivenのドロップダウンメニューに関しての記述は、 2003年のA LIST APARTに掲載された 「Suckerfish Dropdowns」あたりが“ハシリ”ではないかと思います。 http://alistapart.com/articles/dropdowns サブメニューを下記のように一旦非表示にしておき、 li ul { display: none; position: absolute; top: 1em; left: 0; } マウスオーバー時に、表示するという方法をとっていました。 li:hover ul { display: block; } bare-bones example（原理だけのシンプルなサンプル） http://www.htmldog.com/articles/suckerfish/bones/ なお、「Suckerfish」とはコバンザメの意味です。 http://www.htmldog.com/articles/suckerfish/example/ 次回は、Dreamweaverを使っての実装についてみていきましょう。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト紹介：ユーザビリティ 実践メモ ──────────────────────────────────── ビービットさんが、ブログ形式でユーザビリティ関連の話題を取り上げています。 http://www.bebit.co.jp/memo/ オススメです。 ビービットさんは、 『ユーザ中心ウェブサイト戦略 − 仮説検証アプローチによるユーザビリティサイエンスの実践』や、 『ウェブ・ユーザビリティ ルールブック − 顧客を増やすサイト設計』などの著書です。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 話題紹介：ブラウザ・フォーマティング（CSSリセット）はどこへ行く？ ──────────────────────────────────── ブラウザごとに、たとえば、h1要素やp要素のマージンが異なるため、 一度、0にリセットしてしまう方法は、 ブラウザ・フォーマティング・スタイルとか、CSSリセットのように呼ばれます。 ユニバーサルセレクタを使って、下記のように書きます。 * { margin: 0; padding: 0; } または、次のように「font-style」や「font-weight」を加えて、 斜体を正体に、太字を並字にするなども行われます。 太字に関しては後から、hX要素などに設定し直す必要が生じるため、 かえって手間がかかると言われたり、言われなかったり.... * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } WebDesigningの最新号（2007年3月）の「CSS Analysis」にて、 大藤幹さんが、ユニバーサルセレクタを用いたブラウザ・フォーマティング・スタイルは、 使われなくなりつつあると書かれていますが、どうなんでしょうかね.... - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - CSS を作成する際のお約束：Lucky Bag http://www.lucky-bag.com/archives/2005/08/default_style.html ブラウザ間の差異をなくすCSSリセット：Emotional Web http://www.lllcolor.com/archives/200702/css_1.html 新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ：STOPN' LISTEN ※default.css http://stopnlisten.no.land.to/2007/02/css_4.html CSS 分割管理の実践編 ※common.css http://2xup.org/log/2006/12/13-0947 YUI Reset CSSｓ http://developer.yahoo.com/yui/reset/ *{ margin : 0 }はもう古い！？：Emotional Web http://www.lllcolor.com/archives/200702/margin0.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 書籍紹介：『実践 Web Standards Design』 ──────────────────────────────────── 『実践 Web Standards Design - Web標準の基本とCSSレイアウト&Tips』 という書籍が発売になりました。 このメルマガでも、よく取り上げている下記のサイトの方が執筆陣です。 http://www.lucky-bag.com/ http://hxxk.jp/ http://3ping.org/ さっそく読んでみましたが、ものすごいよいと思います。 Amazonで『実践 Web Standards Design』をチェックする： ↓ ↓ ↓ http://tinyurl.com/3cj7t2 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：数字でわかる最適レンタルサーバー ──────────────────────────────────── 続々と読み応えのあるコンテンツがアップされる「Web担当者Forum」。 とりあえず、ひとつご紹介します。 数字でわかる最適レンタルサーバー 〜もう迷わないサービス選びのコツ〜 http://web-tan.forum.impressrd.jp/e/2007/02/12/597 ぜひ、RSSで購読されるとよいと思います。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト紹介：【まる・てん.てん・】する ──────────────────────────────────── これは...........すごい！です。 http://marutenten.jp/mttstar/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 書籍紹介： 『カラー・ルールズ 色とデザインについて知っておきたいこと』 ──────────────────────────────────── 2006年10月の書籍なので、新刊というわけではないのですが、 『カラー・ルールズ 色とデザインについて知っておきたいこと』という書籍を紹介します。 http://tinyurl.com/2f9srn 同じ著者による『デザイン・ルールズ』と合わせてオススメします。 http://tinyurl.com/ywfd92 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - カラーといえば、explore＋create＋shareというコンセプトで、 Adobe Labsに「kuker」（クーラー）という、新しいテクノロジーが公開されています。 http://kuler.adobe.com/ アドビアプリ間で、配色などの共有が行えるようです。 http://blog.m-school.biz/article/28249238.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：Webプログラミングに役立つ Dreamweaverの基礎知識 ──────────────────────────────────── アドビのDreamweaverデベロッパーセンターというサイトに、 H2Oスペースのたにぐちまこと氏による 「Webプログラミングに役立つ Dreamweaverの基礎知識 開発環境として200％使いこなすためのポイント」 という記事が掲載されています。 http://www.adobe.com/jp/devnet/dreamweaver/articles/web_programing.html “Webプログラミングに役立つ”という切り口ですが、 Dreamweaverを使う方なら役立つ内容が満載です。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ セミナー紹介：『クリエイティブ・チルドレン・プロジェクト』 ──────────────────────────────────── ロフトワークさん主催で、小中学生を対象としたセミナー 「クリエイティブ・チルドレン・プロジェクト」が開催されます。 ■日程：3月21日（水・祝） ■URL：http://www.loftwork.jp/ccp/ ■参加費：無料、対象：小学生 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - レポートしそびてしまったのですが、1月31日に開催された 『CMS比較検討セミナー』に行ってきました。 こちらにレポートが掲載されています。 http://www.loftwork.jp/newsservice/report_pr20070131_CMS.html また、CMS導入における成功のポイント・失敗の要因という記事が掲載されています。 http://www.loftwork.jp/newsservice/CMSpoint.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：バーバル・アイデンティティ ──────────────────────────────────── BRAVIA、OPTIO、AQUOS、FOMAなどの商品名を考案した スコット・ミラノ氏のインタビューが掲載されています。 バーバル・アイデンティティ http://www.pingmag.jp/J/2007/02/23/verbal-identity/ バーバル（verbal）は「ことばによる」といった意味合いですが、 CI、VIならぬ「バーバル・アイデンティティ」という部門があるのが、 これまたすごいですね。 サイト名とか、商品名、サービス名などのネーミングの参考になるかも。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：日経IT pro「日々の作業効率を高める Dreamweaverの小技」 ──────────────────────────────────── 日経IT proにて、「日々の作業効率を高める Dreamweaverの小技」と題して、 私（鷹野雅弘）が、Dreamweaverの連載を開始しました。 第1回「ひきついだサイトはdivでいっぱい！」 http://itpro.nikkeibp.co.jp/article/COLUMN/20070214/261909/ 第2回「特定の要素（タグ）を削除したい」 http://itpro.nikkeibp.co.jp/article/COLUMN/20070222/262781/ 隔週ペースで連載予定です。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q and A：Dreamweaverで［タグを削除］が使えない ──────────────────────────────────── さっそくですが、上記のITproでの記事でご紹介したTips、 ［タグを削除］についてご質問いただきました。 タグセレクタで目的のタグを右クリックして表示するメニューから ［タグを削除］をクリックすると、閉じタグを含めてタグ削除できます。 まれにこの［タグを削除］が使えないことがあります。 その際には、親タグ／小タグを選択すると可能になります。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト記事紹介：JOBZINE「Internet Explorer 7対応は済みましたか？」 ──────────────────────────────────── 人材エージェント「AQUENT」のサイト「JOBZINE」内での連載、 第2回「Internet Explorer 7対応は済みましたか？」が掲載されました。 http://jobzine.aquent.co.jp/special/2007/02/2internet_explorer_7.php 次回のCSS Nite Vol.18のテーマはInternet Explorer 7対策特集。 マイクロソフトのInternet Explorer 7開発者の方にもご来場いただく予定です。 http://cssnite.jp/vol18/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 書籍紹介：『Webブランディングの入門教科書』 ──────────────────────────────────── 「WEBディレクションやってます blog」の八雲さんの初の著作、 『Webブランディングの入門教科書』が発売になりました。 http://web-directions.com/director/ 「企業側／Web制作側双方の視点で解説」とありますが、 どちらかというと、企業側の担当者に読んで欲しい本。 日々、担当者の教育に苦労されている方は、 1冊プレゼントしてもよいかもしれませんね。 Amazonで『Webブランディングの入門教科書』をチェックする： ↓ ↓ ↓ http://tinyurl.com/33mcwx ※八雲さんには、この著書の内容をもとに、 CSS Nite in Osaka 2007 春の陣にて、講演いただく予定です。 http://osaka.cssnite.jp/info2007spring.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ セミナー紹介：CSS Nite in Nagoya 2007（再掲） ──────────────────────────────────── CSS Nite名古屋版の第二弾。 現在、260名を超えるお申し込みをいただいています。 ※マイクロソフトによる「Expression Web」のセッションが追加になりました。 ◇イベント名：CSS Nite in Nagoya 2007 ◇開催日：2007年3月10日土曜日 ◇時間：11:00〜18:00 ◇場所：名古屋国際会議場 <http://www.ncvb.or.jp/ncc/shisetsu/ichiran/index.html> ◇主催：株式会社スイッチ ◇参加費：9,500円 → 5,000円 ◇出演： ・森田 雄（ビジネス・アーキテクツ） ・植木 真（インフォアクシア） ・益子貴寛（サイバーガーデン） ・鷹野雅弘（スイッチ） ・山田 あかね（エスカフラーチェ）*名古屋出身 ・齋藤雄一（ファンズ ジェイピー）*名古屋在住 ・やまもとかずみち（アップルップル）*名古屋在住 ・春日井良隆（マイクロソフト） ◇詳細とお申し込み：http://nagoya.cssnite.jp/info2007.html ----------- CSS Nite in Nagoya 2007に参加すべき11の理由 http://nagoya.cssnite.jp/11reasons.html ----------- CSS Nite in Nagoya 2007では次の4つの柱を設けています。 ・テーマA：ディレクションとワークフローの見直しと新たな視点 ・テーマB：アクセシビリティ概論と実装テクニック ・テーマC：CMSツールとして使われるblog、その実際と活用例 ・テーマD：CSSの基本とブラウザ互換 タイトルの「CSS」から離れたトピックが大半を占めますが、 Web業界に何らかのかかわりがある方にとって、 現在、また、近い将来に重要であると思われるトピックとしてチョイスしました。 下記ページに、それぞれのテーマに関して、 また、それぞれのセッションの意義などの説明を記載しました。 ぜひ、ご一読ください。 http://nagoya.cssnite.jp/info2007.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ イベント・カレンダー ──────────────────────────────────── ◇3月10日 CSS Nite in Nagoya <http://nagoya.cssnite.jp/> ◇3月15日 CSS Nite Vol.18 Internet Explorer 7対策特集 <http://cssnite.jp/vol18/> ◇3月23日 大藤幹さん in アップルストア札幌 <http://mixi.jp/view_event.pl?id=14395929&comment_count=4&comm_id=1126855> ◇3月24日 CSS Nite in Osaka 2007春の陣 <http://osaka.cssnite.jp/2007spring/> ◇3月31日・4月1日 XHTML+CSS実践講座（名古屋） <http://web.cybergarden.net/lectures/xhtmlcss_nagoya_200704.html> ◇4月12日 CSS Nite番外編 <http://cssnite.jp/extra/> ◇4月28日 CSS Nite in AOMORI <http://aomori.cssnite.jp> ◇5月12日 CSS Nite LP, Vol.3 "Coder's High" <http://lp3.cssnite.jp> ┼────────────────────────── あとがき ──────────────────────────┼ 100号になりました！ 我ながら、良く続いたもんだっ ご愛顧ありがとうございます。今後もよろしくお願いいたします。 ─［発行］───────────────────────────────── 株式会社スイッチ http://swwwitch.jp/ 鷹野雅弘 takano @ swwwitch.com 東京都足立区足立4-13-18 #307 TEL 03-5845-6950 ────────────────────────────────────── 現在、2,797名の方にご購読いただいています。ありがとうございます。 お知り合いの方、同僚、クライアント等にご紹介いただければ嬉しいです。 ご自由に転送ください。 セミナー情報や書籍情報などお持ちの方いらっしゃいましたら、 ご連絡くだされば幸いです。掲載料はいただいていません。 登録・解除・バックナンバーはこちらからです。 http://www.mag2.com/m/0000169311.html Copyright(c） 2006 Swwwitch, Inc. Some rights reserved. 記事が正確であることの保証はありません。 ご紹介するセミナーや書籍、サイトの品質を保証するものではありません。 書名、製品名および会社名は、それぞれ該当する権利者の登録商標または権利です。
