Help us understand the problem. What is going on with this article?

CSSでフィルタリングタブ

More than 1 year has passed since last update.

CSSでフィルタリングタブ

by Gatz
1 / 9

動機

  • タブ切り替え時、未選択状態では全て表示しておいてもらいたい
  • しかし、既存のタブ切り替えの初期状態は、
    • 選択されるまでコンテンツは非表示
    • どれが一つが選択されている(たいてい最初の項目)
  • どうすればいいのか?

セレクタで列挙する

/* チェックされたら表示 */
#members:checked          ~ * ul.members li,                                                                                                                        
#blueprints:checked       ~ * ul.blueprints li,                                                                                                                     
#notations:checked        ~ * ul.notations li{                                                                                                                      
    display: block;                                                                                                                                                 
}                                                                                                                                                                   

/* チェックされてなかったら非表示 */                                                                                                                                               
#members:not(:checked)          ~ * ul.members li,                                                                                                                  
#blueprints:not(:checked)       ~ * ul.blueprints li,                                                                                                               
#notations:not(:checked)        ~ * ul.notations li{                                                                                                                
    display: none;                                                                                                                                                  
}                                                                                                                                                                   

/* 全部チェックされてなかったら表示 */                                                                                                                                    
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.members li,                                  
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.blueprints li,                               
#members:not(:checked) ~ #blueprints:not(:checked) ~ #notations:not(:checked) ~ * ul.notations li                                 
{                                                                                                                                                                   
    display: block;   
}


欠点

  • 書き下すのがめんどくさい
  • 有限ならまだしも、動的に項目数が変わった場合とかどうすんの!?
  • なんとかならないものか...

タブ切り替え再考

  • これから表示するものを選択するのではない
  • 表示しているものから抽出して表示したいのだ
  • 既存のタブ切り替えと違うのであるから、従来のやり方では無理がある

  • 挙動からフィルタリングタブと命名(my造語たぶん)


方針

  • 素直に、表示している状態を初期状態として
  • 選択したもの以外を非表示にすれば良い
  • そのためには...? notセレクタを使う!

フィルタリングタブ

  • 選択された項目の識別子を持たない要素の子要素は、非表示
#members:checked          ~ * label ~ ul:not(.members) li,
#blueprints:checked       ~ * label ~ ul:not(.blueprints) li,
#notations:checked        ~ * label ~ ul:not(.notations) li{
    display: none;
}
  • 1/3行に減ったぜ、、、

実例

See the Pen filteringTab by H-Katz (@HGatz) on CodePen.


まとめ

  • 表示したものから条件で抽出して表示したい場合、notセレクタを使えば短くできる
  • 項目が動的に増えても、増えた分類に対して1行CSSを追加するだけで良い
Gatz
RubyやJavaScript がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした