今回はCSSとJavascriptを使って、ドロップダウンメニューを作ります。
CSSのみで作成することも可能ですが、どうもMacIE5.2で動かないのです。。。確かに仕事をしていて、今の対象ブラウザにMacIE5.2が入っているのはどうかと思うところもありますが、まだ使用している人もいるのは事実。。。
私自身、本や他のサイトを参考にさせてもらってますが、なかなか色々なブラウザに対応したものがなくて苦労しました。次に探すのも面倒なので、ここに解説を載せておきます。
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。
ここでは、CSSハックを紹介します。Netscape Navigator4.0といった古いブラウザでは、CSSのサポートが不十分なために、モダンブラウザと同じレイアウトができないことがあります。またレイアウトがくずれてしまう時もあります。そこでCSSハックを用いて一部のブラウザに対してCSSを読み込ませないようにする方法が一般的となっています。
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。
ここではfloatで作る3段組(可変)を解説します。
3段組(固定)の仕組みを理解したら、すぐに理解できるものです。
ここでは、3段組(固定)で作ったベースを利用して、3段組(可変)を作ってみます。
ここではfloatで作る3段組(固定)を解説します。
よくブログなどでみることが多いレイアウトです。2段組の仕組みを理解したら、すぐに理解できるものです。
ここでは、2段組で作ったベースを利用して、3段組みを作ってみます。
ここではfloatで作る2段組(センター揃え)を解説します。
センター揃えとは表示領域がウィンドウの中央に位置しているものです。今でこそ左端を基準にしたサイトというものは増えてきていますが、仕事をしているとセンター揃えのサイトを作ることは結構あります。
ここではfloatで作る2段組(固定)を解説します。
CSSでのレイアウトの基本となるものですので、とっかかりには最適だと思います。
ここでは本文(#primary)と関連情報(#secondary)から構成される簡単な段組みを作ってみます。
ブラウザには様々なものがあります。Windowsであれば、Internet ExploreやFirefox、Netscape Navigatorと様々なものがあります。
続きを読む ブラウザとモニター
