こんにちは！日々のデータ分析やAI開発、お疲れ様です。
JupyterLabを使っていて、ふと思ったことはありませんか？
「標準のダークモード、なんだかちょっと物足りないな……」
「サイドバーの幅が広すぎてコードを書くスペースが狭い」
「エディタのフォントや配色を、もっと自分のIDE（VS CodeやPyCharmなど）と同じようにして、思考のノイズを消し去りたい」
分かります。その小さな違和感やストレスの積み重ねが、実はエンジニアの集中力をじわじわと削っているんです。
今回は、JupyterLabのテーマを単なる「黒背景への切り替え」で終わらせず、CSS変数を直接ハックして、あなただけの最高に没入できる開発環境を自作する方法を伝授します。
これをマスターすれば、毎日のコーディングやデータ探索が劇的に気持ちよく、そして効率的になりますよ。さあ、一緒にJupyterLabを究極のIDEへと進化させましょう！
—
1. そもそもなぜ、JupyterLabの「CSS変数」をハックするのか？
JupyterLabは、内部が完全にWeb技術（TypeScriptとCSS）で構築されています。つまり、ブラウザのデベロッパーツールで要素を覗けば、あらゆるデザインが「CSS変数（Custom Properties）」によって制御されていることが分かります。
市販の拡張テーマ（Dark Themeなど）を入れるのも手ですが、多くの場合「背景は黒くなったけれど、文字のコントラストが微妙」「アクティブなタブの色がダサい」といった妥協が生まれます。
CSS変数を直接操作するメリットは、以下の通りです。
- 完全なコントロール: 配色だけでなく、余白（パディング）、フォントのレンダリング、サイドバーのレイアウトまで完全に支配できる。
- 軽量性: 重い拡張機能を追加する必要がなく、JupyterLab標準の機能だけで完結するため動作が軽快。
- 疲労軽減: 自分の目に最も優しいコントラスト比と、好みの等幅フォントを組み合わせることで、長時間のコーディングでも目が疲れにくくなる。
それでは、環境構築の基礎からステップバイステップで見ていきましょう。
—
2. 基礎セットアップ：Anaconda環境の整理とJupyterLabの導入
まずは、クリーンかつ安全にJupyterLabを動かすための基礎固めを行います。「なんとなくインストールした」状態から脱却し、環境を完全に手中に収めましょう。
仮想環境の作成と有効化
Anaconda（またはMiniforge/Miniconda）を使用している前提で、データサイエンス専用のクリーンな仮想環境を作成します。
‘my_ai_env’ という名前でPython 3.10の仮想環境を作成する
conda create -n my_ai_env python=3.10 -y
作成した仮想環境をアクティベート（有効化）する
conda activate my_ai_env
JupyterLabのインストール
環境がアクティベートされたら、最新のJupyterLabをインストールします。
conda-forgeチャンネルから安定版のJupyterLabをインストール
conda install -c conda-forge jupyterlab -y
ここで、正しくインストールされたか、バージョンを確認しておきましょう。
インストールされたJupyterLabのバージョンを確認
jupyter lab –version
※ `v4.x` 系がインストールされていればバッチリです（本記事のCSSハックはJupyterLab 4を基準に解説しています）。
—
3. 実践：自分だけのダークモードCSSを注入する
ここからが本番です。JupyterLabには、ユーザー独自のカスタムCSS（user-settings）を読み込ませる強力な仕組みが備わっています。
ステップ1：カスタムCSSファイルの配置場所を作る
JupyterLabは、設定ディレクトリ内の `user-css` という仕組みを使ってスタイルを上書きできます。まずは、その設定フォルダの場所を特定し、ファイルを配置します。
OSごとの設定ディレクトリ（Jupyterのデータディレクトリ）の中に、`custom` フォルダを作成し、その中に `custom.css` を配置します。
ターミナル（またはコマンドプロンプト）で以下のコマンドを実行し、ディレクトリを作成してエディタで開きましょう（例としてLinux/macOS環境）。
Jupyterの設定ディレクトリを確認しつつ、カスタムCSS用のディレクトリを作成
mkdir -p ~/.jupyter/custom
ステップ2：魂を込めたカスタムCSSコードを書く
`~/.jupyter/custom/custom.css` というファイルを作成し、以下のコードを記述してください。
このコードは、単なる配色変更にとどまらず、「サイドバーの最適化」「フォントの近代化」「視認性の極限追求」を同時に行う、アーキテクト特製のカスタムスタイルです。
/ ==========================================================================
JupyterLab Architect’s Custom Dark Theme
========================================================================== /
/ 1. グローバルCSS変数の上書き（ベースカラーとアクセントの調整） /
:root {
/ メインの背景色を少し青みを帯びた深いダークグレーに変更（目の疲労軽減） /
–jp-layout-color1: #0f172a; / Slate 900 /
/ サイドバーやパネルの背景色（メインより少し明るくして階層を表現） /
–jp-layout-color2: #1e293b; / Slate 800 /
/ 入力欄やカードの背景色 /
–jp-layout-color3: #334155; / Slate 700 /
/ ボーダーラインの色を控えめにして画面のノイズを消す /
–jp-border-color1: #475569;
–jp-border-color2: #334155;
/ テキストの基本色（真っ白ではなく、少し目に優しいオフホワイト） /
–jp-content-font-color1: #f1f5f9;
–jp-content-font-color2: #cbd5e1;
/ ブランドカラー：エディタのアクセントに美しいシアンを採用 /
–jp-brand-color1: #06b6d4;
–jp-warn-color0: #f59e0b;
–jp-error-color1: #ef4444;
/ 2. フォントファミリの近代化（IDE並みの美しさを実現） /
–jp-code-font-family: “Fira Code”, “JetBrains Mono”, Consolas, monospace;
–jp-ui-font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
/ コードフォントのサイズと行間を最適化（可読性の爆上げ） /
–jp-code-font-size: 14px;
–jp-code-line-height: 1.6;
}
/ 3. サイドバー（ファイルブラウザ等）のレイアウト調整 /
.jp-SideBar {
background-color: var(–jp-layout-color2);
border-right: 1px solid var(–jp-border-color1);
}
/ サイドバーのタブアイコンの間隔を整え、スタイリッシュに /
.jp-SideBar .jp-TabPanel-tab {
padding: 8px 12px;
}
/ 4. ワークスペース（ノートブック領域）の視認性改善 /
/ セル選択時の左側インジケーターの色を鮮やかにしてフォーカスを明確化にする /
.jp-Cell.jp-mod-active .jp-InputPrompt {
color: var(–jp-brand-color1);
}
/ 実行中のセル（In []）のプロンプトを美しくハイライト /
.jp-InputPrompt {
color: #64748b;
font-family: var(–jp-code-font-family);
}
/ 5. スクロールバーのカスタム（ダークモードに合わせて細くモダンに） /
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(–jp-layout-color1);
}
::-webkit-scrollbar-thumb {
background: var(–jp-border-color1);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(–jp-brand-color1);
}
ステップ3：JupyterLabにCSSの読み込みを指示する
JupyterLab 4では、作成した `custom.css` がデフォルトで読み込まれない場合があります。確実に読み込ませるために、Jupyterのコンフィグファイルに設定を記述します。
以下のコマンドでコンフィグファイルを生成します（すでに存在する場合はスキップして構いません）。
jupyter lab –generate-config
生成された `~/.jupyter/jupyter_lab_config.py` を開き、以下の設定を追加またはアンコメントします（Pythonの設定ファイルなので、通常のPythonコードとして記述します）。
~/.jupyter/jupyter_lab_config.py の末尾などに追記
カスタムCSSや拡張機能が有効な場合に確実にカスタムスタイルを適用するための設定
JupyterLabのWebApp設定に対してカスタムパスを指すことも可能ですが、
基本的なcustom.cssの配置だけで自動読み込みされる挙動を利用します。
※ JupyterLabの標準仕様として、`~/.jupyter/custom/custom.css` に配置されたファイルは、テーマが何であれ自動的にグローバル適用されます。非常にシンプルですね！
—
4. 動作確認：HelloWorldならぬ「Custom Theme Verification」
設定が完了したら、実際にJupyterLabを起動して、その変貌ぶりを確認しましょう。
仮想環境が有効な状態でJupyterLabを起動
jupyter lab
ブラウザが立ち上がり、JupyterLabの画面が表示された瞬間、いつもの「標準ダークモード」とは一線を画す、洗練されたダークトーンの空間が広がっているはずです。
動作確認のチェックポイント
1. 背景色の確認: 真っ黒ではなく、高級感のある「Slate 900（深みのあるネイビーグレー）」になっていますか？
2. フォントの確認: コードセルに入力した文字が、指定した等幅フォント（Fira Codeなど）で美しく描画されていますか？
3. スクロールバーの確認: 細くスタイリッシュなスクロールバーに変わっていますか？
適当なPythonコードをセルに入力し、実行してみてください。
動作確認用のサンプルコード
import pandas as pd
import numpy as np
ダミーデータの作成
df = pd.DataFrame(
np.random.randn(5, 4),
columns=[‘Feature_A’, ‘Feature_B’, ‘Feature_C’, ‘Feature_D’]
)
print(“=== カスタムJupyterLab 動作確認完了 ===”)
display(df.style.background_gradient(cmap=’Blues’))
見慣れたDataFrameのテーブル表示も、背景のダークトーンと調和し、データサイエンスのモチベーションが最高潮に達するはずです。
—
おわりに
お疲れ様でした！今回は、単なる色の切り替えを超え、CSS変数を直接操作してJupyterLabをフルカスタムする方法を解説しました。
開発環境とは、いわばエンジニアにとっての「コックピット」です。道具にこだわり、自分の五感に最適化された環境を作ることは、単なる見た目の問題ではなく、認知負荷を極限まで下げ、創造的な思考に集中するための極めて重要なエンジニアリングです。
これをマスターしたあなたなら、明日からのコーディングが驚くほど快適になることでしょう。ぜひ、自分好みのカラーパレットやフォントに微調整して、世界に一つだけの最強の開発環境を作り上げてみてください。
それでは、良きAI・データサイエンスライフを！