CSS Snippets #7

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介する第7弾です。
以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。

サンプルコードは基本的にプレフィックスを省略しています。
デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。

CSS変数（CSS Variables）

CSSで何度も記述（複数箇所に記述）するものは、CSS変数を用いて指定しておくのが便利です。
例えばサイト内で頻繁に使用するカラーがあった場合、それをわかりやすい変数名にしておくことで記述する度にカラーコードを確認するなどの手間が省けますし、あとでそのカラーコードが変更になったというときにも変数として定義した箇所のコードを変えるだけですべてに適用させることができます。
使用する場合は、まず下記のようにコード上部にある:rootに記述しているような形でそれぞれ定義し、実際にそれを呼び出したいときはbodyで指定しているようにvar(--ここ変数名)という形で記述します。

IEは非対応

:root {
  --base-color: #000;
  --base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --base-font-size: 1.4rem;
}
body {
  color: var(--base-color);
  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
}

imgのalt未指定を明示する

属性セレクタや否定疑似クラスを用いて、img要素にalt属性がちゃんと設定されているかをチェックするデバッグ向けのスニペットです。
下記の場合はanimationを組み合わせて、alt属性が記述されてない、もしくは記述はされているけど空になっていると画像周りに表示されたボーダーが点滅するというものになります。

img[alt=""], img:not([alt]) {
  border: 5px solid;
  animation: alt-none 1s infinite;
}
@keyframes alt-none {
  0%, 100% {
    border-color: rgba(255, 0, 0, 1);
  }
  50% {
    border-color: rgba(255, 0, 0, 0);
  }
}

直前までに複数のnth-childで指定されたスタイルを上書く

例えば、:nth-child疑似クラスを用いて複数の要素に別々のスタイル指定をしており、その後これら複数の要素へ同じスタイルを上書こうとすると要素名やclass名にスタイルを指定するだけでは詳細度の問題で適用されず同じように:nth-child疑似クラスを用いた形で指定する必要があります。
このような場合でもまとめてスタイル指定を適用させる方法です。

具体的なサンプルコードをあげると、下記のように:nth-child疑似クラスを用いて特定数の要素のみbackgroundを変更するCSSがあったとき、その後これらの要素すべてに同じようにスタイルを指定したい場合でもelement { background: black; }のような指定では上書きできないので、はじめのスタイル指定と同じように:nth-childを用いてすべて指定していく必要があります。

element:nth-child(1) {
  background: red;
}
element:nth-child(3) {
  background: blue;
}
element:nth-child(4),
element:nth-child(5) {
  background: yellow;
}

/* 上記要素の背景色スタイルを上書き */
element:nth-child(1),
element:nth-child(3),
element:nth-child(4),
element:nth-child(5) {
  background: black;
}

これは下記のように数値などを指定する箇所にnを記述することでまとめて指定することができ、わざわざ:nth-childをひとつずつ指定する必要がなくなります。

element:nth-child(1) {
  background: red;
}
element:nth-child(3) {
  background: blue;
}
element:nth-child(4),
element:nth-child(5) {
  background: yellow;
}

/* 上記要素の背景色スタイルを上書き */
element:nth-child(n) {
  background: black;
}

グラデーションを適用したシャドウを加える

要素にシャドウをつけたい場合はbox-shadowで実装が可能ですが、シャドウカラーは単色でしか指定することができません。
それを下記のように擬似要素でシャドウとして見せる要素を作成して、そこにbackground: linear-gradient();とfilter: blur();を組み合わせることで、シャドウカラーをグラデーションにすることができます。

IEはfilter: blur();が非対応のため、カバーする場合は別途ライブラリを組み合わせるなど必要です。

element {
  position: relative;
  background: linear-gradient(135deg, #feac5e, #c779d0, #4bc0c8);
}
element::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10%;
  z-index: -1;
  width: 90%;
  height: 30%;
  background: inherit;
  transform: translateX(-50%);
  filter: blur(10px);
}

頭文字が数字のid/classをセレクタ指定する

頻繁に使うものではないと思いますが、下記のように頭文字で数字が使われたid/classをセレクタに指定する場合、例えば#1や.1といったようにそのまま記述してもスタイルは適用されません。

<p id="1">id="1"</p>
<p id="2blue">id="2blue"</p>
<p id="3yellow">id="3yellow"</p>

<p class="1">class="1"</p>
<p class="2blue">class="2blue"</p>
<p class="3yellow">class="3yellow"</p>

