簡素な窓
判りにくいもの等を分かり易く紹介しています。
Info Tech

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

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

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

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

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

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

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

Brackets起動画像Brackets起動画像

ブラケッツの使い方

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

brackets空画面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)では、ブラケッツは問題なく動作しています。

ブラケッツのインストール

ブラケッツは、正式HPからインストールできます。

ポイントのまとめ

「ブラケッツ(Brackets)」は、Adobe社が開発したウェブデザイナーのためのフリーで使えるテキストエディタです。

ブラケッツは、プログラムを見やすくするために、インテンド機能や、色分けするなどの機能があります。

ブラケッツの、Live Preview(ライブプレビュー)機能は、ブラウザーにGoogle Chromeをインストールしないと使用できないため、Google Chromeのインストールから行って下さい。と言われてきましたが、Windows10のNew Edgeでは大丈夫です。

私のPCは、購入時にWindows8.1がインストールされていましたが、直ぐにWindows10になってしまいました。その後、Microsoft Edgeを使ってきましたが、先日のアップデートでNew Edgeにバージョンアップしています。

ブラケッツは、ブラウザーをGoogle Chromeにしてからインストールしたため、正確なことは言えませんが、ブラウザーがNew Edgeでも普通に動作しています。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。
RELATED POST