【ITニュース解説】Untitled

ウェブページ上に表示される、まるで生きているかのような動きや、ユーザーの操作に反応するインタラクティブな表現は、現代のウェブサイトでは当たり前のように見られる。今回紹介する記事では、そのような動的な表現の一つである、カラフルな棒が波打つようにアニメーションするデモが、どのように作られているかを解説する。このデモは、ウェブページの見た目や動きを定義するための二つの基本的な技術、HTMLとCSSだけで実装されている点が特徴である。

まず、ウェブページの骨格を作るHTMLの構造から見ていこう。この記事のデモでは、非常にシンプルなHTMLが用いられている。具体的には、<div class="wrap">という親要素の中に、<div class="line line1">、<div class="line line2">といった形で、五つの<div class="line">要素が配置されている。ここで登場するdiv要素は、汎用的なコンテンツのまとまりを示すために使われるブロックレベル要素で、特別な意味を持たないが、CSSでスタイルを適用する際の器として非常に頻繁に利用される。class属性は、それぞれのdiv要素に名前（クラス名）を付けるもので、同じクラス名を持つ要素にまとめてスタイルを適用したり、特定のクラス名を持つ要素に個別のスタイルを適用したりする際に使う。このデモでは、すべての棒に共通のスタイルを適用するためにlineクラスが使われ、さらに各棒に固有のスタイルやアニメーションのタイミングを調整するためにline1からline5までのクラスが使われている。このように、HTMLはシンプルな構造で要素を配置する役割を担っている。

次に、このHTMLで定義された要素に、どのような見た目や動きを与えているのか、CSSの役割を見ていこう。CSSは、ウェブページのレイアウト、色、フォント、そして今回のようなアニメーションといった、あらゆる視覚的なスタイルを定義するための言語である。まず、ページ全体の背景色や、コンテンツを中央に配置するための基本的なスタイルがbody要素や.wrap要素に対して適用されている。これらは、デモ全体が美しく見えるようにするための土台作りの部分だ。

デモの核心であるアニメーションは、.lineクラスを持つ五つの棒に対して適用されている。それぞれの棒は、特定の幅と高さ、背景色を持ち、角が丸められている。そして最も重要なのが、これら.line要素に適用されているCSSアニメーションのプロパティである。CSSアニメーションは、@keyframesルールというものを使って、アニメーションの「設計図」を作成し、その設計図をanimationプロパティを使って要素に適用するという手順で実現される。

@keyframesルールは、アニメーションの特定の時点（例えば0%の開始時、50%の中間点、100%の終了時など）で、要素がどのような状態になるかを細かく定義する。このデモでは、@keyframes moveという名前のアニメーションが定義されている。このmoveアニメーションの中では、0%、20%、40%、60%、80%、100%という複数の段階が指定されている。各段階では、transform: scaleY()とopacityという二つのCSSプロパティが変化させられている。

transformプロパティは、要素の形状や位置、回転、拡大縮小といった視覚的な変形を適用するために使われる。scaleY()は、要素を垂直方向（Y軸方向）に拡大または縮小する関数で、引数に指定する値が1より大きければ拡大、1より小さければ縮小される。このデモでは、scaleY(1)（元のサイズ）からscaleY(0.1)（10%のサイズに縮小）へ、そして再びscaleY(1)へと変化することで、棒が縦方向に伸縮しているように見える。opacityプロパティは、要素の透明度を0（完全に透明）から1（完全に不透明）の間で設定するもので、このデモでは、棒が伸縮する動きに合わせて透明度が変化し、より柔らかな印象を与えている。このように、@keyframes moveは、棒がどのように縦に伸縮し、どれくらいの透明度になるかという一連の動きを詳細に記述している。

この@keyframes moveで定義されたアニメーションの設計図は、.lineクラスの要素に対してanimationプロパティを使って適用されている。animationプロパティには、move（アニメーションの名前）、2s（アニメーションの再生時間、2秒）、ease-in-out（アニメーションの進行速度を制御するイージング関数、開始と終了がゆっくりで中間が速い）、infinite（アニメーションを無限に繰り返す）といった値がまとめて指定されている。これにより、それぞれの棒は2秒間隔で、ゆっくり始まり、速くなり、ゆっくり終わるというリズムで、定義された伸縮と透明度の変化を繰り返すことになる。

しかし、もしすべての棒が同時に同じアニメーションを開始したら、単に五つの棒が同時に同じ動きをするだけで、波打つような動きには見えないだろう。そこで重要な役割を果たすのが、animation-delayプロパティである。このデモでは、line1からline5までの各要素に対して、それぞれ異なるanimation-delayの値が設定されている。例えば、line1は-1.8s、line2は-1.6s、line3は-1.4sといったように、0.2秒ずつ開始タイミングがずらされている。負の値のanimation-delayは、アニメーションが既に指定された時間だけ進行した状態から開始することを意味する。つまり、最初の棒がアニメーションの途中の状態から始まり、次の棒はそれより少し遅れて途中の状態から始まり、というように、各棒が異なる時点からアニメーションを開始することで、全体として時間差が生まれ、まるで波が連鎖するように、順番に伸縮していく様子が表現されているのだ。

また、transform-originというプロパティも地味ながら重要な役割を担っている。これは、transformプロパティ（scaleYなど）で要素を変形させる際の基準点を指定する。このデモではbottomが指定されており、棒が縦に伸縮する際に、下端を固定して上方向に伸び縮みするように見える。もしこれがcenterだったら、棒の中心を基準に上下に伸び縮みするため、少し違った印象のアニメーションになるだろう。

このように、HTMLでシンプルな構造を作り、CSSでその見た目を整え、特に@keyframesルールでアニメーションの動きを定義し、animationプロパティでそれを要素に適用する。そして、複数の要素に対してanimation-delayプロパティを使って開始タイミングをずらすという工夫を凝らすことで、単調な動きではなく、複雑で生命感のある波打つアニメーションが実現されている。JavaScriptを一切使わずに、HTMLとCSSだけでこれほど表現力豊かなアニメーションが作成できることを示す良い例だ。システムエンジニアを目指す上では、このようなHTMLとCSSの基礎的な知識と、それらを組み合わせて創造的な表現を生み出す力が非常に重要になる。ウェブサイトのフロントエンド開発において、ユーザー体験を向上させるためには、見た目の美しさだけでなく、動きによるインタラクションも不可欠であり、その実現にはこのようなCSSアニメーションの技術が欠かせない要素となる。