Bracketsの使い方

BracketsでWEBページを作る

授業ではコーディング用のエディタとしてBracketsをメインに使用します。

注意点
PCは他の生徒も使うため、間違って上書きしたり消してしまったりするトラブルがありました。
フォルダー名をつける時はかならず学籍番号か名前を入れておきましょう。


01 Braketsをスタートアップする

BraketsはWindowsのスタートボタン から「Brakets」を選んでスタートさせる


また、htmlファイル、cssファイルを右クリックして直接ファイルを開く方法もあります。

02 画面の構成

サイドバーに「getting Started」にはBraketsのチュートリアルにもなっています。
index.htmlをクリックしライブプレビューで確認してください。

03 作業フォルダーを選択

WEBページはフォルダーの中へ入れて作っていくので、最初に作成していくためのフォルダーを選びます。
※必ず自分のフォルダーであることを確認してください。

Gettein Started」をクリックしてこれから作業をするフォルダーを開きます。

作業するフォルダーを選んで「フォルダーの選択」をクリックします。

または「ファイル」から選んでください。

04 フォルダー選択の注意!

Bracketsを起動して下記のように自分のフォルダー以外のものが表示されていることがあります。
このフォルダーは消しても問題ありません。


消す場合は上のファイル名をクリックします。


フォルダー名の前についている「×」をクリックしてぜんぶ削除(Delete)してください。
そうすることによって他の人のデータを間違えることが少なくなります。

 

05 画面分割

画面分割をすると「html」と「css」のファイルを同時に開くことができます。
左右、上下と選べます。

06 文字サイズ

テキスト、コード編集画面の文字サイズは「Ctrl」+「 + 」か「Ctrl」+「 - 」で変更出来ます。

07 新規ページ作成

Braketsを起動後、
❶ファイル フォルダーを開く フォルダーの選択します。

❷ファイル 新規作成

❸画面下のバーにある「Text ▼」から「HTML」を選びます。

❹ファイル 保存 名前は「index.html
トップページは必ずindex.htmlとなります。

(3)のText→HTMLを選び忘れても、エクステンションにhtmlを入れれば問題ありません。

08 大切なこと

Braketsを使って作品を作っていくと