CSSの小技・セレクタ

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. CSSの小技・セレクタ

CSSの小技・セレクタ

CSSの小技・セレクタ

こんにちは、コーディング・デザイン担当の仁木です。
今回は覚えておくと便利なCSSのTipsを紹介したいと思います。

連続する要素の余白

リストなど同じ要素が連続する時に、最初または最後の要素のみ余白を変えます。

li + li

[+]は直後の兄弟要素を指します。
このセレクタだと直前にli要素がない、つまり最初のli要素のみを除外して[margin-top]が適用されます。

以下のセレクタでも同じことになります。

ここで使用している[:not]は”( )”[カッコ]内で指定したものを除外する否定の擬似セレクタです。”( )”[カッコ]内にはクラス名や、擬似クラスを指定します。[:last-child]は最後の子要素に適用される擬似セレクタになります。

テキストのないボタン、リンクにエラーをCSSで出力する

セマンティックなHTMLでは、要素の中にはテキスト、またはそれに代替するものは必ず入れるべきです。例えばボタンのデザインをされたa要素に対して、テキストでの表示はなくアイコンのみがある場合、ALT属性やWAI-ARIAの[aria-label]属性などを指定して代替テキストを入れておきましょう。
もし、そういったマークアップがされていないものがあった場合に警告文をCSSで表示するようにします。警告文が表示されないようコーディングしましょう。

最初のセレクタでは、aまたはbutton要素内にテキスト・画像などが何も含まれていない、かつ[aria-label]、もしくは[aria-labelleby]が設定されていない場合、赤背景に白文字で警告文が表示されます。

次のセレクタでは、aまたはbutton要素内にimg要素しか含まれていない、かつaまたはbutton要素に[aria-label]、もしくは[aria-labelleby]が設定されていない場合、画像をグレイスケールで表示します。

擬似セレクタ [:empty]

:emptyは要素の中身が空の状態を表します。空の状態とは、テキストや画像などコンテンツとなるものが何も入ってない空タグのことをさします。

要素を天地中央に配置

幅、高さが可変する要素に対して天地中央に表示する方法です。

HTML

CSS

幅、高さが固定の要素に対しては以下も有効です。

選択テキストの色を変える

テキストをドラッグした際、テキスト色と背景色が反転されますが、その色をカスタマイズします。

スクロールバーをカスタマイズ

コンテンツを全て表示させずボックス内でスクロールさせるような場合、スクロールバーをカスタマイズできます。

注意点
  • ブラウザによって、コンテンツがボックス内に収まっている場合など、スクロールする必要がなくてもスクロールバーエリアが表示されます。タブレット・スマホの時だけ表示したい時はメディアクエリを使用すると良いです。
  • [-webkit-overflow-scrolling: touch]が指定されていると上記の指定をしていてもスクロールバーが表示されなくなります。このプロパティはスマホなどでスクロールを滑らかにするためのプロパティです。

擬似クラス、擬似セレクタ

:hover

:hoverはカーソルが要素の上にのっている状態を表します。カーソルがのっているのみで、クリックされた場合は別の:activeの擬似クラスが適用されます。

:focus

:focusは要素が選択された状態を表します。<input>要素でテキストを入力する時など:focusが適用されています。

:focus-within

:focus-withinは要素自身、またはその要素の子孫の要素が選択された状態を表します。
これは具体的には、<form>タグ内の<input>要素などが選択されている時、<form>タグにもアクティブな状態をCSSでデザインする場合に有効です。

:active

:activeは要素が「クリックされてから離されるまで」の間のみ適用されます。

:first-child

:first-childは最初の子要素に適用されます。

:nth-of-type(n)

:nth-of-type()は”( )”[カッコ]内で指定したものに当てはまる要素に適用されます。「2」を指定した場合2番目の要素に適用されます。
また番号ではなく、偶数・奇数の要素や3の倍数の要素など、複雑なルールを設けて複数の要素に適用することも可能です。

前後の記事

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。 WANTEDLYで採用募集しております。詳しくはこちら