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

スポンサーリンク
スポンサーリンク

Bracketsでおすすめのプラグインご紹介します。今回ご紹介するのは、管理人が、htmlとcssとJavaScript(jQuery)でホームページを作っている時に実際に使っているプラグインです。管理人はホームページ作成初心者のなので、初心者のあなたにもきっとお役に立てると思います。

ということで管理人は今回ご紹介しているプラグインを利用してこちらのホームページを作成しました。

自作ホームページ 「イタリア観光ぷちガイド」を公開しました。
html・css3・Javascript(jQuery)を使用して、ゼロからレイアウトを作成し、作り上げた自作ホームページ 「イタリア観光ぷちガイド」を公開しました。レスポンシブWebデザインを採用しているため、スマホでもPCでも閲覧可能...

設定すると便利な項目については、こちらでご紹介しています。

Bracketsのおすすめの初期設定項目【初心者編】
Brakcetsはインストール直後から、特に設定しなくてもすぐに使える便利なhtml&cssエディタです。が、設定しておくと便利な項目もいくつかあるのも事実です。ということで、今日はBracketsのおすすめの初期設定項目【初心者編】として...

話は戻って……全てのプラグインをインストールして使いこなすには、時間がかかると思いますので、ゆっくりやってくださいネ。

ちなみに「プラグイン」と「拡張機能」は同じ意味です。それでは、はじめます。

プラグインのインストール方法&プラグインを探しやすくするExtensions Rating

まずは、「プラグインのインストール方法」とプラグインを探しやすくする「Extensions Rating」のインストールから始めましょう。

Bracketsの拡張機能ってなに?インストール方法は?
Bracketsで拡張機能をインストールすると便利だってよく聞くけど、なんだか難しそう……わたしにできるのだろうか……と思ったりしていませんか?Bracketsであれば、初心者さんでも拡張機能のインストールが超簡単にできます。そして拡張機能...

全角・空白・タブ表示

管理人は「全角空白・スペース・タブ表示」プラグインを使用しています。

Bracketsで全角・半角の空白スペースとタブを記号で表示する拡張機能
Bracketsで全角・半角の空白スペース、タブの編集記号を表示したいけどどうすればいいのだろう……と思いませんか? 「全角と半角との空白スペースの入力を間違えてhtmlやcssの表示がおかしくなり、原因をみつけるのが大変だった」などなど困...

いくつかあるプラグインの内、「全角空白・スペース・タブ表示」プラグインが管理人としてはおすすめです。

CSSのカラーコード色表示

管理人はCSSのカラーコード色表示に「Color Highlighter」と「Brackets Css Color Preview」との2つのプラグインを併用しています。併用している理由も以下の記事に書いてあります。

https://creating-homepage.com/archives/4695
https://creating-homepage.com/archives/4733

CSSでカラーコードを色指定した時に、色表示してくれると直感的にわかるのでとっても便利です。

ミニマップ

管理人はミニマップに「BluePrint Beta」プラグインを使用しています。インストール方法はこちらです。

BracketsのミニマップはBluePrint Beta拡張機能プラグインがおすすめです
Bracketsのミニマップのプラグインにあなたは何を使っていますか? 管理人はminimapからBluePrint Betaに変更して使っています。BluePrint Betaに変更した最大の理由は、「画面を左右分割時に、右側画面を閉じる...

使い方の説明はこちらです。

https://creating-homepage.com/archives/4845
https://creating-homepage.com/archives/4863

いくつかあるミニマップですが、「BluePrint Beta」が一番使いやすいです。実は管理人ははじめ「minimap」プラグインを使っていたのですが、上記の「BluePrint Beta」の方が便利なので、途中で切り替えました。

インデント(字下げ)

管理人はインデント(字下げ)に「Indent Guides」プラグインを使用しています。

Bracketsでインデント(字下げ)位置に記号を表示する拡張機能Indent Guidesの特徴・インストール方法・使い方
BracketsでhtmlやcssやJavaScriptをコーディングしていると、『記述位置を揃えたい!』『インデント(字下げ)の位置を直感的にわかるようにしたい!』と思いませんか? Indent Guides拡張機能プログラムをインス...

