プチ講座

コーディングはこれひとつでOK!Bracketsを使ってみる2

前回はBracketsのダウンロードからインストールまでを行いました。

今日はBracketsの標準状態で使える便利機能をご紹介します。

便利機能

1.開始タグ終了タグがハイライト表示になる名称未設定-1

他人の作った整理していないソースコードを解読するのはとてもやっかいです。
Bracketsならタグにカーソルを合わせると開始と終了タグがハイライト表示されるので構造がわかりやすい!

2.CSSのプロパティ修正が簡単にできる

HTMLを開いているときにタグの上にカーソルを置き「CTRL+E」を押せばそのタグに名称未設定-1
設定されているプロパティを編集することができます。CSSの画面に切り替えないでも
良いので便利!

 

 

3.ライブプレビューがめっちゃ使える!名称未設定-2

一番の目玉昨機能かもしれません。
下準備をきちんとしておけば今までのエディタでやっていた
「ソースの修正→上書き保存→ブラウザの更新」が必要なくなります。
ソースを修正した内容が即座にブラウザに表示されるので制作がはかどります!

下準備 (※GoogleChromeをインストールしておきます)

1.フォルダを作り、その中にHTMLやCSSを保存する。
2.「CTRL+ALT+O」で作ったフォルダを選択する。
3.HTML及びCSSをBrackets開いて、「CTRL+ALT+P」でブラウザを開く。
4.ソース編集を行いブラウザが変化しているのを確認する。

4.画像のプレビューが簡単にできる名称未設定-3

ソースコードの再編集でよくあるのが、「この<img>で入れたの何の画像やっけ?」です。
ファイル名だけ見ても思い出せないことが多いのですが、Bracketsはカーソルを<img>の上にのせると画像のサムネイルを表示してくれます。
DreamWeaverでも同じ機能はありますが、無料のソフトではなかなか見当たらないと思います。

まとめ

以上、便利機能をご紹介しました。
一部の機能は有料ソフトのDreamWeaverよりも便利に使えると思います。
拡張機能を入れなくてもそこらのエディタソフトよりもはるかに便利ですので、これを機に使ってみるのも良いんじゃないかと思います。早く仕事を遂行するにはエディタソフトの機能を使いこなすのも課題です。
次回は拡張機能をご紹介します。

 

お問い合わせ

エンプロスの職業訓練についてご不明な方は、まずは学科・コース入校から就職までよくある質問をご覧ください。

  • 職業訓練のエンプロスについて、ご質問ご不明点などございましたら、下記のお問い合わせフォームからお問い合わせください。お問い合わせについては、2営業日以内にご返答いたします。

    お問い合わせフォーム
    • 営業時間
      8:50〜18:00
    • 定休日
      土日祝
    • TEL
      079-287-1000