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

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

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

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



最新記事
  • 内蔵HDDのクローン,外付け化ができるスタンドを買ってみた (08/18)
  • ノートPC Lenovo G570 のヒンジが壊れたので100円で修理した (08/16)
  • エクセル:カーソルが吹っ飛ぶ「Ctrl+矢印」キーを味方につける (08/14)
  • Windows:「スタート」ボタンが無反応なので小技でシャットダウン (08/09)
  • steelseries:アメリカから交換用のキーキャップを送ってくれた話 (08/07)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

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

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









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




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





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

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

    ブログパーツ