Contents
【Mac・環境構築編】BracketsでWebページを作るには
(その１)
そんな悩みをもつ人に向けて記事を書いていきます。
Bracketsって？
Bracketsとは、HTML,CSSコーディングに特化したテキストエディタのことです
メモ帳でもコーディングできますが、とてもやりづらいのでオススメしません。
高機能のツールを使ったほうが絶対に良いです。
無料なのも嬉しい点。
日本語対応済みでとっかかりやすいですし、HTML・CSSの勉強をしたい人 or
それらを使ってWebページを作りたい人にはピッタリのアプリケーションです。
拡張機能も豊富なので、大規模な開発に対応できます。
bracketsを使うべき3つの理由
bracketsを使うべき利点は3つ
- 無料
- 自動補完
- リアルタイムプレビュー
無料
みんな大好き「無料」です。
実際に家で仕事をする際も十分に活躍してくれるので、
早めにインストールすることをオススメします。
初期設定も難しくないのでサクサクと開発できます。
「簡単」「無料」でフリーランス初心者の味方です
自動補完
自動補完とは、文字を打ち始めると勝手に
「打ちたい文字はこれですか？」と候補を出してくれる機能です。
文字の予測変換と同じです。ファイルパスを入力する際も
サクサク入力出来るのでとても打ちやすいです。
リアルタイムプレビュー
実際にブラウザではどう映っているのかを確認できる機能です。
更新した直後に反映されるのでみやすさが段違いです。
このタグを付けると実際にはこう動くのか、と目で見て理解できるので、
初心者にはすごく嬉しい機能。
Bracketsのダウンロードから環境設定
それでは早速、環境設定のやり方について説明していきます。
このとおりにやれば上手くいくのでサクッとやってしまいましょう。
Bracketsをダウンロード
まず、以下URLをクリックして公式サイトにアクセスして下さい。
このような画面が開くので、「Bracketsをダウンロード」をクリックします。
インストール〜起動
ダウンロードが完了すると、ダウンロードフォルダ（以下の画面）が開きます。 「Brackets.Release.dmg」をダブルクリックして下さい。
しばらく待つとこの画面が開きますので、 左側の「Brackets.app」と書かれたアイコンを 右側のフォルダへドラッグ＆ドロップしてください。
アプリケーションフォルダが開くので、Brackets.appを探します。
これからは起動することが多くなるので、dockにショートカットを作成します。 アプリケーションフォルダの「Brackets.app」を、デスクトップのdockへ ドラッグ＆ドロップします。
dockにBracketsのアイコンが出てくるので、それをクリックします
すると、このような警告画面が出てくるので、「開く」をクリックします。
このような初期画面が出てくればセットアップ完了です。 次回以降は、dockからBracketsのアイコンをクリックすれば 作業を再開する事ができます。
プレビューで表示画面を確認してみる
ブラケッツは、現在編集中のファイルの挙動をリアルタイムで確認できます。
「プレビュー機能」使ってみましょう。
ブラケッツの画面の右上にカミナリのようなマークがありますので、 それをクリックします。 ※htmlファイルを選択していないと確認ができない為、注意してください。 ※また、GoogleChromeをインストールしていないと表示できません。 ※GoogleChromeのインストール方法はまた説明します。
この画面が、ブラウザで実際に表示される画面です。 適当に文字を打ってみると分かりますが、リアルタイムに変更が 反映されています。いちいち更新しなくて良いのは結構うれしい点です。
まとめ
以上でBracketsのセットアップ作業は完了です。
次回も引き続き、Webサイト制作の為の環境を整えていきます。
