【ITニュース解説】Untitled

システムエンジニアを目指す初心者がWeb開発の現場でまず触れることになるのは、WebサイトやWebアプリケーションの「見た目」を構成する技術、すなわちHTMLとCSSだ。今回のニュース記事が紹介しているCodePenのデモは、まさにそのHTMLとCSSの奥深さを示す良い例となる。

このデモは、マウスを要素の上に重ねたときに、背景のグラデーションがダイナミックに変化し、同時にカード内の画像やテキストエリアも滑らかに動く、インタラクティブなカードUI（ユーザーインターフェース）を実現している。CodePenとは、開発者がHTML、CSS、JavaScriptのコードをブラウザ上で書いて即座に結果を確認できるオンラインのエディタであり、多くのWeb開発者がアイデアを試したり、作品を共有したりする場として利用している。

まず、このデモの「骨組み」となるHTMLを見てみよう。HTMLは、Webページ上のテキスト、画像、リンクといったコンテンツの意味と構造を定義するマークアップ言語だ。 このデモでは、次のような構造でコンテンツが構成されている。

Copy
1<div class="card">
2  <div class="imgBox">
3    <img src="画像URL">
4  </div>
5  <div class="content">
6    <h2>Card One</h2>
7    <p>説明文</p>
8    <a href="#">Read More</a>
9  </div>
10</div>

ここで使われている<div>タグは、コンテンツをグループ化するための汎用的な要素だ。class="card"と付いたdivが、このカードUI全体のコンテナになっている。その中に、画像を格納するdiv class="imgBox"と、見出し（<h2>）、段落（<p>）、リンク（<a>）を格納するdiv class="content"が配置されている。それぞれのclass属性は、後述するCSSで特定のスタイルを適用するための「目印」として機能する。<img>タグは画像を表示し、src属性で画像の場所を指定している。このように、HTMLはWebページに表示する要素を意味的に記述する役割を担う。

次に、「見た目」を司るCSSに注目する。CSS（Cascading Style Sheets）は、HTMLで記述された要素をどのように表示するか、色、サイズ、配置、アニメーションといった視覚的なスタイルを定義するスタイルシート言語だ。このデモでは、複雑で目を引くアニメーションのほとんどが、JavaScriptを使わずに純粋なCSSのみで実現されている点が非常に重要だ。

body要素のスタイル設定から見ていこう。

Copy
1body
2{
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  min-height: 100vh;
7  background: #161623;
8}

ここでdisplay: flex;が指定されているのは、Flexboxというレイアウトモジュールを利用するためだ。justify-content: center;とalign-items: center;を組み合わせることで、body要素の直下にあるコンテンツ（ここでは.card）が水平方向・垂直方向ともにページのちょうど中央に配置されるようになる。min-height: 100vh;は、body要素がビューポート（ブラウザの表示領域）の高さと同じだけの最小高さを持ち、背景色をページ全体に適用するための設定だ。background: #161623;は、背景色を暗い灰色に設定している。

.cardクラスが適用された要素は、個々のカードUIの基本的なスタイルを定義している。

Copy
1.card
2{
3  position: relative;
4  width: 320px;
5  height: 450px;
6  background: #232323;
7  border-radius: 20px;
8  overflow: hidden;
9}

position: relative;は、この要素自身が配置の基準点となることを意味する。後に続く絶対配置（position: absolute;）された子要素は、この親要素の境界を基準に配置される。widthとheightでカードの大きさを固定し、backgroundで背景色を設定、border-radiusで角を丸くしている。overflow: hidden;は、カードの領域からはみ出したコンテンツが表示されないようにする重要なプロパティだ。これがなければ、後述する背景の円形グラデーションがカードの境界を越えて表示されてしまう。

このデモの最も印象的な部分である背景の動的な変化は、CSSの「疑似要素」と「clip-path」プロパティを組み合わせて実現されている。 ::beforeと::afterは、指定した要素の直前や直後に仮想的な要素を生成し、コンテンツとして追加できる疑似要素だ。これらはHTMLには存在しないが、CSSでスタイリングできる。

Copy
1.card::before
2{
3  content: '';
4  position: absolute;
5  top: 0;
6  left: 0;
7  width: 100%;
8  height: 100%;
9  background: #9bdc28;
10  clip-path: circle(150px at 80% 20%);
11  transition: 0.5s ease-in-out;
12}
13.card:hover::before
14{
15  clip-path: circle(300px at 80% -20%);
16}

