「Webデザイン」タグアーカイブ

HTML, ブログ, プログラミング

CSSとHTMLだけで作る立体的カードUI（Shadow DOM対応）

2025年10月6日管理者コメントする

JavaScriptなしで、transform / perspective / layered shadows と CSSカスタムプロパティ だけで

“パッ”と目を引く3Dカードを作成してみましょう。

さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。

ゴール（できあがりイメージ）

マウスホバーでわずかに傾く3D表現
斜めに流れるハイライト（きらめき）
ライト／ダークどちらでも映える配色
prefers-reduced-motion でアニメ控えめ
Shadow DOM対応：::part() と CSS変数で外部からのテーマ変更OK

デモ：CSSとHTMLだけで作る3DカードUI

💡 マウスを乗せるとカードがわずかに傾き、立体的な効果が確認できます。

最小HTML（ライトDOM版）

<link rel="preload" href="https://picsum.photos/600/400?random=13" as="image">

<div class="card-3d">
  <img class="card-3d__media" src="https://picsum.photos/600/400?random=13" alt="Sample cover">
  <div class="card-3d__body">
    <h3 class="card-3d__title">CSS Only 3D Card</h3>
    <p class="card-3d__text">
      transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。
    </p>
    <a class="card-3d__cta" href="#">詳しく見る</a>
  </div>
</div>

transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。

</p>

<a class="card-3d__cta" href="#">詳しく見る</a>

</div>

コアCSS（ライトDOM版）

:root {
  --card-bg: color-mix(in oklab, canvas, white 6%);
  --card-fg: canvastext;
  --card-accent: oklch(0.70 0.12 250);
  --card-radius: 16px;
  --card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);
  --card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);
  --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);
  --card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;
  --card-gloss-size: 200% 200%;
  --card-tilt: rotateX(5deg) rotateY(-6deg);
  --card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: color-mix(in oklab, canvas, black 6%);
    --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);
  }
}

.card-3d {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  padding: 14px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--card-fg);
  border: var(--card-border);
  box-shadow: var(--card-shadow-1), var(--card-shadow-2);
  transform: perspective(900px) var(--card-tilt);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  overflow: clip;
  isolation: isolate;
}

.card-3d::before {
  /* 斜めに流れるハイライト */
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--card-gloss);
  background-size: var(--card-gloss-size);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform: translateZ(30px);
  transition: background-position .8s ease;
}

.card-3d:hover {
  transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);
  box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);
}
.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 6px);
  transform: translateZ(20px);
  box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);
}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {
  font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);
  line-height: 1.25;
}

.card-3d__text { opacity: .9; }

.card-3d__cta {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card-accent), white 5%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  transform: translateZ(26px);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);
  transition: transform .25s, filter .25s, box-shadow .35s;
}
.card-3d__cta:hover  { filter: brightness(1.05); transform: translateZ(28px); }
.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d * { transition: none !important; }
  .card-3d { transform: none; }
  .card-3d::before { display: none; }
}

:root {

--card-bg: color-mix(in oklab, canvas, white 6%);

--card-fg: canvastext;

--card-accent: oklch(0.70 0.12 250);

--card-radius: 16px;

--card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);

--card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);

--card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;

--card-gloss-size: 200% 200%;

--card-tilt: rotateX(5deg) rotateY(-6deg);

--card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);

}

@media (prefers-color-scheme: dark) {

:root {

--card-bg: color-mix(in oklab, canvas, black 6%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);

}

.card-3d {

position: relative;

display: grid;

gap: 12px;

width: min(100%, 420px);

padding: 14px;

border-radius: var(--card-radius);

background: var(--card-bg);

color: var(--card-fg);

border: var(--card-border);

box-shadow: var(--card-shadow-1), var(--card-shadow-2);

transform: perspective(900px) var(--card-tilt);

transform-style: preserve-3d;

transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;

overflow: clip;

isolation: isolate;

}

.card-3d::before {

/* 斜めに流れるハイライト */

content: "";

position: absolute;

inset: -10%;

background: var(--card-gloss);

background-size: var(--card-gloss-size);

mix-blend-mode: soft-light;

pointer-events: none;

transform: translateZ(30px);

transition: background-position .8s ease;

}

.card-3d:hover {

transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);

box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);

}

