5分で学べるBracketsの使い方。スグに使いはじめたい人の基本操作。

Pocket

Bracketsのインストールが終わったので、スグに使いはじめたけど、操作方法がよくわからない……ということはありませんか?ということで今日は、5分で学べるBracketsの使い方。[html・cssファイルの新規作成→ライブプレビュー→画面分割→保存]の基本的操作の流れを説明しますね。

なお、Bracketsのプラグインの使い方を知りたいというアナタはこちらをご覧ください。インストール方法と使い方を説明しています

Bracketsでおすすめのプラグインまとめ【初心者編】

また初期設定しておくと便利な項目について知りたいというアナタはこちらをご覧ください。

Bracketsのおすすめの初期設定項目【初心者編】

文章は少し長いですが、超初心者さんでも、終わった頃にはBrakcetsがちゃんと操作できるようになりますので、ちょっと頑張ってみてください。

それではインストール直後の画面からはじめますね。

作業フォルダを選択

まずはBracketsで作業フォルダを選択しましょう。画面左側にある[Getting Started]をクリックしてください。

[フォルダを開く]と表示されるので選択してください。

エクスプローラが表示されますので、あなたの作業フォルダを選択してください……っと『作業フォルダって何?』というあなたはコチラをご覧ください。

ホームページを作るときの作業フォルダって? Windows編

今回の説明では[ドキュメント]フォルダに[BracketsWork]フォルダを作成し、作業フォルダとして選択しますね。

作業フォルダは設定できましたか? それでは、index.htmlを作りましょう。

htmlファイルの作成

まずはhtmlファイルを作成し、ライブプレビューを実行してみましょう。メニューバーの[ファイル]→[新規作成]を選択してください。

画面左側のサイドバーに「名称未設定-1」と表示されましたね(1という数字は、2だったり、3だったりします。1でなくても大丈夫です。)。

この「名称未設定-1」の部分が「水色文字」になっていることを確認し、メニューバーの[ファイル]→[名前を付けて保存]を選択してください。ちなみに[名前を付けて保存]操作をしないと、htmlコーディングの際に利用する便利な機能が使えません

ここで index.html と入力し、[保存]ボタンをクリックします。

ここでhtmlをコーディングします。

それでは次にBracketsの最大の機能であるライブプレビューを実行してみましょう。

htmlをライブプレビュー

htmlの入力を終えたら、保存しないで画面右側(のツールバー)にあるライブプレビュー(=イナズマの形をしたアイコン)をクリックしましょう。

ブラウザーが立ち上がり、表示されます。ちなみに先ほど編集したindex.htmlの保存操作をしていません。

ライブプレビューの強調表示

Bracketsエディタのhtml内のカーソル位置をわかりやすい位置に移動させて(ここではindex.htmlの<h1>)、ライブプレビューしたブラウザーをみてみると青枠で強調表示されているのに気がつきますか?

これをライブプレビューハイライトといいます。「Bracketsエディタ内のカーソル位置(にあるhtml要素)」をブラウザーが強調表示してくれます。htmlだけでなくcssでもライブプレビューで強調表示してくれます。

ライブプレビューは、ファイル未保存でも変更が反映

ライブプレビューでは、ファイル保存をしなくても、ブラウザーに変更が反映されます。ここで未保存のindex.htmlをすこし変更してみましょう。

入力するとスグに変更が反映されます。すごい。

htmlファイルを保存

ここでindex.htmlの保存操作をしておきましょう。メニューバーの[ファイル]→[保存]を選択してください。

保存すると右サイドバーやタイトルバーに表示されていた●が消えているのがわかります。変更後に保存したかどうか忘れてしまった時は、この●があるかないかで判断できますよ。

cssファイルの作成

次にcssファイルを作成してみましょう。ファイル名はstyle.cssとします。先ほどと同じようにメニューバーの[ファイル]→[新規作成]を選択してください。

ファイルが作成され、「名称未設定」となっています。

続けてこの「名称未設定」となっているファイルを選択して、メニューバーの[ファイル]→[名前を付けて保存]を選択し、style.cssと入力してください。ちなみに[名前を付けて保存]操作をしないと、cssコーディングの際に利用する便利な機能が使えません

style.cssに入力していきます。

