サイトの基盤を見直した - z-indexと翻訳機能の整理
サイトのベース部分がごちゃごちゃしていた。
3D空間、コンテンツ、解説、コントロールの表示順序が混乱している。Google Translateのバナーも邪魔だ。全体を見直して、整理した。
やったこと
z-index階層構造を明確に定義し、各要素の表示順序を整理した。
Google Translateを統合し、バナーを非表示にする処理も実装した。さらに、立方体が分裂と合体を繰り返すアニメーションを追加して、3D空間を視覚的に豊かにした。
階層構造を明確にすることで、要素同士が干渉しなくなった。クリック操作も正確に反応する。
z-index階層構造の定義
最初はz-indexがバラバラだった。一度つまずいた。
3D空間がz-index: 10、コンテンツがz-index: 5、コントロールがz-index: 3。順序がおかしい。コントロールがコンテンツの下に隠れる。
整理した：
/* z-index階層構造 */
/* 1. #threeContainer (z-index: 1) - 3D空間のベース */
/* 2. #content (z-index: 2) - 3D空間の上に表示されるコンテンツ */
/* 3. #explanation (z-index: 3) - Contentの上に表示される解説 */
/* 4. #control (z-index: 4) - メニューシステム（最上位） */
/* 5. #google_translate_element (z-index: 10000) - 翻訳ボタン（最上位） */
これで、表示順序が明確になった。コメントで説明も追加した。
z-indexは1から順番に割り振った。間隔を大きくする必要はない。シンプルで分かりやすい。
Google Translateバナーの非表示
Google Translateを統合すると、画面上部にバナーが表示される。邪魔だった。
/* Google Translateのバナーを非表示 */
.goog-te-banner-frame {
display: none !important;
}
body {
top: 0 !important;
}
バナーをdisplay: noneで非表示にした。さらに、bodyのtopを0に固定することで、バナーが表示された時の位置ズレを防ぐ。
JavaScriptでも処理を追加：
setTimeout(() => {
const translateBanner = document.querySelector('.goog-te-banner-frame');
if (translateBanner) {
translateBanner.style.display = 'none';
}
document.body.style.top = '0';
}, 100);
CSSとJavaScriptの両方で対応した。これで完璧だ。
分裂・合体アニメーション
3D空間に、立方体が分裂と合体を繰り返すアニメーションを追加した。
大きな立方体が8個の小さな立方体に分裂し、しばらく回転して、また合体する。イージング関数を使って、滑らかに動く。
// イージング関数（easeInOutCubic）
function easeInOutCubic(x) {
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}
線形のアニメーションだと、動きが硬い。イージングを使うことで、加速と減速が自然になる。
分裂と合体のアニメーションは120フレーム（約2秒）で完了する。その後、60フレーム（約1秒）待機してから、次のアニメーションに移る。
トップバーのデザイン
トップバーも改善した。
最初は単純なボタンが並んでいるだけだった。見た目が地味だ。
アイコンを追加し、背景色を調整し、ホバー時のエフェクトを実装した。
トップバーは5秒後に自動的に小さくなる。小さい状態でクリックすると、元のサイズに戻る。ユーザーが必要な時だけ表示される。
pointer-eventsの活用
コンテンツ要素のpointer-eventsをnoneにすることで、3D空間のマウス操作を妨げないようにした。
#content {
pointer-events: none;
}
.sub_content {
pointer-events: auto;
}
親要素はnoneで、子要素だけautoにする。これで、コンテンツ内のボタンはクリックできるが、コンテンツの背景部分は3D空間を操作できる。
全体の構成
3D空間（z-index: 1）を最下層に配置し、その上にコンテンツ（z-index: 2）、解説（z-index: 3）、コントロール（z-index: 4）、翻訳ボタン（z-index: 10000）を重ねている。
使ってみて
サイトのページベース部分を見直した。
ポイントは以下の3つ：
- z-index階層構造を1から順番に整理（3D空間→コンテンツ→解説→コントロール→翻訳）
- Google Translateバナーを
display: noneで非表示化
- pointer-eventsを活用してコンテンツと3D空間の操作を両立
整理した結果、要素同士の干渉がなくなり、操作性が向上した。Google Translateも邪魔にならない。
同じようなサイト基盤の整理を考えている方の参考になれば嬉しいです。
まとめ
今回は、サイトのページベース部分を見直して、z-index階層構造を整理した。
ポイントは以下の4つ：
- z-indexを1から順番に割り振り、階層構造を明確化
- Google TranslateバナーをCSSとJavaScriptの両方で非表示化
- pointer-eventsで親要素を
none、子要素をautoに設定
- イージング関数で分裂・合体アニメーションを滑らかに
サイトの基盤が整理され、操作性とデザインが向上した。基盤がしっかりしていれば、今後の機能追加も楽になる。
さらに深く学ぶには
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。