Bracketsでエディタとライブプレビューブラウザーとの画面切替をせず同時に表示する方法

ライブプレビューという便利な機能があっても、いちいちBrackets画面とブラウザー画面とを切り替えないと、それぞれの画面が見れないから不便だ！　と思いませんか？

でももし、Bracketsでエディタと（ライブプレビューの）ブラウザーとを2画面並べて一緒に表示できたらすごく便利ですよね。

ということで、今日はそんな時に役立つ「Bracketsでエディタとライブプレビューブラウザーとを2画面並べて表示する方法」の説明をしますね。

そうそう、先に言っておきますと、大きいディスプレイモニタを使っている人は今日の操作は不要です。またあなたのお役にたてる記事を書きますので、今日はおしまいにして下さい。申し訳ありません。m(__)m

それでははじめます。
はじめる前に、Bracktesでライブプレビューを実行して、ブラウザーを表示しておいてくださいネ。

html・cssの保存操作は不要! Bracketsライブプレビューの使い方

Bracketsエディタでhtml・cssファイルの編集・変更をした時に、「保存操作をしないで、リアルタイムに、ブラウザーでプレビュー確認できる機能」であるライブプレビューの使い方について今日は説明しますね。 『ライブプレビュー機能を使わ...

creating-homepage.com

2016.05.19

同時に2画面を並べて表示

デスクトップ上でBrakcetsと（ライブプレビューの）ブラウザーとを2画面を並べて表示します。

まず、Bracketesをデスクトップの左側に表示します。方法は以下のとおりです。

1. Bracketsのタイトルバーをドラッグしたまま、
2. デスクトップの左端にもってきて、
3. デスクトップの画面中央に薄い縦線がみえたら、
4. マウスをはなし（＝ドロップ）します。

図で説明すると、以下になります。

次に（ライブプレビューの）ブラウザーをデスクトップの右側に表示します。

1. ブラウザーのタイトルバーをドラッグしたまま、
2. デスクトップの右端にもってきて、
3. マウスが右端に隠れたら、
4. マウスをはなし（＝ドロップ）します。

図で説明すると、以下になります。

これでデスクトップ上でBrakcetsと（ライブプレビューの）ブラウザーとを並べて表示できました。

この状態で、Bracketsのエディタ画面でhtmlやcssを編集すると、すぐに（ライブプレビューの）ブラウザーが確認できるので便利です。

が、エディタ画面がせまいですよね(ΦωΦ)。そこでサイドバーを非表示にしてみましょう。

ファイルを簡単に切り替え選択する方法

エディタ画面に一度表示したファイルは、Ctrl+Tabで簡単に切り替え選択し、エディタ画面に表示することができます。

Ctrl+Tab


Ctrl+Tabのショートカットキーを押して　index.html を切替選択すると、


index.html がエディタ画面に表示

なので一度表示したファイルであれば、サイドバーを表示させて選択する必要はありません。Ctrl+Tabのショートカットキーを押して、ファイルを選び、エディタ画面に表示しましょう。

ちなみにこの機能はVer1.7からの新機能です。→Ctrl+Tabを押したときの動き

まとめ

今日は「Bracketsでエディタとライブプレビューブラウザーを同画面に一緒に表示する方法」を説明しました。

私と同様に小さな画面のPCでBracketsを使っている人は『ライブプレビューができても、いちいちBrackets画面とブラウザー画面を切り替えないといけないから不便！』と思っている人が多いはず……ということでご紹介しました。

ぜひ、チャレンジしてください。ものすごく便利で、ホームページ作成の効率がUPしますので。

実はですね……、ディスプレイモニタが大きいと今日の操作は不要なのです。

ということや、さらにホームページ作成の効率をUPするために、私は大きなディスプレイモニターを購入する予定です。「ディスプレイモニターの選び方」などその経緯なども書いていきますので、楽しみにしていてくださいネ。それでは。