多層構造のCSS説明書 (style.css)

#control（制御層）:

- 役割: ユーザーインターフェースの制御要素を配置します。
- 主な特徴:
- position: absolute; で絶対位置指定
- z-index を高く設定し、他の層の上に表示
- 含む要素: スタートボタン、戻るボタンなど

#content（第1層）:

- 役割: 全体のコンテナとして機能し、子要素を中央に配置します。
- 主な特徴:
- position: absolute; で絶対位置指定
- top: 10%; left: 50%; で上部中央に配置
- transform: translate(-50%, -50%); で完全な中央揃え
- display: flex; と flex-direction: column; で子要素を縦に配置
- overflow-y: auto; で縦方向のスクロールを可能に
- max-width: 80%; で画面幅の80%に制限
- 初期状態: display: none; で非表示

#sub_content（第2層）:

- 役割: 個別のコンテンツブロックを形成します。
- 主な特徴:
- display: flex; と flex-direction: column; で子要素を縦に配置
- width: 100%; で親要素の幅いっぱいに広がる
- background: rgba(255, 255, 255, 0.9); で半透明の白背景
- border-radius: 5px; で角を丸く
- box-shadow: で影をつけて立体感を出す

#sub_content内の要素（第3層）:

- 役割: 実際のコンテンツを表示します。
- 配置: #sub_content内で自動的に縦に並びます。

#threeDContainer（3D表示層）:

- 役割: 3Dビジュアライゼーションを表示します。
- 特徴:
- position: absolute; で絶対位置指定
- z-index を低く設定し、他の層の背後に表示

層の重なり順:
下層 → 上層
3D表示層 → 第1層(#content) → 第2層(#sub_content) → 第3層 → 制御層(#control)
注意点:
- レスポンシブデザインのため、max-width や width を使用しています。
- 背景の透明度やbox-shadowを調整することで、デザインの微調整が可能です。
使用方法:
1. HTMLで多層構造を作成:


<div id="control">
    <!-- 制御要素をここに配置 -->
</div>
<div id="content">
    <div id="sub_content">
        <!-- 第3層の要素をここに配置 -->
    </div>
</div>
<div id="threeDContainer"></div>

2. JavaScriptで各層の表示/非表示を制御:
document.getElementById('content').style.display = 'flex'; // 表示
document.getElementById('content').style.display = 'none'; // 非表示