Lecture Notes

HTML/CSS Lesson 1

BracketsとChromeのインストール

Brackets http://brackets.io/

合わせてGoogle Chromeもインストールしておきます。

Google Chrome https://www.google.co.jp/chrome/browser/desktop/

 

デスクトップに作業用フォルダを作成する

Web制作では、ファイル名やフォルダ名に日本語の使用は厳禁です。ここでは「Lesson_01」と付けましょう。

Bracketsを起動する

アプリケーションフォルダにインストールしてBracketsを起動します。

ウィンドウ左上の「Getting Started」をクリックして表示される「フォルダーを開く」を選択します。

先ほど作成した作業用のフォルダを選択して、「開く」をクリックします。

ファイルメニューから「新規作成」を選択します。

すぐにファイルメニューから「保存」を選択します。

先ほど作成した作業用フォルダに「sample_01.html」とファイル名を拡張子も含めて入力して保存します。

では、早速コーディングをしてみましょう。下記のようにタイピングしてみてください。

1行目 <!DOCTYPE html>
2行目 <html>
3行目 <body>
4行目 <h1>Hellow World</h1>
5行目 </body>
6行目 </html>

入力できたら保存(command+S)しておきます。

入力できたら、ウィンドウ右上にある「ライブプレビュー」ボタンをクリックしてみましょう。

Chromeのウィンドウでプレビューが表示されます。

Pocket
LINEで送る

Return Top