メニュータイトル（項目）をクリックすると、隠されていたメニューがアコーディオンが展開されるように現れるようなタイプのメニューを、アコーディオンメニューと言います。

メニュー項目の増減により要素の縦幅が変わっても大丈夫なアコーディオンメニューを、素のJSで実装する方法をご紹介します！

データの読み込みが完了するまで表示される、クルクル回るアレ。皆さんも目にしたことがあるかと思います。

今回は、そのローディング（待機状態）アニメーションをCSSだけで実装する方法をご紹介します！

具体的には、記事のサムネイルに掲載されている３種類のローディングアニメーションを作っていきます。

直線が引かれるアニメーションは比較的簡単に実装できるのですが、直線ではなく曲線…たとえば円を描くようなアニメーションは意外と面倒くさいです。

円を描くアニメーションは、SVGデータを使って破線を伸ばしていく方法もあるのですが、SVGのデータを用意するのってちょっと面倒くさいですよね。

ということで今回は、CSSとJavaScriptのみで円を描くアニメーションを作ってみたいと思います！

プログラミングでお馴染みの変数ですが、CSSでもカスタムプロパティ（CSS変数）として扱うことが可能です。

この記事では、カスタムプロパティの使い方と注意点、少し応用的な使い方について解説しています。

@layerについて

@layerでスタイルを調整することで、簡単に変更前の状態に戻せたり、複数の見た目の調整を１つのCSSファイルで管理できたりなどのメリットが得られます。

今回は、CSSの@layer（レイヤー）を利用してスタイルを調整する方法をご紹介します。

box-sizingについて

padding＝内側の余白というのはCSSの基礎ですが、内側の余白ならば余白が親要素をはみ出すことはない気がしてしまいます。
しかし、これは間違いです。

paddingが親要素からはみ出てしまった場合の対処法をご紹介します。

aspect-ratioについて

Webページには画像を配置することも多いですが、パソコンとスマートフォンで画像の縦横比を変えたい…という場合も多いですよね。
ですが、縦横比を計算してheightを指定するのも面倒です。

そこで、aspect-ratioを使ってheight値はautoのまま、画像の縦横比を変える方法をご紹介します。

疑似クラス:has( )について

:has( )は2022年10月現在、ようやく主要なブラウザでのサポートが広まった新しい擬似クラスです。
特定の子要素を持つ親要素をセレクタ指定する際に便利なので、ぜひ基本的な使い方を押さえておきましょう。

疑似クラス:notの基本と便利な使い方

CSS調整では『特定の要素だけ適用を除外させたい』という場合がしばしばあります。
そんな時に便利なのが、疑似クラス:notです。
この記事では:notの使い方と活用法についてご紹介します。

CSSの擬似クラス:targetを使ったライトボックス

ライトボックスは通常、JavaScriptを使って実装されることが多いかと思いますが、工夫次第でCSSだけでも実装可能です。

今回は、擬似クラスの一つである:targetを使って、ライトボックスを実装する方法をご紹介します。