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

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

<p class="codepen" data-height="557" data-default-tab="result" data-slug-hash="LEYpaaN" data-pen-title="Living Words" data-editable="true" data-user="yamamotoyushi" style="height: 557px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/LEYpaaN">
  Living Words</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
---

## 目次  
- [概要](#概要)  
- [HTMLの構造と役割](#HTMLの構造と役割)  
- [CSSで実現するビジュアルエフェクト](#CSSで実現するビジュアルエフェクト)  
- [JavaScriptによる動的なコンテンツ操作](#JavaScriptによる動的なコンテンツ操作)  
- [まとめ](#まとめ)

---

## 概要  
今回のサンプルコードでは、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部分のコード例を示します。

```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`**  
  スクロールバーを非表示にすることで、見た目をすっきりさせています。

```css
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` 指定により、キューブの各面が規定の位置に配置されます。

- **アニメーションの例**  
  ```css
  @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キューブの側面に詩のテキストが動的に表示される仕組みになっています。

```javascript
// 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. レスポンシブなサイズ調整

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

```javascript
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** による動的コンテンツ挿入とレスポンシブデザインで、ユーザーエクスペリエンスを最適化

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

さらに詳しい情報や実装サンプルは、以下のリンクも参考にしてください。  
- [Google Fonts – Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)  
- [MDN Web Docs: CSS Transforms](https://developer.mozilla.org/ja/docs/Web/CSS/transform)

---

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

---

## **💖 ご支援いただけませんか？**

![スクリーンショット 2025-01-31 7.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/f9d94b4d-dbd3-ab70-6b2b-dfc289cda562.png)


このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

---

### **暗号資産による寄付**
以下のウォレットアドレスをご利用ください。**重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！** 送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

---

<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum Logo" width="20">

**Ethereum (ETH)**  （ネットワーク: ERC-20）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png" alt="BNB Logo" width="20">

**BNB Chain (BNB)**  （ネットワーク: BEP-20）
```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/polygon-matic-logo.png" alt="Polygon Logo" width="20">

**Polygon (MATIC)**   （ネットワーク: Polygon）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174  
```
<img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" alt="Avalanche Logo" width="20">

**Avalanche (AVAX)**    （ネットワーク: Avalanche C-Chain）

```
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
```
<img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana Logo" width="20">

**Solana (SOL)**  
```
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
```

<img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" alt="Stellar Logo" width="20">

**Stellar (XLM)**    メモ: 必要に応じて入力してください。

```
GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO 
```

<img src="https://cryptologos.cc/logos/xrp-xrp-logo.png" alt="Ripple Logo" width="20"> 

**Ripple (XRP)**    タグ: 必要に応じて入力してください。

```
r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
```

<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="Cardano Logo" width="20">

**Cardano (ADA)**  

```
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
```

<img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="Dogecoin Logo" width="20">

**Dogecoin (DOGE)**  
```
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
```

---

### **資金用途**
寄付金は以下の目的で活用させていただきます：

1. サーバー維持費やデザインツール購入  
2. 学習活動（オンラインコース受講・書籍購入）  
3. 読者向け無料コンテンツ制作  

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

---

### **補足情報**
- **Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について**  
  上記4つのネットワークは**同じウォレットアドレス**（`0x5CDA2F68f59F641B00aD172475c3d5fC10321174`）を使用します。ただし、送金時には、**絶対に**使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を**必ず**正しく選択してください。

- USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、**送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。**

- 初回送金時には少額でテスト送金することをおすすめします。

---