BooksホームWebデザインcssやプログラミングJavaScriptは使わず、CSS3でコンテンツフィルターを実装するAdscssやプログラミング2011.12.10土曜日なのでちょっとしたネタ。JavaScript無しで、CSSのみでコンテンツフィルターを実装する方法をご紹介。実用性は無いのでこんな事も出来るんだねくらいに受け止めていただけると。CSSのみでコンテンツをフィルタリングする、というもの。SampleChomre、Safari推奨です。JavaScriptは使用してません。これは属性セレクタじゃなくてもいいです。アニメーションエフェクトはtransitionを使用しています。フォーカスを利用するので選択中に出る枠を消します。賛否あると思うのでお好みでなんかしてあげてください。否定擬似クラスの:notを使って、フォーカス中の要素に該当するdiv以外のdiv要素を見えないようにする。class=”pink”>以外を取得(:not)しますので、その取得したアイテムを表示しない、という形でフィルタリング出来ます。否定擬似クラスはあまり聞き慣れないかも知れませんが、jQueryでは一般的なDOM操作で使われます。このようなフィルタは以前まとめたので動作の確認もあわせてどうぞ。これだけじゃ出来ません。HTMLにもう一工夫します。tabindex=”-1′′を使うんですね。・・キーボードアクセス出来なくなるので、アクセシビリティ的な問題もありますけど。仕組みはここが分かりやすいです。一部の方からお叱りも受けそうですが、IE8以下で使えないしiPhone等では使えないしで実のところ用途がありませんので大目に見て頂ければ。今日はこんな事も出来るんだっていうのを昨日知ったので休日のネタ的な感じで書いてみました。参照にしたのは以下です。好みなので自分用の備忘録です。jQueryselect要素の使い勝手を向上させる(かもしれない)UIを実装するスクリプト・Selectize.jsselect要素の使い勝手を良くする事が出来るかもしれないスクリプトのご紹介。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。