CSSの小技・セレクタ

仁木

2018/03/23

連続する要素の余白
1. li + li
テキストのないボタン、リンクにエラーをCSSで出力する
1. 擬似セレクタ [:empty]
要素を天地中央に配置
1. HTML
2. CSS
選択テキストの色を変える
スクロールバーをカスタマイズ
擬似クラス、擬似セレクタ

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

連続する要素の余白

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

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

<ul>

</ul>

li + li

/* li要素の直後の兄弟要素が同じli要素の場合 */
li + li {
  margin-top: 20px;
}

/* li要素の直後の兄弟要素が同じli要素の場合 */

li + li {

margin-top: 20px;

}

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

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

/* ul要素直下のli要素、かつ一番最後のli要素のみ除外する */
ul > li:not(:last-child) {
  margin-bottom: 20px;
}

/* ul要素直下のli要素、かつ一番最後のli要素のみ除外する */

ul > li:not(:last-child) {

margin-bottom: 20px;

}

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

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

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

/* ボタン・リンクに十分な情報（テキスト、aria-labelなど）が含まれていない場合の警告 */
a:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]):after {
　　background-color: red;
　　color: white;
　　content: "警告：このボタンに関する情報が十分ではありません。ボタンの中にテキストを含めてください。";
}

/* アンカー・ボタン要素内に画像のみ、かつALT属性やaria-labelなどの代替テキストが含まれていない場合 */
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]),
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]) {
　　background-color: red;
　　filter: grayscale(100%);
}

/* ボタン・リンクに十分な情報（テキスト、aria-labelなど）が含まれていない場合の警告 */

a:empty:not([aria-label]):not([aria-labelledby]):after,

button:empty:not([aria-label]):not([aria-labelledby]):after {

　　background-color: red;

　　color: white;

　　content: "警告：このボタンに関する情報が十分ではありません。ボタンの中にテキストを含めてください。";

}

/* アンカー・ボタン要素内に画像のみ、かつALT属性やaria-labelなどの代替テキストが含まれていない場合 */

a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]),

button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]) {

　　background-color: red;

　　filter: grayscale(100%);

}

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

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

擬似セレクタ [:empty]

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

要素を天地中央に配置

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

HTML

<div class="box">
  <p class="content">天地中央に表示します</p>
</div>

<p class="content">天地中央に表示します</p>

</div>

CSS

.box {
  position: relative;
  width: 100%;
  height: 300px;
}

.box .content {
  position: absolute;
  top: 50%;
  left: 50%;

  -ms-transform: translate(-50%, -50%); /* IE, EDGE */
  transform: translate(-50%, -50%);
}

.box {

position: relative;

width: 100%;

height: 300px;

}

.box .content {

position: absolute;

top: 50%;

left: 50%;

-ms-transform: translate(-50%, -50%); /* IE, EDGE */

transform: translate(-50%, -50%);

}

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

.box {
  position: relative;
  width: 100%;
  height: 300px;
}

.box .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  width: 80px;
  height: 80px;
}

.box {

position: relative;

width: 100%;

height: 300px;

}

.box .content {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

width: 80px;

height: 80px;

}

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

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

::selection {
  background: orrange; /*背景色*/
  color: white; /*文字色*/
}
::-moz-selection {
  background: orrange; /*背景色*/
  color: white; /*文字色*/
}

::selection {

background: orrange; /*背景色*/

color: white; /*文字色*/

}

::-moz-selection {

background: orrange; /*背景色*/

color: white; /*文字色*/

}

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

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

.box {
  height: 300px;
  overflow-y: scroll;
}
/*スクロールバーエリア*/
.box::-webkit-scrollbar {
  width: 5px;
}
/*スクロールバーの表示エリア*/
.box::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #eee;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
/*スクロールバーの動く部分*/
.box::-webkit-scrollbar-thumb {
  background-color: rgba(29, 33, 139, 0.7);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .7);
}

.box {

height: 300px;

overflow-y: scroll;

}

/*スクロールバーエリア*/

.box::-webkit-scrollbar {

width: 5px;

}

/*スクロールバーの表示エリア*/

.box::-webkit-scrollbar-track {

border-radius: 10px;

background-color: #eee;

box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);

}

/*スクロールバーの動く部分*/

.box::-webkit-scrollbar-thumb {

background-color: rgba(29, 33, 139, 0.7);

border-radius: 10px;

box-shadow:0 0 0 1px rgba(255, 255, 255, .7);

}

注意点

ブラウザによって、コンテンツがボックス内に収まっている場合など、スクロールする必要がなくてもスクロールバーエリアが表示されます。タブレット・スマホの時だけ表示したい時はメディアクエリを使用すると良いです。
[-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」を指定した場合２番目の要素に適用されます。
また番号ではなく、偶数・奇数の要素や３の倍数の要素など、複雑なルールを設けて複数の要素に適用することも可能です。

/* ul内の２番目のli要素 */
ul li:nth-of-type(2) {
  font-weight: bold;
}

/* 偶数の要素 */
ul li:nth-of-type(even) {
  font-weight: bold;
}

/* 3の倍数の要素 */
ul li:nth-of-type(3n) {
  font-weight: bold;
}

/* 4,7,10,13,16.....(3n+1)の要素 */
ul li:nth-of-type(3n+1) {
  font-weight: bold;
}