htmlやcssの入門書でAtomテキストエディタを使用する方法

Pocket

htmlやcssの入門書を購入したから、Atomテキストエディタをつかってhtml・cssファイルの作成・編集をしていくぞ……あれっ?でも入門書にはAtomテキストエディタの使用方法が書いていないからわからない……ということはありませんか?

「スラスラわかるHTML&CSSのきほん」や「スラスラわかるCSSデザインのきほん」、「HTML5&CSS3レッスンブック」「作りながら学ぶHTML/CSSデザインの教科書」などのよい入門書があっても、Atomテキストエディタの使用方法が書いてないので使えない……と困っているあなた!  今日は、htmlやcssの入門書でAtomテキストエディタを使用する方法についてお伝えしますね。

入門書どおり 実習用フォルダ や 作業フォルダ を作成する

まずは入門書に記述されているとおり「実習用フォルダ」や「作業フォルダ」を作成して、必要な画像(jpgやpng)ファイルをコピーしてください。わたしが使っている「スラスラわかるHTML&CSSのきほん」だと、以下のようになっていると思います。

だいたい入門書では、「実習用サンプルデータ」や「サンプルファイル」をネットからダウンロードすることが多いと思います。そしてあなたのPCの「ドキュメント」フォルダ内にコピーして、「実習用フォルダ」「作業フォルダ」と呼ばれるフォルダを作成していることが多いと思います。

ちなみに私が紹介しているおすすめ入門書では、以下の記述場所で「実習用フォルダ」「作業フォルダ」を作成しています。

  • データを整理するためのフォルダを作成する(スラスラわかるHTML&CSSのきほん P32)
  • 実習用フォルダのコピー(スラスラわかるCSSデザインのきほん P vii)
  • 作業場所の準備(HTML5&CSS3レッスンブック P20)
  • HTMLファイルの作成と保存(作りながら学ぶHTML/CSSデザインの教科書 P11)

まずは上記の場所まで読み進み、「実習用フォルダ」「作業フォルダ」と呼ばれるフォルダを作成してください……できましたか?

Atomテキストエディタにプロジェクトフォルダを追加する

次に作成した「実習用フォルダ」「作業フォルダ」を、Atomテキストエディタへ登録します。登録は、Atomテキストエディタからhtml・cssファイルを作成・編集するために行います。そしてAtomテキストエディタではこのことを「プロジェクトフォルダを追加する」といいます。

Atomテキストエディタにプロジェクトフォルダを追加した状態

登録手順はこちらです→Atomテキストエディタでプロジェクトフォルダを登録する方法

プロジェクトフォルダって何?というあなたはコチラをどうぞ→Atomテキストエディタのプロジェクトフォルダってそもそも何?

まとめ

今日はhtmlやcssの入門書でAtomテキストエディタを使用する方法についてお伝えしました。このあとはhtml・cssファイルの作成、編集となります。こちらについてはまた後日、お伝えしますね。

Pocket