すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。
先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。
内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。
ただ問題点として、対応ブラウザが webkit 系（Safari、Google Chromeなど）しかないこと。
また、正式に CSS3 として勧告されているわけではないこと（今 Safari でできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。
ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。（Safari のダウンロードはこちらから）
前回のエントリー「:target擬似クラスを使ったプルダウンメニュー」とややかぶる気がするけど、若干違う感じなので勘弁、ってことでｗn
この:target、使い方によってはonclickなどのjavascriptの代替としてかなり使えそうな予感。
しかも、物によってはページ内リンクとして動くので戻るを使って戻っても、移動する前と同じように見えたり、外部からも直接ページ内リンクも含めてリンクすることで見た瞬間にその項目を表示しておく、といった使い方もできそう。n
さて、今回のサンプルはアコーディオンメニューです。
今まではjavascriptなどで実現していたものを、CSSのみで実現してしまおう、というのが今回の趣旨です。n
RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。n
内容は、:target 擬似クラスを使った、windows のメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavaScript なしで CSS のみでやってしまおう、というのが今回の主旨。n
※追記[2010/01/29]
CSS のみで、かつハックやコメントを使わずにクリーンな状態でプルダウンを実装できるテクニックの紹介記事を書きました。
2 階層以降が作れない、などのデメリットもありますが、クリックしてプルダウンを固定することもできるので場合によってはとてもオススメのテクニックです。
ハックやJavaScriptを使わず、クリーンHTMLでIE6にも対応したプルダウンメニュー
※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。
でも、上記エントリーは IE 対策として JavaScript を併用したものでした。
が、なんと CSS のみでも IE6 にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。
ユウさんに指摘されて、縦バージョンのサンプルも作成してみました。
なぜ CSS のみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。
なんとなく思い立って、CSS のみでタスクバー風メニューを作ってみました。
（どちらかというとスタートメニューか）n
※ IE7 の場合、DOCTYPE を宣言しないと position:fiexd が効かないみたいでした・・。ので、それを追加したので IE7 でも同様に動作するようになっています。
※ Firefox2、Safari3、Opera9 で動作確認してます。それ以外では position:fixed がうまく動かない模様・・。
そのため、IE6 、7は挙動を少し変えてます。n
サンプルページの下の方にちょこっとある白い部分にマウスオーバーするとタスクバーのように現れます。
▼肝の CSS はこんな感じです。n
今回は、CSSのみを使ってポップアップヘルプを実現してみました。
どんなものかというと、特定の語句に説明をつける際、
ポイントしたときにヘルプ表示がポップアップで出てくるようなのを
見かけたことはありませんか？
あれを、javascriptを使わずに、しかも使い回しができるように
CSSで作成してみました。
サンプルはこちら↓http://www.green.dti.ne.jp/edo/web-test/test10/
CSSはこちら↓http://www.green.dti.ne.jp/edo/web-test/test10/index.css
↑サーバ解約したため、サンプルが消えてしまいました(；´д｀)
時間をみて再アップします・・・。n
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
