2018TipsCSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。※以下で紹介するものは基本的にプレフィックスを省略しています。※デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。Variables)CSSで何度も記述(複数箇所に記述)するものは、CSS変数を用いて指定しておくのが便利です。サイト内で頻繁に使用するカラーがあった場合、それをわかりやすい変数名にしておくことで記述する度にカラーコードを確認するなどの手間が省けますし、あとでそのカラーコードが変更になったというときにも変数として定義した箇所のコードを変えるだけですべてに適用させることができます。使用する場合は、まず下記のようにコード上部にある:rootに記述しているような形でそれぞれ定義し、実際にそれを呼び出したいときはbodyで指定しているようにvar(--ここ変数名)という形で記述します。var(--base-font-size);}※IEは非対応。CodePen.属性セレクタや否定疑似クラスを用いて、img要素にalt属性がちゃんと設定されているかをチェックするデバッグ向けのスニペットです。下記の場合はanimationを組み合わせて、alt属性が記述されてない、もしくは記述はされているけど空になっていると画像周りに表示されたボーダーが点滅するというものになります。直前までに複数のnth-childで指定されたスタイルを上書く例えば、:nth-child疑似クラスを用いて複数の要素に別々のスタイル指定をしており、その後これら複数の要素へ同じスタイルを上書こうとすると要素名やclass名にスタイルを指定するだけでは詳細度の問題で適用されず、同じように:nth-child疑似クラスを用いた形で指定する必要があります。このような場合でもまとめてスタイル指定を適用させる方法です。}のような指定では上書きできないので、はじめのスタイル指定と同じように:nth-childを用いてすべて指定していく必要があります。black;}これは下記のように数値などを指定する箇所にnを記述することでまとめて指定することができ、わざわざ:nth-childをひとつずつ指定する必要がなくなります。CodePen.要素にシャドウをつけたい場合はbox-shadowで実装が可能ですが、シャドウカラーは単色でしか指定することができません。blur();を組み合わせることで、シャドウカラーをグラデーションにすることができます。blur();が非対応のため、IEもカバーするのであれば別途ライブラリを組み合わせるなどする必要があります。頭文字が数字のid/classをセレクタ指定する頻繁に使うものではないと思いますが、下記のように頭文字で数字が使われたid/classをセレクタに指定する場合、例えば#1や.1といったようにそのまま記述してもスタイルは適用されません。yellow;}このようなid/classを使用している場合は、下記のようにセレクタ指定時に数字のエスケープを行う形で指定したり、属性セレクタを使用した形で指定することでスタイルを適用させることができます。yellow;}ちなみに、エスケープの記述方法がわからないとか考えるのが面倒な場合は、以下のようなツールを利用すると楽です。コロンが含まれているid/classをセレクタ指定する例えばclass="color:red"のように、id/class名の中にコロン(:)が含まれている要素にスタイルを指定したい場合は、同じくエスケープを行う形や属性セレクタを使用した形で下記のように記述することでスタイルを適用させることができます。CodePen.ウィンドウサイズが小さいときはリストをカンマ(,)区切りで表示し、大きいときはデフォルトのul使用時のようにマーカーを用いたリストで表示させるというもので、カンマは疑似要素を利用して表示させます。CodePen.通常はJavaScriptを用いるようなMasonryレイアウトをCSSのみで実装してみたものです。細かい部分で融通効かなかったりしますが、とりあえずそれっぽく見せるだけであれば下記のような形で実装できます。サンプルコードの場合はcolumn-countを用いて表示段数を設定する形ですが、column-widthを用いて段幅で設定する形でもできます。CodePen.CSSを使ってテキストに簡易的なグリッチエフェクトを付けるものです。実装にはそれぞれ下記のように記述し、HTMLは表示するテキストと同じ内容をdata属性にも指定して、CSSは擬似要素を使ってdata属性の内容を表示しつつtransformで細かく動くアニメーションを実装します。CodePen.同じくCSSを使ってテキストに簡易的なグリッチエフェクトを付けるものです。実装にはそれぞれ下記のように記述し、transformを使ったアニメーションを付けているなど基本的な部分は先ほどと同様ですが、見栄えを作るのに擬似要素ではなくtext-shadowを用いています。Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。