LoginSignup
0
2

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サイトをワンランクアップさせる技術 🌈

Posted at

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! 💻🎉

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

スクリーンショット 2025-01-31 7.51.39.png

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

暗号資産による寄付

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

Ethereum Logo

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

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
BNB Logo

BNB Chain (BNB) （ネットワーク: BEP-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Polygon Logo

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

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Avalanche Logo

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

0x5CDA2F68f59F641B00aD172475c3d5fC10321174
Solana Logo

Solana (SOL)

EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
Stellar Logo

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

GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
Ripple Logo

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

r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
Cardano Logo

Cardano (ADA)

addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
Dogecoin Logo

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

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

0
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?