【WebStorm/PhpStorm】エディタ画面を分割して表示する

  • 更新日:
  • 公開日:

WebStorm、PhpStormのエディタ画面を分割して表示する手順です。

エディタ画面を分割表示する

メニューバーの「Window > Editor Tabs」内にある「Split Vertically」と「Split Horizontally」で縦横に分割出来ます。

webstorm-edit-split01'

「Split Vertically」で縦分割

Split Verticallyでエディタ画面を縦に分割します。

webstorm-edit-split02

 

何度も縦に分割出来ます。

分割し過ぎな例
分割し過ぎな例

「Split Horizontally」で横分割

Split Horizontallyでエディタ画面を横に分割します。

webstorm-edit-split03

 

何度も横に分割出来ます。

行き過ぎて見えない例
行き過ぎて見えない例

分割の合わせ技もアリ

縦と横の分割を合わせたレイアウトも可能です。

webstorm-edit-split06

 

分割を使って見やすいレイアウトにしてみましょう。

格子状レイアウトもお手の物
格子状レイアウトもお手の物

WebStorm/PhpStormはこんなに分割出来るんですね。開発も捗りそうです。

分割に関わるその他のコマンド

メニューバーの「Window > Editor Tabs」内には、分割に関わるその他のコマンドもあります。それぞれ、

  • 「Change Splitter Orientation」で分割の方向を縦/横に変更
  • 「Un split」でアクティブなエディタタブ(ウィンドウ)の分割を解除
  • 「Un split All」で全てのエディタタブの分割を解除
  • 「Goto Next Splitter」で次のエディタタブをアクティブに
  • 「Goto Previous Splitter」で前のエディタタブをアクティブに

というコマンドになります。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone