スポンサーリンク

Sublime Text 3:画面を変則的に分割する方法

この記事は約4分で読めます。

操作画面

こんにちは、さち です。

今更ながら、最近「Sublime Text 3」を使い始めました。

起動と動作が軽い、編集機能が秀逸、カスタマイズ性が高い と
三拍子そろったサイト制作に非常に便利なテキストエディターで
評判の良さが分かった気がします。

ただ、画面分割については
初期設定だと規則的な格子状(グリッド)にしかできず
右画面だけ上下いっぱいに表示したい私は困り果てました。

スポンサーリンク

まえおき

私は英語が苦手なので Sublime Text は日本語化してあります。
そのため、キャプチャや解説も日本語化した状態のものです。

変則的な分割をしたい

操作画面

サイト制作のコーディングをする時は上のような画面分割が好みです。

Aptana Studio を使っていた時は
タブをドラッグ&ドロップするだけで好きな形に分割できました。

一方、Sublime Text の画面分割にはそれらしいメニューがない…。
初期設定のままではできないようです。
操作画面

しかし、そこはカスタマイズ性に定評がある Sublime Text!
この変則分割を実現する方法がありました。

変則分割のショートカットキーを作る

Origami などのプラグインを使う方法もあるようですが
思い立ったらすぐ一発で変則分割したいので
この分割自体を Sublime Text のショートカットキーに登録します。

  1. 「基本設定」→「キーバインド - ユーザ」と進みます。
    操作画面
  2. 下記のように記述して上書き保存。
    例では、ショートカットキーを「Alt + Shift + 0」にしています。
    (画面分割に関する記述の詳細は次項で解説します)

    [
      {
        "keys": ["alt+shift+0"], //ショートカットキー
        "command": "set_layout", //コマンド
        "args":
        {
          "rows": [0.0, 0.5, 1.0], //列方向の分割位置
          "cols": [0.0, 0.7, 1.0], //行方向の分割位置
          "cells": [[0,0,1,1], [1,0,2,2], [0,1,1,2]] //画面の構成
        }
      }
    ]
  3. 「Alt + Shift + 0」で画面分割ができるようになりました。
    操作画面

 

「rows」「cols」「cells」について詳しく

他の形で分割したい人もいると思うので
「rows」「cols」「cells」の設定について少し詳しく見ていきます。

[
  {
    "keys": ["alt+shift+0"], //ショートカットキー
    "command": "set_layout", //コマンド
    "args":
    {
      "rows": [0.0, 0.5, 1.0], //列方向の分割位置
      "cols": [0.0, 0.7, 1.0], //行方向の分割位置
      "cells": [[0,0,1,1], [1,0,2,2], [0,1,1,2]] //画面の構成
    }
  }
]

まず、「rows」。
列(縦)方向の分割線の位置を、上を「0」,下を「1」として指定します。
例では、上,中央,下 で区切ったので、「"rows": [0.0, 0.5, 1.0]」と記述。
HTML の テーブルタグ <tr> をイメージすると分かりやすいかも。
操作画面

次に、「cols」。
行(横)方向の分割線の位置を、左を「0」,右を「1」として指定します。
例では、左,左から70%,右 で区切ったので、「"cols": [0.0, 0.7, 1.0]」と記述。
操作画面

最後に、「cells」。
分割画面の構成を 行(横),列(縦) の分割線を使って指定します。
分割線は始点を「0」として何本目なのかを数えます。
例の「GROUP1」では、始点「行0,列0」,終点「行1,列1」としたので「[0, 0, 1, 1]」と記述。
他も同様に指定し、「"cells": [[0,0,1,1], [1,0,2,2], [0,1,1,2]]」となります。
操作画面

少し複雑ですが
理屈が分かればそんなに難しくありません。
これで、自分好みの分割ができるはず!

コメント

タイトルとURLをコピーしました