複数のファイルを編集するとき、いちいちタブを切り替えるのは面倒だと感じたことはありませんか？
こんな経験がある方も多いはずです：
- HTMLとCSSを行ったり来たりして疲れる
- 長いコードの上と下を同時に確認したい
- 設定ファイルを見ながらプログラムを書きたい
- 参考コードと新しいコードを並べて比較したい
そんなときに役立つのが、Sublime Textの画面分割機能です。
この記事では、以下について初心者向けにわかりやすく解説します：
- Sublime Textで画面を分割する具体的な方法
- 効率的な使い分け方とコツ
- よくあるトラブルと解決法
- 実際の作業での活用例
「同時に複数ファイルを見ながらコーディングしたい！」と思っている方は、ぜひ参考にしてください。
Sublime Textの分割ビューとは？
基本的な仕組み
画面（エディタ領域）を縦や横に分割して、複数のファイルを並べて表示できる機能です。これにより、タブを切り替えることなく、同時に複数のファイルを確認・編集できます。
どんなときに便利？
分割ビューは以下のような場面で特に力を発揮します：
Web開発での活用
- HTMLとCSSを同時に開いて、スタイルの確認
- JavaScriptとHTMLを並べて、動的な処理の確認
- 設定ファイルとメインコードを同時表示
プログラミングでの活用
- ヘッダーファイルと実装ファイルを並べる（C/C++）
- テストコードと本体コードを同時確認
- ドキュメントとコードを見比べながら開発
長いファイルでの活用
- 同じファイルの異なる部分を並べる
- 関数の定義と呼び出し箇所を同時表示
- 設定の上部と下部を比較
画面を分割する方法
メニューから分割する（基本方法）
手順
- 上部メニューを開く
View → Layout - 分割方法を選択
- Columns: 2: 縦に2分割（左右に分割）
- Columns: 3: 縦に3分割
- Rows: 2: 横に2分割（上下に分割）
- Grid: 4: 2×2で4分割
各分割方法の特徴
| 分割方法 | 表示 | おすすめ用途 |
|---|---|---|
| Columns: 2 | 左右2分割 | HTML/CSS、コード比較 |
| Columns: 3 | 左中右3分割 | HTML/CSS/JS の同時確認 |
| Rows: 2 | 上下2分割 | 長いファイルの別箇所確認 |
| Grid: 4 | 2×2の4分割 | 多数ファイルの同時作業 |
ショートカットで素早く分割（推奨）
よく使うならショートカットが断然便利です。
Windows/Linux のショートカット
Alt + Shift + 2: 縦に2分割Alt + Shift + 3: 縦に3分割Alt + Shift + 4: 縦に4分割Alt + Shift + 5: 4分割（グリッド）Alt + Shift + 8: 横に2分割Alt + Shift + 9: 縦に3分割（特殊レイアウト）
Mac のショートカット
Cmd + Option + 2: 縦に2分割Cmd + Option + 3: 縦に3分割Cmd + Option + 4: 縦に4分割Cmd + Option + 5: 4分割（グリッド）
ショートカットを覚えるコツ
数字の意味を理解すると覚えやすくなります：
- 2, 3, 4: 縦分割の数
- 5: 4分割（グリッド）
- 8: 横2分割（数字の8を横に倒した形）
元の画面に戻す方法
分割を解除したいときは：
メニューから
View → Layout → Single
ショートカット
- Windows/Linux:
Alt + Shift + 1 - Mac:
Cmd + Option + 1
ファイルを分割した画面に移動・配置する方法
異なるファイルを各ペインに表示
分割しただけでは、同じファイルが両方のペインに表示されることがあります。
手順
- 表示したいペインをクリック
- ペインがアクティブ（選択状態）になる
- アクティブなペインは境界線の色が変わる
- ファイルを開く
- サイドバーから目的のファイルをクリック
- タブから既に開いているファイルをクリック
- Ctrl + O（Mac:
Cmd + O）で新しいファイルを開く
便利なドラッグ&ドロップ
タブを直接ドラッグして、別のペインにドロップすることもできます：
- 移動したいタブをクリック
- ドラッグして目的のペインに移動
- ドロップして配置完了
同じファイルを複数ペインに表示
長いファイルの異なる部分を同時に見たい場合に便利です。
手順
- 分割したいファイルを開く
- メニューから選択
File → New View into File - 新しいビューが別ペインに表示される
この機能の活用例
- 関数の定義部分と呼び出し部分を同時表示
- **ファイルの先頭（設定部分）と末尾（メイン処理）**を比較
- 長いCSSファイルの異なるセクションを同時編集
ペイン間の移動方法
ショートカットでペイン移動
Windows/Linux
Ctrl + 1, 2, 3...: 対応するペインに移動
Mac
Cmd + 1, 2, 3...: 対応するペインに移動
マウスでの移動
- ペインの境界線をドラッグしてサイズ調整
- ペイン内をクリックしてアクティブ化
分割ビューの効率的な使い方
Web開発での活用パターン
HTML + CSS の同時編集
おすすめレイアウト: Columns: 2（左右分割）
活用方法
- 左側: HTMLファイル
- 右側: CSSファイル
- メリット: スタイルの変更をすぐにHTMLで確認できる
実際の手順
Alt + Shift + 2で2分割- 左ペインでHTMLファイルを開く
- 右ペインでCSSファイルを開く
- 両方を見比べながら編集
3ファイル同時確認
おすすめレイアウト: Columns: 3（3分割）
活用方法
- 左: HTML
- 中央: CSS
- 右: JavaScript
- メリット: フロントエンド開発で全体を把握しながら作業
プログラミングでの活用パターン
長いファイルの効率的な編集
おすすめレイアウト: Rows: 2（上下分割）
活用方法
- 上: ファイルの先頭（関数定義、設定など）
- 下: ファイルの末尾（メイン処理、呼び出し部分）
- メリット: 定義を確認しながらメイン処理を書ける
実際の手順
Alt + Shift + 8で上下2分割File → New View into Fileで同じファイルを複製- 上ペインで関数定義部分を表示
- 下ペインでメイン処理部分を表示
テストコードと本体コードの同時確認
おすすめレイアウト: Columns: 2（左右分割）
活用方法
- 左: テストコード
- 右: 本体コード
- メリット: テストケースを確認しながら実装できる
設定ファイルとの連携
設定を確認しながら開発
活用例
- package.json と メインコードを同時表示
- 設定ファイル と アプリケーションコードを並べる
- ドキュメント と 実装を見比べる
メリット
- 設定値をいちいち確認する手間が省ける
- 設定の変更がコードに与える影響をすぐに確認できる
作業効率を上げるコツ
フォントサイズの調整
分割すると画面が狭くなるため、文字が小さく感じることがあります。
ズーム機能の活用
ズームイン（文字を大きく）
- Windows/Linux:
Ctrl + =またはCtrl + + - Mac:
Cmd + =またはCmd + +
ズームアウト（文字を小さく）
- Windows/Linux:
Ctrl + - - Mac:
Cmd + -
ズームリセット
- Windows/Linux:
Ctrl + 0 - Mac:
Cmd + 0
ペインサイズの調整
マウスでの調整
- ペインの境界線をドラッグして、表示サイズを調整
キーボードでの調整
Ctrl + K, Ctrl + ←/→: ペインサイズの調整（Windows/Linux）Cmd + K, Cmd + ←/→: ペインサイズの調整（Mac）
ミニマップの活用
分割表示では、ミニマップ（コードの縮小表示）が特に有効です。
ミニマップの表示切り替え
View → Hide/Show Minimap
分割時のミニマップの利点
- ファイル全体の構造を把握しやすい
- 現在の表示位置を視覚的に確認
- 素早いナビゲーションが可能
よくあるトラブルと解決方法
Q. 分割を解除したいときはどうする？
A. 複数の方法があります
方法1: メニューから
View → Layout → Single
方法2: ショートカット
- Windows/Linux:
Alt + Shift + 1 - Mac:
Cmd + Option + 1
方法3: タブをドラッグ
- すべてのタブを1つのペインにドラッグして統合
Q. 分割したらフォントが小さく見づらい
A. ズーム機能で解決できます
すぐに試せる方法
Ctrl + =（Mac:Cmd + =）でズームイン- 見やすいサイズまで調整
恒久的な解決策
Preferences → Settingsを開く"font_size"の値を大きくする- ファイルを保存して設定を反映
{
"font_size": 14 // デフォルトより大きく設定
}
Q. ペインの境界線が分からない
A. テーマや設定で境界線を分かりやすくできます
境界線を強調する設定
{
"highlight_line": true,
"draw_white_space": "all"
}
おすすめテーマ
- Monokai: 境界線が見やすい
- Material Theme: モダンで分かりやすい
Q. 同じファイルが両方に表示されてしまう
A. これは正常な動作です
分割直後は同じファイルが表示されます。以下の方法で解決：
異なるファイルを表示したい場合
- 変更したいペインをクリック
- サイドバーまたはタブから別のファイルを選択
同じファイルの別の場所を表示したい場合
File → New View into Fileを選択- 自動的に別のペインに同じファイルが表示される
- それぞれのペインで異なる場所を表示
Q. ショートカットが覚えられない
A. 段階的に覚えることをおすすめします
まず覚えるべきショートカット
Alt + Shift + 2: 2分割（最も使用頻度が高い）Alt + Shift + 1: 分割解除
慣れたら追加で覚える
Alt + Shift + 3: 3分割Alt + Shift + 8: 上下分割
覚え方のコツ
- 数字の意味を理解する（2=2分割、1=1画面など）
- 毎日少しずつ使って習慣化する
高度な活用方法
プロジェクト管理との連携
サイドバーとの効率的な使い分け
おすすめレイアウト
- 左: サイドバー（ファイル一覧）
- 中央: メインコード
- 右: 参考ファイルや設定
活用のメリット
- ファイル構造を把握しながら開発
- 必要なファイルにすぐアクセス可能
Git連携での活用
変更前後の比較
活用方法
- 左: 変更前のファイル
- 右: 変更後のファイル
- メリット: 差分を視覚的に確認しながら編集
コミット前の確認
活用方法
- 上: 変更したファイル
- 下: コミットメッセージ用ファイル
- メリット: 変更内容を確認しながらメッセージを作成
複数プロジェクトでの活用
参考コードの活用
活用方法
- 左: 現在開発中のプロジェクト
- 右: 参考にしたい既存プロジェクト
- メリット: 参考コードを見ながら新しいコードを書ける
まとめ
Sublime Textの分割機能を効果的に活用することで、作業効率を大幅に向上させることができます。
重要なポイント
基本的な使い方
- メニュー:
View → Layoutで分割方法を選択 - ショートカット:
Alt + Shift + 数字で素早く分割 - 解除:
Alt + Shift + 1で元に戻す
効率的な活用方法
- Web開発: HTML/CSS/JSの同時表示
- プログラミング: 定義部分とメイン処理の同時確認
- 比較作業: 変更前後や参考コードとの比較
快適に使うコツ
- ズーム機能で文字サイズを調整
- ペインサイズを作業に応じて最適化
- ショートカットを段階的に習得
コメント