.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {

width: 100%;

aspect-ratio: 3/2;

object-fit: cover;

border-radius: calc(var(--card-radius) - 6px);

transform: translateZ(20px);

box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);

}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {

font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);

line-height: 1.25;

}

.card-3d__text { opacity: .9; }

.card-3d__cta {

justify-self: start;

display: inline-grid;

place-items: center;

padding: 10px 14px;

border-radius: 999px;

background: color-mix(in oklab, var(--card-accent), white 5%);

color: white;

text-decoration: none;

font-weight: 600;

transform: translateZ(26px);

box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);

transition: transform .25s, filter .25s, box-shadow .35s;

}

.card-3d__cta:hover { filter: brightness(1.05); transform: translateZ(28px); }

.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {

.card-3d, .card-3d * { transition: none !important; }

.card-3d { transform: none; }

.card-3d::before { display: none; }

}

Shadow DOM に対応させる考え方

ポイントは 「パーツを切り出す」 と 「CSS変数でテーマ化」。
外側（ライトDOM）から Shadow DOM 内を直接スタイルできないため、コンポーネント作者が part を付与し、利用者は ::part() で装飾、色や半径は CSS変数で調整します。

Web Component 側（作者向け：影DOM内のテンプレ）

※ここでは概念を示すための HTMLスケッチ です。実際の ShadowRoot 作成は JS が必要ですが、スタイル設計の指針としてご覧ください。

<!-- shadow root 内部イメージ（概念） -->
<style>
  :host {
    --card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));
    --card-fg: var(--card-fg, canvastext);
    --card-accent: var(--card-accent, oklch(0.70 0.12 250));
    --card-radius: var(--card-radius, 16px);
    /* …上記ライトDOM版と同等の宣言… */
  }
  .card { /* = .card-3d と同様 */ }
  .card::before { /* gloss */ }
  .media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }
</style>

<div class="card">
  <img part="media" class="media" alt="">
  <div class="body" part="body">
    <h3 part="title" class="title"></h3>
    <p part="text" class="text"></p>
    <a part="cta" class="cta" href="#"></a>
  </div>
</div>

<style>

:host {

--card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));

--card-fg: var(--card-fg, canvastext);

--card-accent: var(--card-accent, oklch(0.70 0.12 250));

--card-radius: var(--card-radius, 16px);

/* …上記ライトDOM版と同等の宣言… */

}

.card { /* = .card-3d と同様 */ }

.card::before { /* gloss */ }

.media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }

</style>

</div>

利用者側（外部）からのテーマ上書き例

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */
custom-3d-card {
  --card-accent: oklch(0.78 0.17 30);     /* 暖色寄りに */
  --card-radius: 20px;
}

/* コンポーネントが part を公開していれば装飾できる */
custom-3d-card::part(title) { letter-spacing: .3px; }
custom-3d-card::part(cta)   { text-transform: uppercase; }

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */

custom-3d-card {

--card-accent: oklch(0.78 0.17 30); /* 暖色寄りに */

--card-radius: 20px;

}

/* コンポーネントが part を公開していれば装飾できる */

custom-3d-card::part(title) { letter-spacing: .3px; }

custom-3d-card::part(cta) { text-transform: uppercase; }

まとめ：

作者は Shadow DOM 内で CSS変数とpart名を定義

利用者は ホストへ変数指定し、必要なら ::part() でピンポイント調整

デザインバリエーション（クラス追加だけ）

/* さらに“浮かせる” */
.card-3d.is-elevated {
  --card-tilt: rotateX(6deg) rotateY(-8deg);
  --card-tilt-hover: rotateX(9deg) rotateY(-12deg);
}

/* ガラス風 */
.card-3d.is-glass {
  background: color-mix(in oklab, var(--card-bg), transparent 30%);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid color-mix(in oklab, white, transparent 80%);
}

/* 枠線強調・フラット */
.card-3d.is-outline {
  box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);
  --card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */
}

/* さらに“浮かせる” */