html・css・JavaScriptを見やすくするために、あなたもインデント(字下げ)していると思います。その位置に記号を表示してくれるのでソースコードが見やすくなります。

HTML開始タグと終了タグの関係をわかりやすくする

2019/6/7 Ver1.14で、HTML Block Selector拡張機能プラグインが機能していません。メロンさん、ご連絡ありがとうございました。

管理人は「HTML Block Selector」プラグインを使用して、HTML開始タグと終了タグの対応関係をわかりやすくしています。

BracketsでHTMLの開始タグと終了タグとの間をわかりやすく表示してくれる拡張機能プラグイン
2019/6/7 Ver1.14で、HTML Block Selector拡張機能プラグインが機能していません。メロンさん、ご連絡ありがとうございました。 Bracketsでhtmlを記述していて、開始タグと終了タグとの間が、画面にお...

htmlを記述しはじめて、長くなってくるとどうしても「開始タグ」と「終了タグ」がわかりづらくなります。そんなとき一発で対応関係がわかるので便利です。

html・css・JavaScriptのコード整形

html・css・JavaScriptのコード整形は、Beautifyプラグインがとっても便利です。

Bracketsでhtml・css・JavaScriptをコードフォーマットして読みやすく自動整形する方法
BracketsのBeautify拡張機能を利用すると、htmlやcssやJavaScriptのコードをインデントしたり改行したりして読みやすく自動で整形 ―つまりコードフォーマット― してくれます。 自動整形のタイミングを「手動」...

HTML文法チェック

管理人はhtmlの文法チェックを「W3CValidation」プラグインで行っています。インストール方法はこちら

Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの特徴・インストール方法
Bracketsで『htmlコーディングミスの場所がわからない……』とか『htmlタグの入力が間違っているみたいでページがうまく表示されない……』ということはありませんか? そんな時には、W3CValidation拡張機能プラグインが便利...

使い方はこちら

Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方
Bracketsでhtmlの文法チェックをするW3CValidation拡張機能プラグインの使い方は以下の2つです。 html文法チェックを実行するときに使う html文法チェックNGの場合の「詳細エラーメッセージ画面」を表示・非表示...

「W3CValidation」プラグインでhtmlの文法チェックを簡単にできるのでとっても便利です。

残念ながらCSSを文法チェックする初心者向けプラグインはない(CSS Linterというプロ向けはありますが……管理人は使いこなせません(*_*))ので、CSSの文法チェックをするときは、W3Cのサイト上で行っています→W3CのCSSバリデーションサービス

htmlのclass属性値の入力候補を表示

htmlのタグ入力でclass属性値を入力するとき、id・classセレクタの入力候補を表示してくれる「CSS Class Code hint」プラグインはとっても便利です。インストール方法・使い方の説明はこちら

Bracketsでhtmlのclass属性値の入力候補を表示する拡張機能プラグインの特徴・インストール方法・使い方
Bracketsのhtmlファイルで、class属性値を入力するとき、『あれっ、cssファイルにid・classセレクタを定義したけど、なんて名前だったけ?』という時はありませんか? そんな時にid・classセレクタの入力候補を表示して...

とっても便利で超おススメのTabs-Custom Working

Tabs-Custom Workingプラグインは、タブ表示はもちろんのこと、サイドバーをボタン一つで表示↔非表示切替えなどなどができる「とっても便利でおススメのプラグイン」です。

インストール方法はこちら

Bracketsでおすすめのタブ表示拡張機能プラグインTabs-Custom Working
あなたは複数の画面を切り替えるのに便利なタブ表示拡張機能プラグインに何を使っていますか? 管理人は最近「Documents Toolbar」から「Tabs-Custom Working」に乗り換えました。かなり便利で、「かゆいところに手が届...

とっても便利な分、使いこなすにはちょっと使い方の練習が必要かと思います。ということで、使い方のまとめページはこちら

BracketsのTabs-Custom Working拡張機能プラグインの使い方 まとめ
BraketsのTabs-Custom Working拡張機能プラグインの使い方が、いっぱいありすぎて困ってしまう……というひとはいませんか? ということでまとめました。 Tabs-Custom Working拡張機能プラグインは、機能...

