2022年5月24日SHAREツイートシェアはてブLINEPocket今回は、ワンランク上のCSSのテクニックを身につけるために、フクロウセレクタをご紹介します。selector)は要素の間隔を設定する際に重宝するセレクタです。繰り返し要素が並ぶようなデザインの時に活用するとCSSの記述量が減ります。シンプルな実装方法なのでメンテナンス性も上がります。頻出度合いが高めなので覚えておいて損はないでしょう。コーディングのスピードアップをしたい人やCSSが複雑になっている人にもおすすめです。フクロウセレクタとは?フクロウセレクタは最初の要素以外を指定するセレクタフクロウセレクタはユニバーサルセレクタ(*)と次の兄弟要素を指定する隣接セレクタ(+)の組み合わせでつくられた「*+*」というセレクタのことです。CSSのセレクタとしてこの指定方法をを使うことで二番目以降の要素を指定することができます。最初以外の要素と言い換えることもできます。*/}ユニバーサルセレクタが全ての要素を指定するのに対し、フクロウセレクタは最初の要素を除いた二番目以降の要素を指定します。フクロウセレクタを使うシチュエーションフクロウセレクタは、リストが縦に何個も並んでいる場合に余白を要素と要素の間に余白を持たせたい場面で使うことができます。30px;}そのほかにもいろいろなケースで活用することができます。以下のようなケースです。ブログ記事で段落と段落の間に余白を持たせたいヘッダーでアイコンが横一列に並んでいて余白を持たせたいメニューの項目と項目の間にボーダー(境界線)をつけたい他の代替案よりも優れているフクロウセレクタフクロウセレクタはシンプルな実装方法で問題への解決策を提供します。他の代替案よりも最小限の記述量で要素を指定できますし、複数のセレクタにスタイルが分散することも防げます。以下の方法が代替案の例になりますが、ほとんどのケースはフクロウセレクタによって書き換えることができます。none;}境界線をこのようなやり方で指定する方法もありますが、記述量が多いこととスタイルが2箇所に分散して記述されてしまっていることでメンテナンス性を犠牲にしています。#000;}:not(:first-child)によるスタイリング:not(:first-child)という否定擬似クラスnotと最初の子要素を指定するfirst-child擬似グラスとの組み合わせによっても最初の要素以外に同じスタイルをあてられます。ほとんど変わりはありませんが、こちらも記述量が若干増えるという点でフクロウセレクタの方が優れているといえます。#000;}YutoSeta僕は、コーディングの効率を徹底的にあげるためにこのようなシチュエーションは全てフクロウセレクタを使うようにしています。フクロウセレクタ唯一の欠点わかりにくいです。見た人からすると直感的に振る舞いが予想できないのが欠点です。セレクタ一つ一つの意味を分解すれば予想することもできるのですが、大人数で開発するときには事前にフクロウセレクタの知識を共有しておかないと他の人は混乱するかもしれません。実際によくあるシチュエーションを簡単なデモで再現しました。自分で実装する際の参考にしてください。CodePen.まとめフクロウセレクタを使う事で今まで行なっていた複雑な実装をシンプルにスッキリと記述することができるようになりました。知らなかった方はこれを機にどんどん活用してみてください。今回の記事はよりターゲットが明確でメッセージもシンプルだったということもあってかなりわかりやすい記事がかけたような気がしています。?フクロウセレクタって名前がかわいい。フクロウセレクタを知っている人ってどれくらいの割合なんだろうか。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。