フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログ CHIIWEB BLOG

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

初心者さんの為のコーディングレッスン〜はじめてコーディング〜

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

はじめてコーディング

①そもそもコーディングって何?

②コーディングに必要なものnow

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

コーディングエディタ

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

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

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

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

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

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

Visual Studio Codeを使う

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

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

(VSCode以外のエディタでも結構ですが、この記事ではVSCodeを使用していきますプロフィールイラスト

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

デザインデータ

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

WEBサイトのデザイン

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

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

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

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

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

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

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

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

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

この後の流れ

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

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

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

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

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

コメントを残す

CAPTCHA


コメントは承認後に表示されます。

ドメインとサーバー、エックスサーバーで一括管理が便利♪

関連記事