仕事の合間の息抜きに植物を育てています♡もっと詳しくみるはじめてコーディング1そもそもコーディングって何?2コーディングに必要なものnowコーディングに必要なものは、コーディングに使うエディタとデザインデータです。Codeを使うデザインデータこの後の流れコーディングエディタ前回の記事、1そもそもコーディングって何?では、コーディングとはどんなものかを見てきました。html・cssを使って組み立てていくのですが、コードを書く”道具”が必要です。htmlを書く、ということはhtmlファイルにコードを書いていくことになります。コーディング専用に作られたエディタソフトを使用するとスムーズです。CCのコンプリートプランを契約されている方は、Dreamweaverもオススメです。Code(VSCode)を紹介します。こちらからVSCodeをインストールしてください。(VSCode以外のエディタでも結構ですが、この記事ではVSCodeを使用していきます)次回の記事から早速コードを書いていきますね^^デザインデータコーディングするには、「デザイン」が必要です。デザインを文章や画像に分解し、それを組み立てていくのがコーディングですので、その為のデザインがいりますよね。デザインデータは、いろいろなソフトで作成されます。デザインをするソフトは、AdobeのPhotoshop・Illustrator・XDや、figma等があります。ここでは、Photoshopデザインを使用して、コーディングを練習していきます。Photoshopでのコーディングができればその他のツールにも応用ができると思います。CCでは、Photoshopが使えるフォトプランだと月額1078円から契約可能ですので、お試ししやすい金額かなと思います^^今回は、こちらの記事のデザイン(Photoshop)を使用して、コーディングの練習をしていこうと思います。Photoshopを契約していただいてから進めてください。コーディング練習用デザイン素材chiiweb.net/media/coding-simple/こちらの記事の「ダウンロードする」よりデザインをダウンロードしてください。この後の流れこの後の流れを説明します。ダウンロードしたデザインデータから、必要な画像を書き出す作業をします。画像を書き出した後、htmlを書きます。cssでレイアウトを整えます。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Δコメントは承認後に表示されます。コメント投稿後元記事のトップに戻ります。関連記事1そもそもコーディングって何?–はじめてコーディング–Aboutこのサイトは、これからWebデザイナーを志す方の為の、情報発信サイトです。【css】テキストを右から左に流すアニメーションProfileSearch\Instagramでもwebデザイン情報発信中/このサイトについてプライバシーポリシーサイトマップ©chiiweb.net。