②コーディングに必要なもの–はじめてコーディング–

コーディングに必要なものは、コーディングに使うエディタとデザインデータです。

• コーディングエディタ
  • Visual Studio Codeを使う
• デザインデータ
• この後の流れ

コーディングエディタ

前回の記事、①そもそもコーディングって何？では、コーディングとはどんなものかを見てきました。

html・cssを使って組み立てていくのですが、コードを書く”道具”が必要です。

htmlを書く、ということはhtmlファイルにコードを書いていくことになります。

コーディング専用に作られたエディタソフトを使用するとスムーズです。

無料のコーディングエディタで人気なのは、Visual Studio Codeです。

Adobe CCのコンプリートプランを契約されている方は、Dreamweaverもオススメです。

Visual Studio Codeを使う

ここでは無料で使えるVisual Studio Code（VSCode）を紹介します。

こちらからVSCodeをインストールしてください。

（VSCode以外のエディタでも結構ですが、この記事ではVSCodeを使用していきます）

次回の記事から早速コードを書いていきますね＾＾

デザインデータ

コーディングするには、「デザイン」が必要です。

デザインを文章や画像に分解し、それを組み立てていくのがコーディングですので、その為のデザインがいりますよね。

デザインデータは、いろいろなソフトで作成されます。

デザインをするソフトは、AdobeのPhotoshop・Illustrator・XDや、figma等があります。

ここでは、Photoshopデザインを使用して、コーディングを練習していきます。

Photoshopでのコーディングができればその他のツールにも応用ができると思います。

Adobe CCでは、Photoshopが使えるフォトプランだと月額1078円から契約可能ですので、お試ししやすい金額かなと思います＾＾

今回は、こちらの記事のデザイン（Photoshop）を使用して、コーディングの練習をしていこうと思います。

Photoshopを契約していただいてから進めてください。

こちらの記事の「ダウンロードする」よりデザインをダウンロードしてください。

この後の流れ

この後の流れを説明します。

ダウンロードしたデザインデータから、必要な画像を書き出す作業をします。

画像を書き出した後、htmlを書きます。

そして、cssでレイアウトを整えます。

次回の記事では、画像書き出しに進みますので、お楽しみに