Dsuke Blog

どうも、Dスケです。

 

Webページを作る際に必要なのが、テキストエディタ。

HTMLやCSSのコードを書くためのエディタ（編集）ツールですね。

一番身近なエディタツールである「メモ帳」から、有料ならAdobe社の「Dreamweaver」など、世の中には無数のツールが用意されています。

 

今回はその中でも、無料で使いやすくて、実際の制作現場でもよく使用されている「Brackets」について、インストールから最初の設定までをご紹介しましょう。

初期設定としてこれくらい確認しておけば問題ないね、というポイントや、入れておくとさらに使いやすくなるおすすめプラグインなど、わかりやすくまとめました。

これで便利なコーディングライフを送れること、間違いなしです！

 

テキストエディタ「Brackets」のいいところ

先ほど少し触れたように、世の中には沢山のエディタツールがあります。

有名なところだと「TeraPad」「Notepad++」「秀丸エディタ」とかでしょうか。最近ではMicrosoftが出した「Visual Studio Code」というのもあるみたいですね。

そのなかで、Bracketsのおすすめできるポイントとしては、

などが挙げられます。

 

特にAdobeが作っているという安心感は、デザイナー界隈にも評価が高く、今ではDreamweaverも使えるのに、あえてBracketsを使う人がいるくらい。

（元々は別の会社が作っていたBracketsを、Adobe社が買い取ったそうですね。おそらく自社でこれを超えられないという判断だったと想像すると、やはりスゴイなBrackets）

有料テキストエディタは確かに使いやすいものも多いですが、その分余計な機能が多くてじゃまになったり、それゆえに動作が重かったりと、扱いも繊細になりがちです。

 

「コードを書く」というシンプルな単機能だけに絞ったBracketsは、まさに最強の無料テキストエディタといえるでしょう。

 

Bracketsのダウンロード・インストール

それではさっそく、ダウンロードするところから行ってみましょう！

まずはBracketsのサイトへ。

ダウンロードのボタンをクリックして、ソフトをインストールします。

チェックは両方に入れたままでOKです。

これでインストールは終了です。お疲れ様でした！（はやっ）

 

Bracketsでのファイル・フォルダの開き方

ファイル・フォルダの開き方には2種類あって、「Bracketsソフトを立ち上げてから開く」か、「HTMLファイル等から開く」。どちらでもよいのですが、僕はデスクトップ上にアイコンをあまり置きたくないので後者で開いてます。

お好きなほうで、立ち上げてください。

Bracketsソフトを立ち上げる

先ほどインストールしたフォルダの場所から、Bracketsアイコンをクリックして立ち上げると、画面が開きます。

「ファイル」メニューから、「開く」を選択するとファイルを、「フォルダーを開く」を選択するとフォルダを開くことができます。

 

基本は「フォルダーを開く」がおすすめです。理由は、自分の作りたいWebページのフォルダを指定すれば、その中のデータを階層で分かりやすくみられるから。

HTMLファイル等から開く

HTMLやCSSのファイルを右クリックすると、「Open with Brackets」という項目ができているので、ここからでもBracketsで開くことができます。

なお、インストール時に2つあったチェックの2つめを外していると、この表示は出ないため、そのときは「プログラムから開く」で選びましょう。規定のプログラムにしておくと、次からはダブルクリックだけでBracketsが立ち上がります。

 

こちらでもフォルダから開いておくと、フォルダ内のHTMLやCSSも一度に確認できて便利です。

Bracketsの初期設定あれこれ

インストールしてしまえば、もはやすぐに使えてしまうBracketsなのですが、自分なりのカスタマイズができちゃうのがいいところ。

初期のタイミングで見ておくとさらに使いやすい、自分だけの調整ができる設定項目を見ていきましょう。

Bracketsの見た目を変える

Bracketsでは、最近流行りの「ダークモード」にしたり、フォントのサイズ・種類を変えたり、新たなプラグインを入れるなどして、見た目をカスタマイズすることができます。

「表示」メニューから、「テーマ」を選びます。

テーマではデフォルト表示（白）かダークモード（黒）を選べ、フォントのサイズや種類についても、自分の見やすいように変更が可能です。

