2023年10月31日ここでは、デザインカンプからのコーディング作業を始める前に必要なアプリやプラグインのインストールなどを行っていきます。目次VSCodeをインストールするWebサイトを制作するために『VSCode』というコードを入力するテキストエディタをインストールしましょう。下記の公式サイトからインストールすることができます。【VSCode】https://code.visualstudio.com/VSCodeの拡張機能をインストールする続いて、VSCodeをより便利に扱うために拡張機能(プラグイン)をインストールしましょう。インストールするプラグインは以下のとおりです。Intellisense:ファイルのパスの補完をしてくれるようになるExtractionCssSelector:選択した範囲のHTMLからCSSのセレクターを抽出してくれる使用するフォルダの解説フォルダは下記からダウンロードできます。※『Clipy』はMac専用のアプリになります。コピー&ペーストの作業効率を上げる「Clipy」の使い方をダウンロード・インストールから実際の使用方法まで解説しています。※Windowsの方は『Clipy』の代用として、『Clibor』をお使いください。こんな人に向けての記事です。Cli...Emmetの使い方を学ぶEmmetは、コードを少ないタイピング数で書ける機能です。VSCodeには標準でこの機能がついています。50px;」を「pl50」と入力するだけで記述できたりする感じですね。Emmetの使い方に関しては、以下の記事がとても分かりやすいです。block;の15文字をdbの2文字で入力できるようになるのがEmmetです。1日中コーディングしているわたしにとってこの1回の差は大きく、100回入力したときには1,300文...最初から完全に覚えるのは難しいので、実際にコードを書いていくことで身につけましょう!便利なショートカットキーを学ぶショートカットキーはいろんなものがありますが、よく使用するものは以下のものになります。「ショートカットキーは最低限だけ覚えて、コーディングに慣れること」を優先して勉強すると、より効率的に学ぶことができます。サイト制作(コーディング)の流れを把握する本講座では、基本的には下記の流れでデザインカンプからのコーディングを進めていきます。コーディング作業の全体像どのようなデザインかを確認するタイトル、ディスクリプション、OGPの設定を行うWebフォントの読み込み、フォントの設定を行うデザイン内で使われている色をSassの変数で定義するデザインカンプを上から順にコーディングしていく→レスポンシブ化(スマホ・タブレット対応にすること)は各セクションごとに進めていくページが一通りコーディングできたら、imagesフォルダ内の画像を圧縮する制作したサイトをインターネット上にアップロードする完了コーディングで使用するデザインソフトの使い方を学ぶデザインソフト(Figma)をインストールする本講座ではデザインソフトの『Figma』というものを使って解説していきます。下記の公式サイトからインストールしましょう。