.card-3d.is-elevated {

--card-tilt: rotateX(6deg) rotateY(-8deg);

--card-tilt-hover: rotateX(9deg) rotateY(-12deg);

}

/* ガラス風 */

.card-3d.is-glass {

background: color-mix(in oklab, var(--card-bg), transparent 30%);

backdrop-filter: blur(8px) saturate(1.2);

border: 1px solid color-mix(in oklab, white, transparent 80%);

}

/* 枠線強調・フラット */

.card-3d.is-outline {

box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);

--card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */

}

アクセシビリティと実用Tips

ボタン／リンクのヒット領域は最低44×44pxを意識（paddingで確保）
prefers-reduced-motion に配慮（すでに対応）
コントラスト：oklchやcolor-mix()で暗所・明所どちらも読みやすく
画像のalt を適切に
フォールバック：古い環境では oklch が未対応 → 代替色を上書き可能に

よく使うCSSカスタムプロパティ（外から上書きOK）

変数名	役割	例
--card-bg	背景色	#fff / #111
--card-fg	文字色	#111 / #eee
--card-accent	CTAなどの強調色	oklch(0.78 0.17 30)
--card-radius	角丸	12px / 20px
--card-shadow-1	影レイヤ(近)	0 1px 2px rgba(0,0,0,.2)
--card-shadow-2	影レイヤ(遠)	0 8px 24px rgba(0,0,0,.12)
--card-border	境界線	1px solid rgba(0,0,0,.06)
--card-tilt	傾き(通常)	rotateX(5deg) rotateY(-6deg)
--card-tilt-hover	傾き(ホバー)	rotateX(6.5deg) rotateY(-10deg)
--card-gloss	ハイライト	linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%)
--card-gloss-size	ハイライトサイズ	200% 200%

トラブルシュート

立体感が弱い → --card-tilt と影（--card-shadow-2）を強める
グロスが強すぎる → --card-gloss の不透明度を上げる（=白を薄く）
画面酔い → prefers-reduced-motion 環境で確認、もしくはカードに .is-outline を付与
Shadow DOM で色が変わらない → 変数は ホスト（custom element）側に定義しているか確認

まとめ

項目	ポイント
3D表現	transformとperspectiveで奥行きを演出
輝き	::beforeのグラデとbackground-positionで流し込み
配色	oklchとcolor-mixでライト/ダーク両対応
アクセシビリティ	prefers-reduced-motionと十分なヒット領域
Shadow DOM	作者はpart公開&変数化/利用者は::part()と変数上書き
拡張	クラス追加でelevated/glass/outlineを切替

HTML, ブログ, プログラミング

JSいらず！HTMLだけでポップアップを出せる「popover」属性がすごい

2025年10月5日管理者コメントする

これまで「ポップアップ」や「モーダルウィンドウ」を作るには、
JavaScriptやCSSトリックを駆使するのが当たり前でした。

ところが最近、**HTMLだけでポップアップを表示できる新属性「popover」**が登場！
これが想像以上にシンプルで、しかも見た目も自然なんです。

この記事では、「popover」属性の基本的な使い方から応用例までまとめています。

🚀 popover属性とは？

popover属性は、HTMLの要素に「ちょっとした吹き出し」や「軽いモーダル」を表示するための新仕様です。
JavaScriptなしで開閉制御でき、ボタンやリンクに紐づけて簡単に使えます。

対応ブラウザ

✅ Chrome 114以降
✅ Edge 114以降
✅ Safari 17以降
⚠️ Firefox（現時点では開発中）

※2025年現在、多くのモダンブラウザでサポートが進んでいます。

🧱 基本の使い方

✅ 最小構成の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>popover属性の最小構成サンプル</title>
</head>
<body>
  <button popovertarget="info">ポップアップを表示</button>
  <div id="info" popover>
    <p>こんにちは！これはHTMLだけで出せるポップアップです。</p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>popover属性の最小構成サンプル</title>

</head>

<body>

<button popovertarget="info">ポップアップを表示</button>

<p>こんにちは！これはHTMLだけで出せるポップアップです。</p>

</div>

</body>

</html>

＜表示例＞

💬 ポイント解説

