CSS Snippets #7

Tips

CSS Snippets #7

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

※以下で紹介するものは基本的にプレフィックスを省略しています。

※デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。

CSS Snippets #7 目次

  1. CSS変数(CSS Variables)
  2. imgのalt未指定を明示する
  3. 直前までに複数のnth-childで指定されたスタイルを上書く
  4. グラデーションを適用したシャドウを加える
  5. 頭文字が数字のid/classをセレクタ指定する
  6. コロンが含まれているid/classをセレクタ指定する
  7. ウィンドウサイズによってリストの見栄えを変更
  8. CSS Masonry
  9. CSS Glitch #1
  10. CSS Glitch #2

1. CSS変数(CSS Variables)

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

CSS

: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);
}

※IEは非対応。

目次へ

2. imgのalt未指定を明示する

See the Pen RBvxrp by Naoya (@nxworld) on CodePen.

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

CSS

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);
  }
}

目次へ

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

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

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

CSS

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をひとつずつ指定する必要がなくなります。

CSS

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;
}

目次へ

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

See the Pen bjzapv by Naoya (@nxworld) on CodePen.

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

CSS

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);
}

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

目次へ

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

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

HTML

<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>

CSS

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

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

CSS

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


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

目次へ

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

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

CSS

.color\:red {
  color: red;
}

or

CSS

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

目次へ

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

See the Pen Eproyx by Naoya (@nxworld) on CodePen.

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

CSS

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;
  }
}

目次へ

8. CSS Masonry

See the Pen CSS Masonry by Naoya (@nxworld) on CodePen.

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

CSS

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

目次へ

9. CSS Glitch #1

See the Pen Glitch Effect by Naoya (@nxworld) on CodePen.

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

HTML

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

CSS

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);
  }
}

目次へ

10. CSS Glitch #2

See the Pen Glitch Effect #2 by Naoya (@nxworld) on CodePen.

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

HTML

<p>Glitch Effect</p>

CSS

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に関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Close the search window,
please press close button or esc key.