webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

初心者さんの為のコーディングレッスン〜はじめてコーディング〜
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

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

コーディングエディタ

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

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

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


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

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

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)