popover 属性を付与した要素が、ポップアップ対象になります。
popovertarget 属性で、どの要素を表示するか指定します。
ボタンをクリックするだけで自動的に開閉制御してくれます。

🎨 スタイルを整える

デフォルトのままだと少し味気ないので、CSSで整えましょう。

<style>
  [popover] {
    padding: 1em;
    background: #f9f9ff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
</style>

<style>

[popover] {

padding: 1em;

background: #f9f9ff;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}

</style>

これで、軽いツールチップやメニュー風の見た目にできます。

背景を白系にすれば、Webアプリ風のモーダルにも。

⚙️ 応用：自動で閉じる・メニュー風表示

<button popovertarget="menu" popovertargetaction="toggle">メニュー</button>

<div id="menu" popover>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</div>

<ul>

<li><a href="#">ログアウト</a></li>

</ul>

</div>

popovertargetaction="toggle" を使うと、クリックごとに開閉を切り替えられます。
ナビゲーションメニューやヘルプボックスなどにも応用可能です。

＜表示例＞

🧠 裏側の仕組み

HTMLの「popover」属性は、ブラウザ側で開閉制御を自動的に処理します。
内部的には :popover-open という擬似クラスが追加され、
CSSで開閉状態を検知することもできます。

**「開いたときだけアニメーション」**などを実現できます。

💻 実用例：通知メッセージ

<button popovertarget="notice" popovertargetaction="show">お知らせ</button>
<div id="notice" popover>
  <p>サイトの更新情報があります！</p>
</div>

<p>サイトの更新情報があります！</p>

</div>

JavaScript不要で、ユーザーに小さなメッセージを伝えることが可能です。

フォーム送信後の完了メッセージなどにもぴったり。

⚠️ 注意点

古いブラウザでは未対応なので、必要に応じて<dialog>タグやJSフォールバックを検討。
開く方向は自動制御されるため、細かい位置調整が難しい場合があります。
長文や複雑なレイアウトには不向き（軽量ポップアップ用途がベスト）。

🌟 まとめ

特徴	内容
JavaScript不要	HTMLだけで完結
見た目自由	CSSで簡単カスタマイズ
軽量	ページ読み込みが早い
一部ブラウザ注意	Firefoxは実装中

🔮 今後の展望

「popover」属性はまだ新しい技術ですが、
“JavaScriptレスなUI” を目指すHTML進化の象徴です。

今後は、ツールチップ・通知・設定メニューなど、
より多くのシーンで採用が進むと期待されます。

HTML, ブログ, プログラミング

JavaScriptなしで実現！HTML5 Canvasアニメーションで魅せるWeb装飾

2025年10月4日管理者コメントする

HTML5の登場以降、Webデザインの表現力は大きく進化しました。
その中でも<canvas>タグは、まるで映像作品のような動きをブラウザ上で描くための強力な機能です。

「アニメーション＝JavaScriptが必要」と思われがちですが、実はJavaScriptを使わずにCanvasを動かす方法も存在します。
今回は、HTML5の<canvas>タグだけで実現できる動くWeb装飾について紹介します。

🖋️ `<canvas>`タグの基本とは？

<canvas>タグは、HTML5で導入されたグラフィック描画用の要素です。
通常はJavaScriptを使って図形やアニメーションを描きますが、近年はCSSアニメーションやSVG、さらにはGIF・APNGを組み合わせてCanvasを動かす手法も増えています。

さらに、CSSや画像アニメーションを活用することで、JavaScriptなしでも“動きを感じさせる”デザインを作ることができます。

🌊 JavaScriptなしで実現する波紋・粒子エフェクト

近年注目されているのが、Canvasを静的画像やCSSアニメーションと組み合わせるアプローチです。

✅ 例：波紋エフェクト（CSS連携）

<div class="ripple-wrap">
  <canvas class="ripple"></canvas>
</div>

<style>
/* 表示領域 */
.ripple-wrap{
  position: relative;
  width: 100%;
  height: 320px;          /* 必要に応じて変更 */
  overflow: hidden;
  border-radius: 12px;
  background: #0b1020;    /* 下地色（任意） */
}

/* CanvasにCSSアニメーション（JSなし） */
.ripple{
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 55%,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.30) 10%,
    rgba(255,255,255,0.10) 25%,
    rgba(255,255,255,0.00) 55%);
  animation: rippleEffect 3.6s ease-out infinite;
  transform-origin: 50% 55%;
}

