堀北真希うさぎ
主な作品
制作者に依るイラストと動画作品の一例

ページ案内▼

CSSのみでポップアップメニューが実現出来ない環境への対策。

CSSのみでポップアップメニューが実現出来ない環境への対策・目次。

まず初めに。

横一列に並んだメニューの見出しをマウスでポイントすると、その下に子メニューがポップアップするのは、多くのウェブサイトでご覧になった方も多いかと存じます。

これらの効果はDOMを用いてJAVAスクリプトで実現するものですが、CSSの仕様に忠実な環境であれば、JAVAスクリプトなど用いる事なくCSSだけで実現が可能です。

ですが、今日でも未だにCSSだけでの実現は不可能な環境も多々あり、それらへの対策が必要であればDOM操作を用いるしかありません。

ここでは、実際にDOM操作を用いる例を解説したいと思います。

何故ポップアップメニューを原則CSSだけで実現させるか。

既にJAVAスクリプトで実現しているポップアップメニューですが、わざわざCSSだけでやる必要は無いのではないかと言うご意見もあるかと思います。

ですが、この方法には結構利点が多いのです。

スクリプトに較べてエラー対策が容易
CSSはプログラミング言語ではないので、言語エラーに対する対処が容易になります。

一方、JAVAスクリプトはれっきとしたプログラミング言語ですので、エラーなどが発生した場合にはデバッグを行わなければなりません。

メニューをHTMLに直接記述出来る
メニューをスクリプトではなく、HTML文書に記述する事で、以下のような利点が生じます。
JAVAスクリプトに対応していない環境でも問題が起こり難い
スクリプトで書いたメニューはスクリプトに対応していないと表示させる事が出来ません。

このため、必要に応じて<noscript>要素で代替メニューを用意しなければなりませんが、初めからHTMLに書き下していれば、わざわざそのような事をする必要もありません。

ユーザスタイルシートとの相性が良い
従来のJAVAスクリプトに依る方法では、ポップアップメニューの作成時に生成したHTMLの要素がユーザスタイルシートを利用しているとそのまま表示されておかしな事になる場合があります。

HTMLにメニューを記述していれば、ユーザスタイルシートが余程変なものでない限り、あるべき位置に表示されるので問題が起こり難くなります。

  • 勿論、問題を起こり難くするには、CSSに対応していない環境でも適切な位置に記述され、適切にアクセスが出来るようにされている事が肝要です。Lynxなどで確認して問題が起こり難い状況であれば、ユーザスタイルシートを用いられても問題は起こり難くなるでしょう。
検索エンジンに有効なリンクをアピール出来る
今日、ウェブサイトが成功するには如何に検索エンジンに案内されるかと言う事が命題となっております。

検索エンジンにクロールされるにはHTMLでリンクをしていないといけません。

JAVAスクリプトだと、コードを解析する事が出来ないので、そこに書かれたリンクを追跡する事が出来ないのです。

その点、HTMLに記述さえしておけば、クローラは問題なくリンクの所在を知る事が出来て、有利になるでしょう。

と、このようにポップアップメニューをCSSで実現する方法は、意外にも沢山の利点がある事がお分かりいただけたでしょう。

CSSだけでポップアップメニューが実現出来ないブラウザの存在。

ですが、この文書を書いた平成21年10月16日現在、比較的多く用いられているブラウザのうち、以下のブラウザではCSSだけでポップアップメニューを実現する事が出来ません。

これらのブラウザは確かにアップデートに依りユーザ数は減少しつつありますが、まだまだ上位ヴァージョンに駆逐されたとは言えません。

つまり、当面これらの環境の存在を意識する必要はあると言えるのです。

制作者側が実際に取るべき道としては、以下の二つのいずれかでしょう。

前者の場合、ポップアップメニューとなる見出し部分が子メニューへのリンクとなっていれば、子メニューがポップアップしなくても問題なくサイトを利用する事が可能になります。

ここでは後者の場合を考えてみたいと思います。

実際にポップアップメニューを実現したサンプル。

原則としてCSSのみでポップアップメニューを実現するものの、CSSのみでの対応が不可能な

に限りJAVAスクリプトを用いた例を、以下の実験場で紹介しております。

試しに、PC環境の

などでご覧の方は、以下の実験サイトにアクセスしてみてください。

実際にポップアップメニューを実現するには。

原則としてCSSでポップアップメニューを実現します。

先ず基本として、CSS第二水準に準拠している環境であればCSSだけでポップアップメニューを実現する事が可能であるため、これらにはCSSで対応するものとします。

実際にCSSで対応するための方法は、以下の記事をご覧ください。

CSSだけで実現するポップアップメニュー
CSS小技集内の記事。

尚、以下、上記の記事をご覧になった事を前提に話を進めていきます。

CSSで実現するためのHTMLのマークアップとCSSでのスタイル定義について、最低でも以下の点は抑えておいてください。

  1. ポップアップメニューの本体は、MENU_NAVI と言うIDを与えられた<ul>要素である。
  2. ポップアップメニューの各列は、MENU_NAVI と言うIDを与えられた<ul>要素直下の<li>要素である。
  3. これらの要素はHTML文書中の任意の位置に記述可能である(CSSのポジショニングを用いれば、位置調整は自由自在であるため)。
  4. メニュー本体はポジショニングで文書冒頭部の中央に表示される。
  5. 通常、子メニューは非表示となっているが、見出し部分がマウスでポイントされると、子メニュー部分がCSSの :hover 擬似クラスを与えられた<p>要素に続く<ul>要素を指定する隣接セレクタで指定されたセレクタに依り、表示されるようになる。

CSSでポップアップメニューが実現対応出来ない環境へのスクリプト。

さて、初めに述べた通り、CSSだけで実現するポップアップメニューは

では対応出来ないので、これらに対応するためのスクリプトを書く事とします。

CSSでポップアップメニューが実現対応出来ない理由。

実際にスクリプトを書く前に、何故これらの環境が対応出来ないのかを解説しておきます。

ファイヤーフォックス 2.0の場合
ファイヤーフォックス 2.0の場合、CSS第二水準にて定義されている、display: inline-block; プロパティがサポートされていないのが原因です。

これさえサポートしていれば、問題なくポップアップしたのですが…。

インターネットエクスプローラ 6.0の場合
一方、インターネットエクスプローラ 6.0の場合はファイヤーフォックス 2.0より実現出来ない原因が多いのです。

インターネットエクスプローラ 6.0も、CSS第二水準にて定義されている、display: inline-block; プロパティがサポートされていません。

更に加えて、インターネットエクスプローラ 6.0には、隣接セレクタもサポートされておらず、これが致命的な原因となっております。

それだけではありません。インターネットエクスプローラ 6.0では、:hover 擬似クラスを与えた要素の子要素や後続要素を下位セレクタ(子孫セレクタ)や隣接セレクタ(そもそもサポートされていませんが)で指定しても正常に取扱ってくれないのです。

このように、原因がそれぞれ異なるため、それぞれに合わせたコードで対応する必要があると言う事になります。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com