また、もっと見た目を変えてみたいという人用に、プラグインが用意されていて、インストールすると自分だけの表示にすることができます。

プラグインをインストールするには、Brackets右側にある「拡張機能マネージャー」アイコンをクリックします。

開いた画面の「テーマ」から、いろんなテーマデータをダウンロードできます。

試しに、「90’s T-shirt」というテーマプラグインをインストールしてみました。

こんな感じで、自由に好きな色味に変えられます。

各機能・アイコンの役割を覚える

覚えておくとより使いやすくなるメニューやアイコンがあるので、効率よく使っていきましょう。

画面分割

初期状態だと1画面に1データしか表示できませんが、画面分割を使うと2つのデータを一緒に確認できて便利です。

「左右分割」を選ぶとこんな感じ。

ライブプレビュー

現時点のHTMLコードが、ブラウザ上でどう表示されるかを確認できます。右上のカミナリみたいなアイコンをクリックすると、Google Chromeが立ち上がります。（ショートカットキー「Ctrl」+「Alt」+「P」でもOK）

これを立ち上げながらコードを書いていくと、リアルタイムにブラウザに反映していくので、ちょっと面白いです（笑）。

インデント（余白）設定

右下の「スペース」という箇所で数値を入れると、自動的に関連コード内で余白を入れてくれます。

人によって設定は好みがあるでしょうが、「2」がおすすめです。理由は、コードによっては前の行の余白を引き継いで余白が入るため、多すぎると見にくくなるから。

ちなみに、右下にはそのほかの選択項目も見受けられますが（「INT」とか「UTF-8」）、基本は触らないで大丈夫かと。詳しく知りたい方は別で調べてみてね。

最初に入れておくと便利なプラグイン

先ほども少し出てきましたが、改めて「プラグイン」とは、文字通りプラグ（Plug）にイン（In）するものということで、Bracketsの差込口に差すことで、便利な機能が使えるようになるソフトのことです。

インストールしておくと便利なものを以下に挙げているので、とりあえず入れてみて、慣れてきたら自分なりにON/OFFしながら使い分けていくと良いかもしれません。

Beautify

Bracketsで書いたコードを、見やすく整形してくれるプラグイン。

[編集]メニュー→[保存時にBeautifyする]にチェックを入れておくと、保存のたびに見やすくコードを整理してくれる。

HTML comment button

HTML内にコメントタグを付けるボタンをセットすることができます。

ブラウザに表示したくない部分を非表示（コメントアウト）にしたり、ちょっとしたメモを残しておきたい時などに便利です。

C style comment button

CSS内にコメントタグを付けるボタンをセットすることができます。

こちらもコメントアウト、ちょっとしたメモに便利。

Disable Autoclose Tags

開始タグを書いた際に、自動で閉じタグを入れてくれるプラグイン。

プラグインを入れておいて、後から機能を無効にすることもできるので、ひとまず入れておくと便利。

僕は閉じタグまで入れてくれると楽なので、ずっと使ってます。

HTML Hint

HTMLの文法チェックを行ってくれます。

Overscroll

記述したコードの一番最後に、少し余白を空けてくれるプラグイン。

これがONになっていないと、最後のコードがBrackets画面内の一番下になってしまい、ちょうどいい位置でコードが見れない……。なんでも余白があるほうがいい！

言ってる意味がよく分からないアナタも、一度入れてみると違いが判ると思います。

全角余白・スペース・タブ表示

その名の通り、「全角余白」「スペース」「タブ」を分かりやすく表示してくれるプラグインです。

これが入ってないと、半角余白のつもりが全角余白を入れていて、思った通りのブラウザ表示にならない…なんてこともあり得ます。

HTMLやCSSは余白それぞれにも意味があるので、間違いを減らす意味でも、入れておくのがおすすめです。

シンプルだけど多機能なBracketsを使いこなせ！

テキストエディタツールは無料・有料ともにたくさんの種類がある分、選ぶのが大変なところもありますが、やはり使っていて動作が速い、シンプルで使いやすいものが一番と感じます。

ぜひBracketsを試してみて、使いやすかったら長く愛してあげてください！

ではでは。

 

 

Dスケ