@keyframes rippleEffect{
  0%   { transform: scale(0.55); opacity: 0.9; }
  60%  { opacity: 0.35; }
  100% { transform: scale(2.2); opacity: 0; }
}
</style>

</div>

<style>

/* 表示領域 */

.ripple-wrap{

position: relative;

width: 100%;

height: 320px; /* 必要に応じて変更 */

overflow: hidden;

border-radius: 12px;

background: #0b1020; /* 下地色（任意） */

}

/* CanvasにCSSアニメーション（JSなし） */

.ripple{

display: block;

width: 100%;

height: 100%;

background: radial-gradient(circle at 50% 55%,

rgba(255,255,255,0.40) 0%,

rgba(255,255,255,0.30) 10%,

rgba(255,255,255,0.10) 25%,

rgba(255,255,255,0.00) 55%);

animation: rippleEffect 3.6s ease-out infinite;

transform-origin: 50% 55%;

}

@keyframes rippleEffect{

0% { transform: scale(0.55); opacity: 0.9; }

60% { opacity: 0.35; }

100% { transform: scale(2.2); opacity: 0; }

}

</style>

これだけで、Canvas上に波紋が広がるような演出をCSSだけで表現できます。

動的スクリプトが不要なので、ローディング画面やメインビジュアルにも最適です。

サンプル

✨ パーティクル風の演出も可能

粒子（パーティクル）をイメージした演出も、背景のCanvasを複数重ねることで再現可能です。
たとえば、透明度の異なる複数のCanvasレイヤーをCSSで重ねると、光がゆらめくような表現になります。

.particles canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 80%);
  animation: float 8s infinite alternate;
}
@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.particles canvas {

position: absolute;

top: 0; left: 0;

width: 100%; height: 100%;

background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 80%);

animation: float 8s infinite alternate;

}

@keyframes float {

from { transform: translateY(0); }

to { transform: translateY(-20px); }

}

これにより、動きを感じさせる静かな装飾が可能になります。

サンプル

🧩 活用シーン

HTML5 Canvasを使った静的アニメーションは、以下のような場面で効果的です。

🌐 ローディング画面：シンプルで軽量な波紋アニメーションを表示
🖼️ メインビジュアル：粒子や光を使った背景エフェクト
🔲 ボタンホバー時：クリック誘導に動きを加える
💻 プレゼン用サイト：静かな動きでブランド感を演出

💬 まとめ

JavaScriptを使わなくても、HTML5 Canvasを上手く活用すれば軽量で美しいアニメーション表現が可能です。
CSSやCanvasレイヤーを組み合わせることで、Webサイト全体の印象を大きく向上させることができます。

「動き＝JS」ではなく、「表現＝HTML5 × CSS × Canvas」
これが、モダンWebデザインの新しいアプローチです。

Three.js, ブログ, プログラミング

Three.jsで簡単3D演出！初心者でもホームページをかっこよくする方法

2025年9月27日管理者コメントする

「ホームページをかっこよく見せたい」「シンプルに3D演出を加えてみたい」──そんなときに役立つのが Three.js です。
JavaScriptだけで3Dオブジェクトを動かせる便利なライブラリで、近年のWebサイトでも多く使われています。

この記事では 最新版 Three.js (r180) を使って、実際に「回転する立方体」を表示するサンプルを紹介します。

1. Three.jsとは？

Three.js は WebGL をラップしたライブラリで、難しい低レベルコードを書かなくても以下のような処理が可能です。

3Dオブジェクトの作成（立方体・球体・モデルの読み込み）
カメラの制御
ライトの設置
マテリアルやシェーダーの設定
アニメーション処理

2. サンプルコード（最新版 Three.js r180 対応）

