初心者にもわかるブラケッツの使い方｜ブラケッツとは何だろう？

この記事では、Adobe社が開発した無料で使えるテキストエディタ「ブラケッツ」の使い方を、HTMLを学ぶ初心者にもわかるように紹介しています。遊び感覚で使って行くうちに、言語は習得できます。無料ですので、ブラケッツを楽しんで使いましょう。

コンテンツ

初心者にもわかるブラケッツの使い方

ブラケッツのインストールが完了したら、下記画像のブラケッツ（Brackets）をクリックして起動してください。

但し、残念なことにブラケッツ（Brackets）は2021年の8月末までで、Adobeのサポートは終了します。2021年9月1日からのコード編集は、Visual Studio Code（無料）で行ってほしいとのアナウンスが表示されています。

この、ブログでも、別途、Visual Studio Code紹介する予定です。但し、8月中はブラケッツが使えるので、本日はブラケッツの使い方を紹介します。

ブラケッツのインストールが完了したら、下記画像の赤く囲んだブラケッツ（Brackets）をクリックして起動してください。

Brackets起動画像

ブラケッツの使い方

下図の赤く囲んだ、「ファイル」から「新規作成画面」を選び、画面下の「テキスト」から「HTML」を選んで下さい。

brackets空画面

この状態になれば、ワープロ画面と同じように、画面内に文字を印字できます。
次に、下記文字を画面に印字してみましょう。この画面では、本ブログのワードプレスが反応しないように、不等号を大文字で書いていますが、実際のブラケッツには小文字で印字して下さい。

＜!DOCTYPE html＞
＜html＞
＜head＞
＜meta charaset=”utf-8″＞
＜title＞練習ページ＜/title＞
＜/head＞
＜body＞
＜h1＞HTML5とCSS3基本講座 3｜HTMLの基本文法のマスター＜/h1＞
＜p＞これは、基本講座からの抜粋記事です。＜/p＞
＜h2＞ HTMLの基本文法＜/h2＞
＜p＞HTMLには、種類やバージョンがありますが、HTML5は、HTML 4.01やXHTMLの文法も利用できるため安心して学びましょう。＜/p＞
＜h3＞マークアップを理解しよう＜/h3＞
＜p＞タグというもので、文書の意味付けをしていく作業のことを「マークアップ」と呼びます。＜/p＞
＜/body＞
＜/html＞

入力したら、ブラケッツの「ファイル」から「名前を付けて保存」を選んで名前を付けましょう。次に画面右上の青色で囲んだ稲妻マークをクリックすると「ライブプレビュー」に接続して、次のような画面が表示されています。

ライブプレビュー画像

ブラケッツとは？

「ブラケッツ（Brackets）」は、Adobe社が開発したウェブデザイナーのためのフリーで使えるテキストエディタです。HTML/CSS/（JavaScript）の開発を効率よく行えるため人気のエディタと言われています。

静的なウエブサイトの制作に特化していて、WindowsとMacの両方で、無料で使えます。

ブラケッツのインストーラーは英語ですが、日本語で使えます。

ブラケッツの便利な機能

ブラケッツは、プログラムを見やすくするために、先頭に同じ幅の空白を入れてソースコードを揃えるインテンド機能や、色分けするなどの機能があって、目でみて分かりやすくなっています。

ブラケッツの特別便利な機能は、Live Preview（ライブプレビュー）です。ライブプレビューは、HTMLで記載した内容を、ブラウザー画面で直ぐに確認できます。

ただし、ブラウザーにGoogle Chromeをインストールしないとライブプレビューは、使用できないため、Google Chromeを使っていないPCでは、Google Chromeのインストールから行って下さい。と言われてきましたが、私のPC（ブラウザー：New Edge）では、ブラケッツは問題なく動作しています。