Webデザイン、HTML、CSSを勉強するための準備をする・VS Codeの使い方など

この記事では、これからWebデザイン、プログラミングを勉強する方に向けて、HTML、CSSを勉強する環境を整える方法について解説します。コーディングってどんな感じなんだろう、何にコーディング書けばいいのかなと何がわからないかわからない状況の人もいるのではないでしょうか？

---

まずwebデザインに少し興味を持った方にお勧めしたいのが、ドットインストールの無料動画です。下記の動画で、簡単なコーディングをして、イメージを掴んでもらえたらいいと思います。

はじめてのWeb制作 (全11回) - プログラミングならドットインストール

プログラミング学習前チェックリスト macOS編

---

なんとなくイメージはつかめましたでしょうか？自分に向いてるかも、面白そう、やってみようと思った方は、次の動画を見て、実際にウェブ制作するための環境を整えていきましょう！

Web制作の準備をしよう macOS編 (全10回) - プログラミングならドットインストール

Web制作の準備をしよう Windows編 (全10回) - プログラミングならドットインストール

1. Google Chromeをダウンロード

2. Google Chromeを設定

3. VS Codeをダウンロード

4. VS Codeを日本語化

5. VS Codeの設定

   1. Auto Save afterDelay

   2. Tab Size 2

   3. Word Wrap on

   4. Emmet Variables 日本語 lang = ja

6. VS Codeの外観設定

   1. テーマの変更 Command K Command T

   2. Material Theme

   3. Material Icon

7. プログラミング用フォントをダウンロード

8. Ricty Diminishedを設定する

Web制作の準備をしよう セットアップガイド macOS編

---

さて、以上の動画をみるとウェブデザインやプログラミングに必要な基本的な設定が完了します。これから、下記で紹介する動画では、VS Codeを使用する上で、必要な知識や便利な情報が紹介されていますので、ぜひそちらも併せてみてみましょう。

Visual Studio Code入門 (全13回) - プログラミングならドットインストール

1. ダウンロード

2. 構成画面の説明

3. ファイルを作成・編集

4. Emmet記法を使う

5. CSS、JavaScriptを読み込む、画面分割

6. CSSの編集

7. JavaScriptの編集

8. 設定の変更

   1. Auto Save afterDelay

   2. Font Size 14

   3. Font Family Ricty Diminished

   4. Tab Size 2

   5. Render Whitespace All

   6. Word Wrap on

9. コマンドパレットを使う

   1. Color theme

   2. mini map

10. ショートカット

    1. Option ↕︎

    2. Option Shift ↕︎

    3. Command Enter/Return

    4. Command Shift Enter/Return

11. マルチカーソル

    1. Option Click

    2. Command D

    3. Command Shift L

    4. Command Option ↕︎

12. 検索と置換

    1. Command F 

    2. Command G / Command Shift G

    3. Option Command F

    4. Enter/Return

    5. Command Enter/Return

    6. Command Shift F

13. 拡張機能の導入

    1. 日本語化

    2. アンインストール

以上が基本的な使い方の解説でした。
参考にしていただけたら嬉しいです。

下記のYouTubeチャンネルで解説動画も出しているので、併せてみていただけると嬉しいです。

natsuki.design | Learn with me