HTML

bracketsの使い方|bracketsでHTMLを書こう|インストールから環境設定まで

Bracketsのアイコン

【Mac・環境構築編】BracketsでWebページを作るには

(その1)

悩みの耐えない女の子
悩みの耐えない女の子
HTMLでWebページを作りたいけど、何をしたら良いか分からない。Bracketsを使えばいいと聞いたが、どうやって設定したらいいの?使い方がよく分からない。環境設定まで詳しく教えて。

 

 

そんな悩みをもつ人に向けて記事を書いていきます。

 

Bracketsって?

Bracketsとは、HTML,CSSコーディングに特化したテキストエディタのことです

メモ帳でもコーディングできますが、とてもやりづらいのでオススメしません。

高機能のツールを使ったほうが絶対に良いです。

 

無料なのも嬉しい点。

日本語対応済みでとっかかりやすいですし、HTML・CSSの勉強をしたい人 or

それらを使ってWebページを作りたい人にはピッタリのアプリケーションです。

拡張機能も豊富なので、大規模な開発に対応できます。

bracketsを使うべき3つの理由

bracketsを使うべき利点は3つ

 

  • 無料
  • 自動補完
  • リアルタイムプレビュー

無料

みんな大好き「無料」です。

実際に家で仕事をする際も十分に活躍してくれるので、

早めにインストールすることをオススメします。

 

初期設定も難しくないのでサクサクと開発できます。

「簡単」「無料」でフリーランス初心者の味方です

自動補完

自動補完とは、文字を打ち始めると勝手に

「打ちたい文字はこれですか?」と候補を出してくれる機能です。

 

文字の予測変換と同じです。ファイルパスを入力する際も

サクサク入力出来るのでとても打ちやすいです。

リアルタイムプレビュー

実際にブラウザではどう映っているのかを確認できる機能です。

更新した直後に反映されるのでみやすさが段違いです。

 

このタグを付けると実際にはこう動くのか、と目で見て理解できるので、

初心者にはすごく嬉しい機能。

Bracketsのダウンロードから環境設定

それでは早速、環境設定のやり方について説明していきます。

このとおりにやれば上手くいくのでサクッとやってしまいましょう。

Bracketsをダウンロード

まず、以下URLをクリックして公式サイトにアクセスして下さい。

⇛【Brackets公式サイトへ

 

このような画面が開くので、「Bracketsをダウンロード」をクリックします。

Brackets公式ページからダウンロード

インストール〜起動

ダウンロードが完了すると、ダウンロードフォルダ(以下の画面)が開きます。
「Brackets.Release.dmg」をダブルクリックして下さい。

Bracketsをインストール

 

しばらく待つとこの画面が開きますので、
左側の「Brackets.app」と書かれたアイコンを
右側のフォルダへドラッグ&ドロップしてください。
Bracketsをアプリケーションフォルダへドロップ

 

アプリケーションフォルダが開くので、Brackets.appを探します。

Bracketsを見つける

 

これからは起動することが多くなるので、dockにショートカットを作成します。
アプリケーションフォルダの「Brackets.app」を、デスクトップのdockへ
ドラッグ&ドロップします。

BracketsをDockへドラック

 

dockにBracketsのアイコンが出てくるので、それをクリックします

DockのBracketsをクリック

 

すると、このような警告画面が出てくるので、「開く」をクリックします。
警告画面にOKを返事

 

このような初期画面が出てくればセットアップ完了です。
次回以降は、dockからBracketsのアイコンをクリックすれば
作業を再開する事ができます。
Bracketsスタート画面

プレビューで表示画面を確認してみる

ブラケッツは、現在編集中のファイルの挙動をリアルタイムで確認できます。

「プレビュー機能」使ってみましょう。

 

ブラケッツの画面の右上にカミナリのようなマークがありますので、

それをクリックします。
※htmlファイルを選択していないと確認ができない為、注意してください。
※また、GoogleChromeをインストールしていないと表示できません。
※GoogleChromeのインストール方法はまた説明します。
プレビュー機能を使う

 

この画面が、ブラウザで実際に表示される画面です。
適当に文字を打ってみると分かりますが、リアルタイムに変更が
反映されています。いちいち更新しなくて良いのは結構うれしい点です。

Preview画面詳細

まとめ

以上でBracketsのセットアップ作業は完了です。
次回も引き続き、Webサイト制作の為の環境を整えていきます。