Bracketsエディタで左右に2画面分割したけど使い方・操作方法がよくわからない……と思いませんか?左右分割する操作はすぐできると思いますが、その後の操作は少し慣れが必要です。ということで今日はBracketsエディタを左右に画面分割した後の使い方・操作方法について説明しますね。5~10分くらい勉強する時間が必要ですが、その後は画面分割の使い方で困ることはなくなりますヨ。
なお、上下分割も基本的な操作は同じですので、読み替えて下さいネ。
今日使用するファイルも用意しましたので、同じようにやってみたい人はコピーして使ってください。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左画面 | Bracketsエディタを左右に画面分割した後の操作方法</title> <link rel="stylesheet" href="style.css"> </head> <body id="left"> <h1>左画面</h1> <p>これは分割した時の左側の画面です。</p> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>右画面 | Bracketsエディタを左右に画面分割した後の操作方法</title> <link rel="stylesheet" href="style.css"> </head> <body id="right"> <h1>右画面</h1> <p>これは分割した時の右側の画面です。</p> </body> </html>
@charset="utf-8"; #index { background-color: #E6855E; color: #ffffff; } #left { background-color: #42AAC7; color: #ffffff; } #right { background-color: #DA6272; color: #ffffff; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bracketsエディタを左右に画面分割した後の操作方法</title> <link rel="stylesheet" href="style.css"> </head> <body id="index"> <h1>Bracketsエディタを左右に画面分割した後の操作方法</h1> <p>Bracketsエディタで左右に2画面に分割したけど操作方法がよくわからない……と思いませんか?</p> </body> </html>
それでは、実際に画面分割からはじめましょう。
画面分割して左右にファイルを表示する
まずはエディタの画面分割をしましょう。サイドバーまたはメニューバーから[左右分割]を選択すれば、Bracketsエディタの画面が左右に2分割表示されます。
分割後、左右いずれかのエディタ画面をマウスでクリックすると「このペインにフォーカスがあるときにファイルを開く」という文字が明るく表示されます。ここではエディタ画面の左側をクリックしましょう。
エディタ画面の左側文字が明るく表示されている状態で、開きたいファイルをサイドバーでダブルクリックすると、画面左側に表示されます。ここではleft.htmlを開きます。
さらにサイドバーを確認してみましょう。[左]という文字が表示され、そこにleft.htmlが表示されています。
今度はエディタ画面の右側に表示しましょう。エディタ画面の右側をクリックし、「このペインにフォーカスがあるときにファイルを開く」という文字が明るく表示されていることを確認して下さい。
この状態で開きたいファイルをサイドバーでダブルクリックすると、画面右側に表示されます。ここではright.htmlを開きます。
さらにサイドバーを確認してみましょう。[右]という文字の下にright.htmlが表示されています。
左画面に表示しているファイルを、右画面に表示する
『分割して左画面に表示しているファイルを、右側に表示したい』という時は、[右ペインにこのビューを反転]アイコンをクリックしましょう。まず、マウスを左画面に表示しているファイルの上側に移動させてください。[→]アイコンが表示されます。
[→]アイコン上にマウスを移動すると、[右ペインにこのビューを反転]の文字が表示されるので、クリックします。
右画面に表示しているファイルを左画面に表示する時も操作方法は同じです。右画面上に表示される[←]アイコンをクリックしてください。
この操作は、実はサイドバーでファイルをドラッグ アンド ドロップする(=マウスの左ボタンでクリック選択したまま、移動させ、最後にクリックをやめる)ことでも行うことができます。
左(右)画面に複数ファイルを開く
分割した左(または右)画面に、ファイルを複数開くこともできます。まず表示させたい左(または右)画面をマウスでクリックし、カーソルが点滅している状態にします。
新しく開くファイルをサイドバーでダブルクリックします。ここではstyle.cssファイルを開きます。
サイドバーにも「左」の文字下にleft.htmlとstyle.cssが表示され複数ファイルがあることがわかります。
左(右)画面に表示しているファイルを知りたい
画面分割して複数のファイルを表示しているうちに『左画面(または右画面)にどのファイルを表示しているかわからなくなってしまった』という時がありませんか? そんな時はサイドバーを見ましょう。
[左]の下に表示されているファイルの内、青色になっているファイルが、分割した左画面に表示されています。
右画面に表示されているファイルも同様に、サイドバーをみればわかります。
ということで、『左(右)画面に表示しているファイルが複数あることはわかったけど、切り替えるにはどうしたらいいのだろう……』となりますので、次へお進みください。
左(右)画面に表示しているファイルを切り替えたい
『左画面(または右画面)に複数ファイルがあるのはわかったが、どのファイルを表示しているかわからなくなってしまった。切替えるにはどうしたらいいのだろう……』となりますよね。その時は、サイドバーでファイルをクリック選択して切り替えてください。
簡単ですね。
左(右)画面に表示しているファイルを閉じたい
『左または右画面に表示しているファイルを閉じたい』という時もありますよね。その時は、マウスを左または右画面に表示しているファイルの上側に移動させてください。[×]アイコンが表示されます。
あとは[×]アイコンをクリックすれば、左または右画面に表示しているファイルを閉じることができます。
この操作もサイドバーで行うことができます。サイドバー上で閉じたいファイルの上にマウスを移動させてください。ファイル名の左側に×が表示されます。
あとは×をクリックすれば、左または右画面に表示しているファイルを閉じることができます。
左右分割したエディタ画面の幅を変えたい
左右分割したエディタ画面の横幅を変えたい時は、まず中央付近にある縦線にマウスを移動させてください。マウスカーソルが変更するポイントがあります。
そのポイントでドラッグ アンド ドロップ(クリックしたまま、マウスを移動させて、最後にクリックをやめる)をします。
左右分割したエディタ画面の幅が変わりましたね。
まとめ
今日はBracketsエディタを左右に画面分割した後の操作方法について説明しました。2画面分割して表示するとhtmlとcssを並べて表示できるのでホームページ作成の作業効率があがりますのでぜひ操作方法をマスターしてくださいね。なお画面を上下に分割した時も同じ要領です。
コメント