プチ講座

コーディングはこれひとつで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よりも便利に使えると思います。
拡張機能を入れなくてもそこらのエディタソフトよりもはるかに便利ですので、これを機に使ってみるのも良いんじゃないかと思います。早く仕事を遂行するにはエディタソフトの機能を使いこなすのも課題です。
次回は拡張機能をご紹介します。

 

メインメニュー

ブログメニュー

タグクラウド

おすすめ記事

【動画】エンプロスが未経験でも医療事務員を輩出できる理由
【動画】エンプロスが未経験でも医療事務員を輩出できる理由