【ITニュース解説】Untitled

このCodePenで示されているのは、ウェブページ上でよく見かける「ローディングアニメーション」、つまりユーザーにコンテンツの読み込み中であることを知らせるための視覚的なインジケータだ。この複雑に見えるアニメーションが、実はHTMLとCSSというウェブ開発の基本的な技術だけで作られている点が注目に値する。JavaScriptのようなプログラミング言語は一切使われていない。

まず、このアニメーションの「骨格」を理解するためにHTMLを見てみよう。HTMLはウェブページの構造を定義するマークアップ言語だ。ここでは非常にシンプルな構造が使われている。具体的には、divという汎用的な箱の要素が一つあり、その中にさらに三つのdiv要素が入れ子になっているだけだ。外側のdivにはloaderというクラス名が付与され、内側の三つのdivにはそれぞれinner one、inner two、inner threeというクラス名が付けられている。HTMLの役割は、アニメーションの部品となるこれらの「箱」を用意し、それぞれを識別するための名前（クラス名）を付けることにある。これだけでは画面には何も表示されない、ただの透明な箱の集まりに過ぎない。

次に、このHTMLの箱たちに「見た目」と「動き」を与えるCSSの役割を詳しく見ていこう。CSSはウェブページのスタイル、つまり色や形、配置、そしてアニメーションなどを定義するための言語だ。 まず、全体の背景色を濃い青色に設定し、アニメーションの中心となるローダー要素を画面の中央に配置している。これはbody要素に対してdisplay: grid; place-items: center; min-height: 100vh;といったスタイルを適用することで実現している。display: gridとplace-items: centerを組み合わせると、簡単に要素を中央に寄せることができる便利な方法だ。

ローダーの親要素であるloaderクラスを持つdivには、widthとheightを同じ値に設定し、border-radius: 50%;とすることで円形に整形されている。この設定により、子要素もこの円形の枠内に収まるような形になる。そして、このローダーアニメーションの最も重要な部分である「立体感」を出すために、perspective: 800px;というプロパティが適用されている。perspectiveは、要素を3D空間で表示する際に、見る人からどれくらいの距離にあるように見せるかを定義するもので、値が小さいほど遠近感が強調され、立体的に見えるようになる。

三つの子要素、つまりinner one、inner two、inner threeを持つdivは、position: absolute;とbox-sizing: border-box; width: 100%; height: 100%; border-radius: 50%;によって、親要素loaderの真上にぴったりと重なるように配置されている。これらはそれぞれ異なる色の境界線（border）を持っている。inner oneには下辺に、inner twoには右辺に、inner threeには上辺に、それぞれ異なる鮮やかな色の境界線が設定されている。この境界線が、回転アニメーションの際に視覚的なアクセントとなり、動きを際立たせる役割を果たす。

そして、このローダーアニメーションの核心部分がCSSのtransformプロパティと@keyframesルールだ。 transformプロパティは、要素の形、位置、サイズ、向きなどを変更するために使われる。特に3Dアニメーションでは、rotateX(), rotateY(), rotateZ()といった関数が重要になる。これらはそれぞれ、要素をX軸、Y軸、Z軸を中心に回転させるためのものだ。例えば、rotateX(35deg)は要素を水平方向の軸（X軸）を中心に35度傾ける、rotateY(-45deg)は垂直方向の軸（Y軸）を中心に-45度傾ける、rotateZ(360deg)は画面の奥行き方向の軸（Z軸）を中心に360度回転させる、という意味になる。これらのtransform関数を組み合わせることで、要素を3D空間内で自由に動かすことができる。

@keyframesルールは、アニメーションの「設計図」のようなものだ。アニメーションが開始する時点（fromまたは0%）と終了する時点（toまたは100%）で、要素がどのようなスタイルになっているかを定義する。このCodePenでは、rotate-one、rotate-two、rotate-threeという三つの異なる@keyframesルールが定義されている。それぞれのアニメーションは、特定のtransformの初期状態から、Z軸周りに360度回転した最終状態へと変化するように設定されている。興味深いのは、初期状態のtransformの値がrotateXとrotateYでそれぞれ異なっている点だ。これにより、三つのinner要素はそれぞれ異なる角度で傾いた状態で回転を開始するため、立体的な重なりや奥行きが強調された複雑な動きに見える。

最後に、これらのアニメーション設計図を実際の要素に適用し、その動作を制御するのがanimationプロパティだ。各inner要素には、animation: rotate-one 3s linear infinite;のようにanimationプロパティが適用されている。これは、「rotate-oneというアニメーションを、3秒かけて、一定の速度（linear）で、無限に（infinite）繰り返す」という意味になる。他のinner要素も同様に、異なる@keyframesルール（rotate-twoやrotate-three）を参照しながら、同じ速度と繰り返しでアニメーションが実行される。

このように、三つの円形要素がそれぞれ異なる初期角度からZ軸を中心に回転し、互いに重なり合いながら動くことで、あたかも複数のリングが絡み合って回転しているかのような、非常に洗練された視覚効果を生み出している。しかも、これらすべてがHTMLとCSSだけで実現されているのだ。JavaScriptを用いることなく、これほど高度なアニメーションを作成できるのは、CSSのtransformや@keyframesといった機能が非常に強力であることを示している。

システムエンジニアを目指す上で、このような基礎技術の理解は欠かせない。ウェブアプリケーションのユーザーインターフェース（UI）を開発する際には、見た目の美しさやユーザー体験の向上が重要となるため、CSSによるアニメーションは非常に重要なスキルの一つだ。CSSだけで実現できるアニメーションは、JavaScriptによるものに比べて一般的に動作が軽く、パフォーマンス面でも有利な場合が多い。このCodePenは、HTMLで構造を作り、CSSで見た目を整え、そして複雑な動きを加えるというウェブ開発の基本的な流れと、その可能性を具体的に示してくれる良い例と言えるだろう。