0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(山本 勇志)

⚡ 目を引く3Dデザイン！Webサイトをワンランクアップさせる技術 🌈

0
Last updated at Posted at 2025-02-18

HTML, CSS, JavaScriptで実現する動的で魅力的な3Dウェブコンテンツ

こんにちは、@YushiYamamotoです！
今回は、HTML、CSS、JavaScript を組み合わせて、動的で視覚的に魅力的な3Dウェブコンテンツを作成するサンプルコードを解説していきます。初心者の方でも理解しやすいように、図や絵文字も交えながら具体例を示していくので、ぜひ最後までお付き合いください！🚀

See the Pen Living Words by Yushi Yamamoto (@yamamotoyushi) on CodePen.

---

目次

概要

今回のサンプルコードでは、3Dキューブや背景画像の反射効果、色調のアニメーション、そしてテキストの動的挿入を実現しています。
各技術の役割は以下の通りです。

  • HTML: ページの構造や各要素のレイアウトを定義
  • CSS: 3D変形、アニメーション、レイアウト、ビジュアルエフェクトの設定
  • JavaScript: ページが読み込まれた後の動的なコンテンツ挿入と、レスポンシブなサイズ調整

以下の図は、HTMLの基本的な構造をシンプルに表現したものです。

┌─────────────────────────────┐
│         .container          │
│  ┌─────────────────────────┐ │
│  │      .content           │ │
│  │ ┌─────────────────────┐ │ │
│  │ │ .container-full     │ │ │
│  │ │ ┌─────────────────┐ │ │ │
│  │ │ │ 3Dキューブ構造  │ │ │ │
│  │ │ └─────────────────┘ │ │ │
│  │ └─────────────────────┘ │ │
│  └─────────────────────────┘ │
└─────────────────────────────┘

この構造が、視覚エフェクトや動的なテキスト挿入の土台になっています。

HTMLの構造と役割

HTMLのコードは、以下のようなネストされた <div> 要素を使って構造化されています。

  • .container
    ページ全体を囲むコンテナ要素です。

  • .content
    主な表示領域となるエリア。ここに3Dオブジェクトや背景、反射エフェクトの要素が配置されています。

  • .container-full と .container-reflect

    • .container-full は通常の表示用。
    • .container-reflect は反射効果を適用するためのエリアです。

  • .cube と .face
    3Dキューブの各面（上、下、左、右、前面、背面）を表現するために用いられ、CSS の 3D変換（translateZ や rotate）で空間上に配置されています。

以下に、主要なHTML部分のコード例を示します。

<div class="container">
	<div class="content" style="display:block;width:1000px;height:562px">
		<div class="container-full">
			<div class="animated hue"></div>
			<img class="backgroundImage" src="https://drive.google.com/thumbnail?id=1_ZMV_LcmUXLsRokuz6WXGyN9zVCGfAHp&sz=w1920">
			<img class="boyImage" src="https://drive.google.com/thumbnail?id=1eGqJskQQgBJ67myGekmo4YfIVI3lfDTm&sz=w1920">
			<div class="container">
				<div class="cube">
					<div class="face top"></div>
					<div class="face bottom"></div>
					<div class="face left text"></div>
					<div class="face right text"></div>
					<div class="face front"></div>
					<div class="face back text"></div>
				</div>
			</div>
			<div class="container-reflect">
				<div class="cube">
					<div class="face top"></div>
					<div class="face bottom"></div>
					<div class="face left text"></div>
					<div class="face right text"></div>
					<div class="face front"></div>
					<div class="face back text"></div>
				</div>
			</div>
		</div>
	</div>
</div>

このHTML構造により、各要素が個別にスタイルやアニメーションを適用できるよう設計されています。🔍

CSSで実現するビジュアルエフェクト

CSS では、以下のようなポイントでビジュアルエフェクトを実現しています。

1. レイアウトの基本設定

  • body のスタイル
    ビューポート全体を利用するために、width: 100vw; や height: 100vh; を指定。
    フレックスボックスを利用して要素を中央に配置しています。

  • overflow: hidden
    スクロールバーを非表示にすることで、見た目をすっきりさせています。

body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;
	overflow: hidden;
}