このTabs-Custom Workingプラグインは、アイコン表示もできます。そのアイコン表示が、他のアイコン表示プラグインより、便利なので管理人はこちらを使用しています。

Bracketsでファイルとフォルダのアイコンが表示できるプラグイン
Bracketsにファイルアイコンだけでなく、フォルダアイコンも表示できる拡張機能プラグインがあることをご存知ですか? フォルダアイコンはTabs-Custom Working拡張機能プラグインを使用すると可能になります。実はこのプラグ...

アイコン表示

管理人が現在アイコン表示に使用しているプラグインは、上記で説明したTabs-Custom Workingです。フォルダアイコンも表示してくれるので、見やすいです。

Bracketsでファイルとフォルダのアイコンが表示できるプラグイン
Bracketsにファイルアイコンだけでなく、フォルダアイコンも表示できる拡張機能プラグインがあることをご存知ですか? フォルダアイコンはTabs-Custom Working拡張機能プラグインを使用すると可能になります。実はこのプラグ...

ご参考までに……以前管理人が使っていたアイコン表示プラグインは「Brackets File Icons」です→Brackets File Iconsプラグインの特徴・インストール方法

htmlのひな型・テンプレート

管理人が最初の頃、よく利用していた「htmlのひな型・テンプレート入力プラグイン」が「Add HTML template」です。

Bracketsでhtmlのひな・型テンプレートを簡単に入力する方法
htmlの新規ファイルを作成した時、『DOCTYPE宣言やhtml・head・bodyなどの各タグをいちいち入力するのが面倒くさい! ひな型・テンプレートみたいなのはないの……』と思いませんか? 実は「Add HTML template拡...

最初の頃は、入門書を読みながらコーディングしたり、ちょっとしたhtmlを記述して確認することが多いと思います。そんな時に便利なプラグインです。

まとめ

今日は、管理人が、htmlとcssとJavaScript(jQuery)でホームページを作っている時に実際に使っているおすすめのプラグインをご紹介しました。

すべてインストールして使いこなすには、ちょっと時間がかかると思います。

しかしここでご紹介しているプラグインをインストールして使用すれば、htmlとcssとJavaScript(jQuery)で初心者がホームページを作るときには困らないかと(”ω”)ノ 管理人が以下のようにホームページを作成しましたので(`・ω・´)ゞ
自作ホームページ 「イタリア観光ぷちガイド」を公開しました。

もちろんこれ以外にも便利なプラグインが存在しています。随時更新していきますね。

そうそう、設定すると便利な項目についても、こちらで紹介していますので参考にしてくださいネ→Bracketsのおすすめの初期設定項目【初心者編】

コメント

  1. C.Osada より:

    コードを印刷したいけど、「印刷」のコマンドがありません、どうすればいいのですか

    • 管理人 より:

      C.Osadaさん

      管理人です。コメントありがとうございます。
      残念ながら、Bracketsには(管理人が調べた範囲では、)コードを直接印刷するコマンドはありません。

      管理人は最近Bracketsをテキストエディタ代わりにして文章を打ち込んでいます。なので管理人も『文章を確認するために、Brackesから印刷できればなぁ』と、C.Osadaさんと同じように思います。

      ということで、管理人は代わりの方法として、以下の方法で、Bracketsで作成した文章を印刷しています(Windowsの場合です。もしMacを利用している場合は、ちょっと違うかもしれません……)。

      1. サイドパネルで、印刷したいファイルを選択し、右クリックします。
      操作画像はコチラ→サイドパネル→ファイル選択→右クリック

      2. メニューから[エクスプローラで表示]を選択します。
      操作画像はコチラ→エクスプローラで表示

      3. Terapadなどの印刷可能なテキストエディタから、ファイルを印刷する。

      いかがでしょうか?

      また簡単に記事にまとめましたので、よければ参考にしてくださいネ→Bracketsでhtml・css・JavaScriptのソースコードを印刷する方法

      ご不明な点があれば、遠慮なくコメントくださいネ。

タイトルとURLをコピーしました