以下は 最小構成のサンプル です。
HTMLファイルを作成して保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Three.js r180 Sample</title>
  <style>
    body { margin:0; }
    canvas { display:block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(),
      new THREE.MeshBasicMaterial({ color: 0x00aaff })
    );
    scene.add(cube);

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

    addEventListener("resize", () => {
      renderer.setSize(innerWidth, innerHeight);
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Three.js r180 Sample</title>

<style>

body { margin:0; }

canvas { display:block; }

</style>

</head>

<body>

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);

camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);

document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(

new THREE.BoxGeometry(),

new THREE.MeshBasicMaterial({ color: 0x00aaff })

);

scene.add(cube);

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

addEventListener("resize", () => {

renderer.setSize(innerWidth, innerHeight);

camera.aspect = innerWidth / innerHeight;

camera.updateProjectionMatrix();

});

</script>

</body>

</html>

3. デモ（実際に動くサンプル）

このブログ記事では、外部ファイルとして用意したサンプルhtmlを iframe で埋め込んで表示してます。

デモ1：基本の回転する立方体

👇 実際に回転する立方体が表示されます。

デモ2：ライトを使った立方体

光源を加えることで、立方体に陰影がつき、立体感が増します。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);

const light = new THREE.DirectionalLight(0xffffff, 1);

light.position.set(5, 5, 5).normalize();

scene.add(light);

デモ3：マテリアル変更

単色ではなく、ワイヤーフレームや透過マテリアルを適用できます。

const material = new THREE.MeshNormalMaterial({ wireframe: true });

1	const material = new THREE.MeshNormalMaterial({ wireframe: true });

デモ4：カメラ操作

OrbitControlsを使うと、マウスで回転・拡大縮小できるインタラクティブなデモが可能です。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

1 2	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement);

4. ローカルで動かすには？

上記のコードをコピーして test.html などの名前で保存 → ブラウザで開いても、真っ白になる場合があります。
これは ES Modules を使う Three.js の最新版では、file:/// での読み込みがセキュリティ上ブロックされるためです。

✅ 解決方法

ローカルで動かすには 簡易Webサーバ を立ち上げる必要があります。

例:

Python がある場合
python -m http.server 8000
Node.js がある場合
npx http-server -p 8000

その後、ブラウザで
http://localhost:8000/test.html
を開くと正しく表示されます。

5. まとめ

Three.jsを使えば簡単に3D演出を加えられる
最新版 (r180) は ES Modules形式 → file:/// では動作しない
実際の環境では Webサーバ経由で実行する必要がある
WordPress記事に埋め込む場合は iframe で外部HTMLを呼び出すのが安全

これをベースに、さらにライト・カメラ操作・外部モデル読み込みを試していけば、よりリッチな演出を作れます！

ゴール（できあがりイメージ）

デモ：CSSとHTMLだけで作る3DカードUI

最小HTML（ライトDOM版）

コアCSS（ライトDOM版）

Shadow DOM に対応させる考え方

Web Component 側（作者向け：影DOM内のテンプレ）

利用者側（外部）からのテーマ上書き例

デザインバリエーション（クラス追加だけ）

アクセシビリティと実用Tips

よく使うCSSカスタムプロパティ（外から上書きOK）

トラブルシュート

まとめ

関連記事

🚀 popover属性とは？

対応ブラウザ

🧱 基本の使い方

✅ 最小構成の例

🎨 スタイルを整える

⚙️ 応用：自動で閉じる・メニュー風表示

🧠 裏側の仕組み

💻 実用例：通知メッセージ

⚠️ 注意点

🌟 まとめ

🔮 今後の展望

関連記事

🖋️ <canvas>タグの基本とは？

🌊 JavaScriptなしで実現する波紋・粒子エフェクト

✅ 例：波紋エフェクト（CSS連携）

サンプル

✨ パーティクル風の演出も可能

サンプル

🧩 活用シーン

💬 まとめ

関連記事

1. Three.jsとは？

2. サンプルコード（最新版 Three.js r180 対応）

3. デモ（実際に動くサンプル）

デモ1：基本の回転する立方体

デモ2：ライトを使った立方体

デモ3：マテリアル変更

デモ4：カメラ操作

4. ローカルで動かすには？

✅ 解決方法

5. まとめ

関連記事

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

　関連記事

　関連記事

🖋️ `<canvas>`タグの基本とは？

　関連記事

　関連記事