::before疑似要素は、カードの領域全体を覆うように絶対配置され、緑色の背景を持つ。ここで注目すべきはclip-path: circle(150px at 80% 20%);だ。clip-pathは、要素の表示領域を特定の形状に切り抜くプロパティであり、ここではcircle()関数を使って円形に切り抜いている。150pxは円の半径、at 80% 20%は円の中心座標をカードの右上（横80%、縦20%の位置）に指定している。 そして、transition: 0.5s ease-in-out;は、clip-pathプロパティの変化が0.5秒かけて滑らかにアニメーションするように設定している。 card:hover::beforeというセレクタは、マウスカーソルが.card要素の上に乗ったときに、::before疑似要素に適用されるスタイルを定義する。このとき、clip-path: circle(300px at 80% -20%);によって円の半径が300pxに拡大し、中心座標もカードの上方向（y座標が-20%）に移動する。これにより、カードの右上にあった小さな緑色の円が、マウスオーバー時に拡大し、カードの上部を大きく覆うように見せかけるアニメーションが生まれる。

同様に、::after疑似要素も青色の円形グラデーションをカードの左下に配置し、マウスオーバー時に拡大するアニメーションを実現している。このように、::beforeと::afterの二つの疑似要素を重ね合わせることで、多層的な背景アニメーションを作り出しているのだ。

画像ボックス（.imgBox）のスタイルも見ていこう。

Copy
1.imgBox
2{
3  position: absolute;
4  top: 50%;
5  transform: translateY(-50%);
6  z-index: 1000;
7  width: 100%;
8  height: 100%;
9  transition: 0.5s;
10}
11.card:hover .imgBox
12{
13  top: 0;
14  transform: translateY(-25%);
15}

position: absolute;により、.imgBoxは親要素である.cardの内部を基準に配置される。top: 50%; transform: translateY(-50%);は、要素の高さに関わらず画像を垂直方向の中央に配置する定番のテクニックだ。z-index: 1000;は、この要素が他の要素の上に重なるようにする設定であり、背景の円形グラデーションよりも手前に表示される。transition: 0.5s;は、この要素のプロパティが変化する際にアニメーションを適用する。 マウスオーバー時（card:hover .imgBox）には、top: 0; transform: translateY(-25%);によって画像ボックスが上方向に移動する。これにより、画像がカードの上部にスライドしていくような効果が生まれる。

最後に、コンテンツボックス（.content）のスタイルだ。

Copy
1.content
2{
3  position: absolute;
4  bottom: 0;
5  width: 100%;
6  height: 100px;
7  text-align: center;
8  transition: 0.5s;
9  z-index: 10;
10}
11.card:hover .content
12{
13  height: 210px;
14}

.contentも絶対配置され、カードの下部（bottom: 0;）に固定される。初期の高さは100pxで、テキストは中央寄せだ。z-index: 10;により、画像ボックスの下、背景の疑似要素の上といった重なり順序が調整される。マウスオーバー時（card:hover .content）には、height: 210px;によってコンテンツボックスの高さが拡大し、より多くのテキストやボタンを表示できるようになる。transition: 0.5s;のおかげで、この高さの変化も滑らかにアニメーションする。

このデモがJavaScriptを一切使わず、HTMLとCSSだけでここまでリッチなインタラクションを実現していることは、システムエンジニアを目指す初心者にとって非常に示唆に富んでいる。JavaScriptはWebページに高度な動的な挙動やユーザーとの複雑なインタラクションを追加するために不可欠だが、単純な視覚的なアニメーションや状態の変化であれば、CSSだけでも十分強力な表現力を持っている。むしろ、CSSで実現できることはCSSで実装する方が、パフォーマンス面で有利になる場合も多い。

このコードを読み解くことで、システムエンジニアの卵は次のような重要な知見を得られるだろう。 WebページはHTMLで構造化され、CSSで見た目が装飾される。 positionプロパティ、z-index、transform、transition、clip-pathといったCSSのプロパティを組み合わせることで、複雑なレイアウトやアニメーションを作り出すことが可能だ。 ::beforeや::afterのような疑似要素や:hoverのような疑似クラスは、要素の状態に応じてスタイルを動的に変化させる強力なツールとなる。 CodePenのようなオンラインツールは、実際に手を動かしてコードを書き、その結果を即座に確認しながら学習を進める上で非常に有効な環境だ。

システムエンジニアとして、フロントエンドの技術を学ぶことは、ユーザーが直接触れる部分の設計と実装を理解する上で不可欠だ。このデモは、その第一歩として、HTMLとCSSの基本から応用までを実践的に学ぶための優れた教材となる。単にコードを写すだけでなく、各プロパティがどのような役割を果たしているのか、なぜその値が指定されているのかを深く考察することで、Web開発の基礎力が着実に身についていく。実際に自分で値を変更してみて、どのように見た目が変わるかを試すことも、理解を深める上で非常に重要だ。