HTML

bracketsの使い方|bracketsでHTMLを書こう|起動からサンプル画面を動かしてみる

Bracketsのアイコン

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

 

悩みの耐えない女の子
悩みの耐えない女の子
Bracketsを使う準備は整ったけど、この後はどうすればいいの?自分で作っていく為の足がかりがほしい。フォルダとかファイルとか、どうやってつくったらいいの?

 

といった人に向けて記事を書いていきます。

 

Bracketsの作業フォルダを作る

まずは作業をしていくのに必要なフォルダを作成していきます。
どこに作ってもいいですが、ここでは分かりやすくデスクトップに作成していきましょう。

さっそく作業用フォルダをつくっていきます。
まずは、デスクトップの何もないところで右クリックして下さい。

デスクトップで右クリック

 

プルダウンメニューが出るので、新規フォルダをクリックします。

新規ファイルを作成

 

フォルダができあがります。

デスクトップにフォルダを作成

 

そのままリネームしましょう。フォルダ名は「portfolio」とします。
※好きな名前にして下さい。

フォルダをリネーム

 

Bracketsにフォルダを認識させる

続いて、Bracketsに、さっき作成したフォルダを認識させる作業です。
作業フォルダが複数になった時にも使用する項目ですので、覚えておいたほうが吉です。

 

デスクトップ左上のメニューから、「ファイル」をクリックします。

左上メニューからファイルを選択

 

ファイルを選択

 

 

プルダウンメニューが開くので、「フォルダーを開く…」をクリックします。

メニューからフォルダを開く

 

どのファイルを開くかの画面が出てくるので、デスクトップを選択します。

デスクトップを選択

 

 

続いて、「portfolio」フォルダを探してクリックします。
次に、右下の「開く」をクリックしてください。

フォルダを選択して開く

 

 

Brackets画面の左側に、「portfolio」と表示されていたら、認識成功です。

Bracketsにフォルダを認識させる

 

Bracketsがフォルダを認識した

Bracketsで作業するファイルを作る

続いて、コーディングしていく為のファイルを作成していきます。
頻繁におこなう作業なので覚えておきましょう。

 

Brackets画面の左枠、どこでもいいので右クリックします。

Bracketsにファイルを作成

 

 

プルダウンメニューが出てくるので、「新しいファイル」をクリックします。

新しいファイルを作成

 

 

 

「名称未設定」というものが出来上がるので、

そのままファイル名「index.html」と打ち込みます。

エンターを押して確定させてください。

index.htmlに変更

 

 

これで、htmlを記述する準備が整いました。真ん中に大きな白い枠があるので、

ここにコーディングします。

白い画面にコードを入力

 

まとめ

やっと環境が整いました。次回からは実際にコーディングをしていきます。
そんなに難しくないので(たぶん)スラスラと記述していって頂ければと思います。