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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:ウィンドウを効率よく操作する方法まとめ (12/09)
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    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」の設定について少し詳しく見ていきます。

    まず、「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]]」となります。
    操作画面

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









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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