dtタグとddタグ、定義タグって言われるものです。このタグはデフォルトだと真下に並んで使いづらいですよね。そこでこのタグを横並びにする方法を紹介します。
カテゴリー: Web
pngを使う
ここでは、png(ピング)を使った表示方法を解説します。
JavaScriptを使ったCSSの切り替えのテクニックは結構有名ですので、おぼえておいても損はしないと思います。
ここでは「A List Apart」というサイト(英語)でフリーで配布されている「styleswitcher.js」というスクリプトを使用します。
一番下の近くに”Download styleswitcher.js”という項目があるので、それをクリックしてダウンロードしてください。
CSS+JSで作るドロップダウンメニュー
CSS+JSで作るドロップダウンメニュー
今回はCSSとJavascriptを使って、ドロップダウンメニューを作ります。
CSSのみで作成することも可能ですが、どうもMacIE5.2で動かないのです。。。確かに仕事をしていて、今の対象ブラウザにMacIE5.2が入っているのはどうかと思うところもありますが、まだ使用している人もいるのは事実。。。
私自身、本や他のサイトを参考にさせてもらってますが、なかなか色々なブラウザに対応したものがなくて苦労しました。次に探すのも面倒なので、ここに解説を載せておきます。
floatで作る横並びメニュー
floatで作る横並びメニュー
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。
CSSハック一覧
ここでは、CSSハックを紹介します。Netscape Navigator4.0といった古いブラウザでは、CSSのサポートが不十分なために、モダンブラウザと同じレイアウトができないことがあります。またレイアウトがくずれてしまう時もあります。そこでCSSハックを用いて一部のブラウザに対してCSSを読み込ませないようにする方法が一般的となっています。
floatで作る縦並びメニュー
floatで作る縦並びメニュー
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。
floatで作る3段組(可変)
ここではfloatで作る3段組(可変)を解説します。
3段組(固定)の仕組みを理解したら、すぐに理解できるものです。
ここでは、3段組(固定)で作ったベースを利用して、3段組(可変)を作ってみます。
floatで作る3段組(固定)
ここではfloatで作る3段組(固定)を解説します。
よくブログなどでみることが多いレイアウトです。2段組の仕組みを理解したら、すぐに理解できるものです。
ここでは、2段組で作ったベースを利用して、3段組みを作ってみます。
floatで作る2段組(センター揃え)
ここではfloatで作る2段組(センター揃え)を解説します。
センター揃えとは表示領域がウィンドウの中央に位置しているものです。今でこそ左端を基準にしたサイトというものは増えてきていますが、仕事をしているとセンター揃えのサイトを作ることは結構あります。
floatで作る2段組(固定)
ここではfloatで作る2段組(固定)を解説します。
CSSでのレイアウトの基本となるものですので、とっかかりには最適だと思います。
ここでは本文(#primary)と関連情報(#secondary)から構成される簡単な段組みを作ってみます。