#1 {
  color: red;
}
#2blue {
  color: blue;
}
#3yellow {
  color: yellow;
}
.1 {
  color: red;
}
.2blue {
  color: blue;
}
.3yellow {
  color: yellow;
}

このようなid/classを使用している場合は、下記のようにセレクタ指定時に数字のエスケープを行う形で指定したり、属性セレクタを使用した形で指定することでスタイルを適用させることができます。

#\31 {
  color: red;
}
#\32 blue {
  color: blue;
}
[id="3yellow"] {
  color: yellow;
}
.\31 {
  color: red;
}
.\32 blue {
  color: blue;
}
[class="3yellow"] {
  color: yellow;
}

ちなみに、エスケープの記述方法がわからないとか考えるのが面倒な場合は、以下のようなツールを利用すると楽です。

CSS escapes

コロンが含まれているid/classをセレクタ指定する

例えばclass="color:red"のように、id/class名の中にコロン（:）が含まれている要素にスタイルを指定したい場合は、同じくエスケープを行う形や属性セレクタを使用した形で下記のように記述することでスタイルを適用させることができます。

.color\:red {
  color: red;
}

/* or */

[class="color:red"] {
  color: red;
}

ウィンドウサイズによってリストの見栄えを変更

ウィンドウサイズが小さいときはリストをカンマ（,）区切りで表示し、大きいときはデフォルトのul使用時のようにマーカーを用いたリストで表示させるというもので、カンマは疑似要素を利用して表示させます。

ul li {
  display: inline-block;
  list-style: none;
}
ul li:not(:last-child)::after {
  content: ',';
}

@media (min-width: 768px) {
  ul li {
    display: list-item;
    list-style: disc;
  }
  ul li:not(:last-child)::after {
    content: none;
  }
}

CSS Masonry

通常はJavaScriptを用いるようなMasonryレイアウトをCSSのみで実装してみたものです。
細かい部分で融通効かなかったりしますが、とりあえずそれっぽく見せるだけであれば下記のような形で実装でき、サンプルコードのようにcolumn-countを用いて表示段数を設定する形だけでなくcolumn-widthを用いて段幅で設定する形でもできます。

ul {
  column-count: 3;
  column-gap: 1.5em;
}
ul li {
  break-inside: avoid-column;
}

CSS Glitch #1

CSSを使ってテキストに簡易的なグリッチエフェクトを付けるものです。
実装にはそれぞれ下記のように記述し、HTMLは表示するテキストと同じ内容をdata属性にも指定して、CSSは擬似要素を使ってdata属性の内容を表示しつつtransformで細かく動くアニメーションを実装します。

<p data-text="Glitch Effect">Glitch Effect</p>

p {
  position: relative;
  color: #fff;
}
p::before,
p::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content :attr(data-text);
}
p:before {
  color: purple;
  z-index: -1;
  animation: glitch01 .3s ease .3s infinite;
}
p:after {
  color: cyan;
  z-index: -2;
  animation: glitch02 .3s ease infinite reverse;
}
@keyframes glitch01 {
  0%  {
    transform: translate(-2px, 2px);
  }
  25% {
    transform: translate(-4px, -4px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  75% {
    transform: translate(2px, -4px);
  }
  100% {
    transform: translate(-2px, 2px);
  }
}
@keyframes glitch02 {
  0%  {
    transform: translate(-2px, 2px);
  }
  25% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  75% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(-2px, 2px);
  }
}

CSS Glitch #2

同じくCSSを使ってテキストに簡易的なグリッチエフェクトを付けるものです。
実装にはそれぞれ下記のように記述し、transformを使ったアニメーションを付けているなど基本的な部分は先ほどと同様ですが、見栄えを作るのに擬似要素ではなくtext-shadowを用いています。

<p>Glitch Effect</p>

p {
  color: #fff;
  text-shadow: 3px 3px 3px purple, -2px -2px 6px cyan;
  animation: glitch 3s ease infinite;
}
@keyframes glitch {
  0%, 30%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
    transform: skew(0deg);
  }
  31%, 91% {
    transform: skew(10deg, 0deg);
  }
  32%, 92% {
    transform: skew(-10deg, 0deg);
  }
  61% {
    transform: skew(30deg);
  }
  62% {
    transform: skew(-10deg, -5deg);
  }
  65% {
    transform: skew(10deg, -5deg);
  }
  70% {
    transform: skew(-60deg);
  }
  74% {
    transform: skew(10deg, -10deg);
  }
}

その他のCSS Snippetsに関しては下記ページから確認できます。

CSS Snippets