2. 3D変換とアニメーション

  • 3Dキューブの構築
    transform-style: preserve-3d; と perspective プロパティを利用して、3D空間上にオブジェクトを配置しています。
    各 .face の transform 指定により、キューブの各面が規定の位置に配置されます。

  • アニメーションの例

    @keyframes zoom-in {
	0% { transform: scale(1); }
	100% { transform: scale(2.5); }
}

    このようなアニメーションで、ズームイン効果が実現されています。その他、ブラーや明るさ調整、色相変化（hue-rotate）なども使い、動きのある表現を行っています。💡

3. 背景と反射の効果

  • 背景画像とオーバーレイ
    .backgroundImage と .boyImage が絶対配置され、ページ全体に広がる背景となり、.animated.hue によりグラデーションをかけています。

  • 反射効果
    .container-reflect に filter: blur(10px); を指定することで、オブジェクトの反射を表現。簡単な反転効果も scaleY(-1) などで実現されています。

CSS の全体構造は、以下のようなイメージ図で表すことができます。

[body]
 └─ [container]
     └─ [content]
         ├─ [container-full]
         │     ├─ 背景画像 (.backgroundImage)
         │     ├─ キャラクター画像 (.boyImage)
         │     └─ 3Dキューブ (.cube)
         └─ [container-reflect] ← 反射効果
               └─ 3Dキューブ (.cube)

JavaScriptによる動的なコンテンツ操作

JavaScript は、主に次の2つの役割を担っています。

1. テキストコンテンツの動的挿入

サンプルコードでは、ルドヤード・キップリングの有名な詩「If you can」を定義し、.text クラスが付いた各要素に挿入しています。
これにより、3Dキューブの側面に詩のテキストが動的に表示される仕組みになっています。

// Poemテキストの定義
const kiplingPoem = `<p>If you can <span>keep</span> your head when all about you    
Are <span>losing</span> theirs and <span>blaming</span> it on you; 
...  (中略) ...
If you can be a <span>Man</span>, my son!</p>`;

// DOMContentLoadedイベントでテキストを挿入
document.addEventListener("DOMContentLoaded", function() {
	const textDivs = document.querySelectorAll(".text");
	textDivs.forEach((div) => {
		div.innerHTML = kiplingPoem;
	});
});

2. レスポンシブなサイズ調整

ウィンドウのサイズに合わせて、メインコンテンツ領域のスケールを自動調整する仕組みです。
ウィンドウのリサイズイベントに合わせて実行され、スマホやタブレットなど異なるデバイスでも適切に表示されるよう工夫されています。

const contentDiv = document.querySelector(".content");
function adjustContentSize() {
	const viewportWidth = window.innerWidth;
	const baseWidth = 1000;
	const scaleFactor = viewportWidth < baseWidth ? (viewportWidth / baseWidth) * 0.8 : 1;
	contentDiv.style.transform = `scale(${scaleFactor})`;
}
window.addEventListener("load", adjustContentSize);
window.addEventListener("resize", adjustContentSize);

このコードにより、画面サイズに応じた適切なスケーリングが実現され、ユーザー体験が向上します。📱💻

まとめ

今回のサンプルコードは、HTML、CSS、JavaScript の各技術がどのように連携して、動的で魅力的な3Dウェブコンテンツを構築できるかを示しています。以下のポイントが特に重要です。

  • HTML で基本構造を作り、各要素に意味を持たせる
  • CSS を活用して、3D変換、アニメーション、エフェクトを実現
  • JavaScript による動的コンテンツ挿入とレスポンシブデザインで、ユーザーエクスペリエンスを最適化

このように、現役エンジニアとして実務でも利用できる技術の応用例を理解することで、皆さんのスキルアップに繋がることを願っています。ぜひ、実際にコードを動かして、各エフェクトがどのように実現されているかを体験してみてください！😊

さらに詳しい情報や実装サンプルは、以下のリンクも参考にしてください。

以上、HTML・CSS・JavaScript を駆使した動的な3Dウェブコンテンツの実装例の解説でした。次回も、現役エンジニアならではの実践的な知見をシェアしていきますので、どうぞお楽しみに！
Happy coding! 💻🎉

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?