新ブログの該当記事に転送中です。
少々お待ち下さい。
(転送しない場合は下記リンクへお進み下さい)

『Sublime Text 3:画面を変則的に分割する方法』
https://at.sachi-web.com/blog-entry-1091.html

このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

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

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

今更ながら、最近「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]]」となります。
操作画面

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




このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