入力が終わると、『あっ!index.htmlでstyle.cssを使用するために<link rel="stylesheet"……を記述しないと……』となりますよね。ということでstyle.cssからindex.htmlへファイルを切替えなくっちゃ……あれっ?どう操作するんだ?

ファイルの切替操作

ここで『あっ!index.htmlに<link rel="stylesheet" href="style.css">を記述しないと……』となり、Bracketsエディタに表示しているstyle.cssからindex.htmlファイルへ切り替えたい……となります。

Bracketsを使いはじめて最初に『?』と思うのが、このファイルの切替操作を操作です。複数ファイルを操作しはじめると、「どこを操作するとファイルが切り替わるのか」が『?』なのです。

といっても簡単で、ファイルの切替操作は、画面左側のサイドバーで行います。サイドバーでindex.htmlを選択してください。

index.htmlに切り替わりました。ということでファイルの切替操作は、画面左側のサイドバーで行います。

index.htmlに切り替わったところで<link rel="stylesheet" href="style.css">を記述しておきましょう。

cssファイルも未保存でライブプレビュー

そういえば先ほど記述したスタイルシートstyle.cssの確認をしていないですよね。ブラウザーを見てみましょう。

スタイルシートstyle.cssが反映されています。お気づきの人もいるかと思いますが、まだstyle.cssは編集後に保存していません。にもかかわらずブラウザーにちゃんと反映されているのです。Bracketsは、cssの場合でも、未保存でライブプレビューができるのです。Bracketsはなんといってもこの機能がスゴイ。

ここでstyle.cssを保存しておきましょう。画面左側のサイドバーでstyle.cssを選択し、メニューバーの[ファイル]→[保存]を選択してください。

サイドバーやタイトルバーに表示されていた●が消えて保存されたことがわかりますね。

画面分割して表示

htmlとcssファイルをBracketsエディタ内で画面分割して表示・編集できるようにしたいですよね。ということで画面分割をしてみましょう。画面左側にある[エディターを垂直方向/水平方向に分割]アイコンをクリックしてください。

「分割なし」にチェックがつき、「左右分割」と「上下分割」があるのがわかりますね。

今回は「左右分割」を選択しましょう。

左サイドバーに「左」「右」と表示されていますね。

ここで左サイドバーの「左」にあるstyle.cssを、ドラッグアンドドロップ(=マウスの左側のボタンを押したまま、マウスを移動して、ちょうどいい高さで離す)して、「右」の下に移動させましょう。

左右に画面分割して表示できました。カーソルを移動させてindex.htmlとstyle.cssをそれぞれ編集することができます。

画面分割の解除

今度は逆に画面分割を解除してみましょう。画面左側にある[エディターを垂直方向/水平方向に分割]アイコンをクリックし、「分割なし」を選択してください。

画面分割が解除されましたね。Bracketsエディタにはstyle.cssが表示されていますね。これは画面分割前にカーソルがあったファイルが、画面分割後に表示されるからです。

Bracketsの終了

ではBracketsを終了しましょう。画面右上にある×アイコンをクリックしてください。

変更を保存というメッセージボックスがでてきました。index.htmlの保存操作をしていなかったので、ここで[保存]を選択します。

保存操作を忘れた場合でも、最後に確認メッセージが表示されるので安心ですね。

まとめ

今日は、Bracketsをスグにはじめたい人の使い方として、[html・cssファイルの新規作成→ライブプレビュー→画面分割→保存]といった基本的な操作方法を説明しました。 文章は少し長くなりましたが、操作は5分ほどで終了する作業です。『Braketsのインストールはしたけどなんだか使い方がよくわからない』という人(私です……)や、『拡張機能(プラグイン)をしたりとかエディタを使用するための準備等は後回しにして、とりあえずどんな感じなのか使ってみたい』とか『Bracketsは、自分にあったエディタかどうかちょっとだけ確認したい』という人にもお役に立てると思います。 もちろんBrackets機能拡張をインストールするとさらに使いやすくなります。こちらについても今後説明していきますね【2017/1/16追加】おすすめプラグインをまとめました→Bracketsでおすすめのプラグインまとめ【初心者編】 【2017/2/5追加】さらに初期設定しておくと便利な項目もいくつかありますので、手が空いたらこちらも設定しておくことをおススメします。→Bracketsのおすすめの初期設定項目【初心者編】

Pocket