Harukiya Archives

2008/10/13

category /


2005/07/06

category / CSS

そういうわけで(謎)いろいろとテスト中。

Mozilla の独自拡張(CSS3で実装予定)の:target擬似クラスを使ってみる。内部アンカー名(javascriptのlocation.hash)と一致した一意セレクタがURLに含まれている場合にのみ適用されるスタイル。(らしい)

css

  1. #menu {
  2. display: none;
  3. _display: block; /* IE hack */
  4. }
  5. :target#menu {
  6. display: block;
  7. }

上記のように記述しておき、呼び出し部を<a href="#menu">メニュー</a>などとする。このアンカーが呼ばれ、URLに#menuが含まれている間だけメニューブロックを表示させることができる。こりゃもう、スクリプトいらないな。

> :target擬似クラスのサンプル

わかりにくいですが、本文ではなくトップメニュー部分に仕込んであります。Firefoxで動作確認。Safariでも動くそうです(多謝:Chakoさん)


writeback

  1. Chako : こんなことができるんですね〜!ちょっとワタシもテストしてみました。
    うちのMac版Firefox&Safariではちゃんと動いていますが、今はまだブラウザによってはダメってことですか?
    早く使えるようになるといいですね〜...
    sugさんの発想力ってすごいです。「ターゲット擬似クラス:target」の部分を読んでみても、こういう使い方にまで考えが及びません..というか...ちんぷんかんぷん(T.T)もっとお勉強しなくちゃ...です。-07日11時
  2. マス : >今はまだブラウザによってはダメってことですか?
    草案なので勧告に取り入れられるかすら未定ですね。
    先行実装ってやつです。
    http://www.google.co.jp/search?hl=ja&c2coff=1&q=CSS3+%E5%85%88%E8%A1%8C%E5%AE%9F%E8%A3%85&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=

    >ちんぷんかんぷん(T.T)
    原文(英語読めませんが)なんか、わざとむつかしく書いてあるとしか思えませんよねw-07日19時
  3. マス : 今のテンプレは改装中なんで、サンプル上げときました。
    折りたたみスクリプトのページに仕込むところが、そこはかとなくアイロニー。-07日20時
  4.  


< 美人薄命 | 遅々として > | 表紙へ戻る | 探す | 案内


ホームページ アフィリエイト レンタルサーバー FC2ブログ キャッシング