/* ============================================================ preview-shell.css 【デモサーバー確認専用・本番のLMSには絶対に登録しないこと】 このファイルは、実際のLMSに実装されているサイドバー・ヘッダーの 「見た目を一時的に再現」した、確認用のダミーCSSです。 本物のサイドバー・ヘッダーのCSSは、システム会社側の別バンドル （このコーディング用テンプレートには含まれない部分）で すでに実装されており、実際のレッスン閲覧画面では LMS側が自動的にこの部分を描画します。 そのため、私たちが実際にCMSへ登録するのは
の中身だけであり、 このファイル（preview-shell.css）の内容は一切登録しません。 ▼ このファイルの役割 ローカル・デモサーバーでコンテンツを確認する際に、 「本番でサイドバー・ヘッダーと並んだときにどう見えるか」を 感覚的に把握するための、開発用の仮設ビュー専用です。 ▼ roblox-extra.css との違い - roblox-extra.css …… learning-content の中身に関わる部品 （本番でシステム会社に追加依頼する対象） - preview-shell.css …… サイドバー・ヘッダーの見た目のみ （デモ確認用。本番には絶対含めない） 読み込み方法（確認用HTMLのにのみ追加。本番用HTMLには追加しない）： ============================================================ */ /* ------------------------------------------------------------ サイドバー・ヘッダーの構造 ★構造の注意：ヘッダーはサイドバーの上に被らない。 　サイドバーは画面最上部から独立した縦の帯（フルハイト）で、 　ヘッダーはその右側の本文カラムにだけ乗る。 ------------------------------------------------------------ */ .rb-preview-shell-v2 { display: flex; align-items: stretch; min-height: 100vh; font-family: "IBM Plex Sans JP","Hiragino Kaku Gothic ProN",sans-serif; } .rb-preview-right { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rb-preview-header { background: #0a1128; color: #fff; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 1.02rem; font-weight: 700; } /* ★左グループ（ハンバーガー＋見出し）をひとまとめにし、 ヘッダー全体のspace-betweenは「左グループ」対「ロゴ」の 2つの間にのみ適用する（3要素バラバラだと中央寄せに見えてしまう） */ .rb-preview-header .rb-header-left { display: flex; align-items: center; gap: 16px; } .rb-preview-header .logo-svg { height: 20px; width: auto; display: block; flex-shrink: 0; } .rb-preview-header .hamburger-btn { width: 36px; height: 36px; background: #fff; border-radius: 8px; cursor: pointer; transition: background .15s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rb-preview-header .hamburger-btn:hover { background: #e2e8f0; } /* ------------------------------------------------------------ サイドバー開閉（ハンバーガークリックで表示/非表示をトグル） 実際の連動JSは js/preview-shell.js（デモ専用）を参照。 ------------------------------------------------------------ */ .course-memu.rb-dummy.rb-collapsed { display: none; } /* ------------------------------------------------------------ サイドバー本体（本物のクラス名・実測幅380pxを使用した仮埋め） 本物のCSSが用意され次第、このファイルごと読み込みを外せばよい。 HTML側（course-memu等のクラス名）は変更不要。 ------------------------------------------------------------ */ .course-memu.rb-dummy { background: #fff; font-size: 16px; flex-shrink: 0; } .course-memu.rb-dummy .bg-course-light { background-color: #a7c6e8; } .course-memu.rb-dummy .text-course { color: #1f4e79; } .course-memu.rb-dummy .fs-14 { font-size: 14px; } .course-memu.rb-dummy .fs-18 { font-size: 18px; } .course-memu.rb-dummy .fs-24 { font-size: 24px; line-height: 1.4; } .course-memu.rb-dummy .step-item { display: flex; align-items: center; gap: 4px; padding: 5px 4px; line-height: 1.35; color: #6b7280; } .course-memu.rb-dummy .step-item.text-course { font-weight: 700; } .course-memu.rb-dummy .step-item.done::after { content: "✓"; margin-left: auto; color: #22c55e; font-weight: 900; } .course-memu.rb-dummy .button-shadow { box-shadow: 0 3px 0 rgba(0,0,0,.15); } @media not all and (min-width: 800px) { .course-memu.rb-dummy { display: none; } }