コーディングの題材に関してはCodejumpさんのものを使用しました。
【HTML/CSS コーディング練習】中級編：ストアサイト（カフェ）／パララックス
出典：https://code-jump.com 制作：こぐまマミー
こんな悩みがある人にオススメの記事
・WEBデザイナーになろうか迷っている
・Visual Studio Codeについて知りたい
・HTMLとCSSを使ったコーディングの流れを見たい
Visual Studio CodeでWEBサイト制作
Visual Studio Code（以下VScode）を学べば、
誰でもWEBサイトが作れるようになりますよ！
WEBデザイナーってどんなことするのかな？と調べて、
デザインだけでなくプログラミングのコードを勉強する必要があるんだ！と知る。
そして・・・
何も知らないうちにWEBサイトのコーディングについて検索すると目眩がしますよね。
画面の背景が黒い！しかも英語めっちゃ書いてある怖い！でもなんかかっこいい！
敏腕プログラマーのブログはもはや暗号なので初心者はまだ見てはいけません。
少しずつ学ぶ姿勢でいきましょう！
この記事ではこれからWEBデザイナーを目指す方や、
VScodeを初めて使う方に向けて、
その魅力や制作の流れを書いていきます！
使ってみたいな！VScodeでWEBサイトを作ってみたいな！と思ってくださると嬉しいです。
VScodeとは簡単に！
Microsoftによって開発された無料のコードエディタ
軽量で高速
軽量で高速に動作するように設計されている。
大規模なプロジェクトでもスムーズに扱える。
多言語サポート
多くのプログラミング言語をネイティブでサポート。
拡張機能をインストールすることで、さらに多くの言語やツールに対応できる。
拡張機能
最大の魅力は、豊富な拡張機能。
エディタの機能を自由に拡張でき、多様なカスタマイズが可能。
（言語サポート、デバッグツール、テーマ、キーボードショートカットなど）
統合デバッグ
デバッグ機能（エラーや不具合を検出する）が強力。
ブレークポイントの設定、ステップ実行、変数の監視などが簡単に行える。
Git統合
Gitリポジトリとの統合が標準でサポートされている。
エディタ内から直接、コードのバージョン管理を行うことができる。
リモート開発
リモート開発をサポート。
SSH、コンテナ、WSL（Windows Subsystem for Linux）などを使用して、
リモートの環境で開発することが可能。
カスタマイズ性
テーマやアイコン、キーボードショートカットなどのカスタマイズが可能。
自分の好みや開発スタイルに最適な環境を構築できる。
基本無料！
拡張機能があり、カスタマイズができる！
チームで共有しながら開発ができる！
正直Gitは初心者にはよく分からない。でも拡張機能が便利すぎるんです
制作の流れ
HTMLマークアップ
左側がプレビュー、右側がコードを書いているVScode。
タグを理解し、文字情報を記述
HTML（HyperText Markup Language）
ウェブページを作成するための標準的なマークアップ言語。
基本的なタグ（要素）を使用して構造を定義していく。
分かりやすくいうと、
PCと人間が使う言葉が違うので、変換して指示を出す作業ですね。
デザインカンプ（完成形）は予め用意しておくことが前提です。
タグと呼ばれる記号を記述することで、
ウェブブラウザによって解釈され、ユーザーに視覚的に表示されます。
タグの種類は沢山あります。以下は一例。
<head> 画面には出てこない情報を書くところ。読み込むデータ、タイトル、ファイルなど。
<title> ブラウザのタイトルバーやタブに表示されるタイトル。
<body> メインの訴求要素が含まれる重要なセクション。
＜footer> ページの下部。サイトマップがある場所。
<h1> 大きな見出し。
<p> タイトルよりも小さい文字。説明文に使われる。
<a> アンカーリンク。リンク先を指定する。
タグは開始タグと終了タグで挟んで書いていきます。
<head></head>
このように対になっていないとエラーになり、ブラウザが読み込めません。
文字情報をミスなく記述できたか、ブラウザで表示を確認します。
CSSで装飾するために、クラス分け
HTMLでは文字のサイズや配置などの装飾をしないので、
ただ文字情報が羅列した形になっています。
まとまりごとにHTMLをクラス分けして、
クラスに名前を追加していきます。
<footer id=”footer” class=”footer_wrapper”>
<p>説明文</p>
</footer>
class=” ” で追加した部分です。
君たちはfooterの中のfooter_wrapperというclassだよ、という感じ。
このclassに向けて、
後に作成するCSSファイルで画像を入れたり、サイズや装飾をする指示を書いていきます。
同じclassの名前を持つ仲間には、全部同じスタイルが装飾されます。
id=” ” というのもあって、同じように装飾する際に使うものです。
idはclassよりも装飾の指示の優先順位が高く、
一つのWEBページに一つしか存在してはいけません。
classで指定した装飾よりも、idの方が優先されるということです。
一つのサイトにHTMLとCSSファイルがそれぞれ存在していて、
ハシゴしながらブラウザで表示を確認しつつ作業していきます。
コーディング大好きなんですけど、HTMLの作業はちょっと虚無な感じ。
CSSの方が楽しい！
CSSで装飾していく
左側がプレビュー、右側がCSSのコード画面（VScode）です。
CSS（Cascading Style Sheets）は、
HTMLなどのマークアップ言語で書かれた文書の
見た目やレイアウトを指定するための言語。
文字サイズや配置、ホバーした時の動きなどを整えていきます。
HTMLと同じでタグは開始タグと終了タグで囲んで記述していきます。
よく使うタグの一例と意味は以下です。
color テキストの色
background-color 要素の背景色
font-size テキストのフォントサイズ
margin 要素の外側の余白
width 要素の幅
height 要素の高さ
text-align テキストの整列方法
先ほどHTMLでclass分けして名前をつけましたね。
そのclassを利用して、以下のようなスタイルで記述していきます。
.class名 {
font-size: 16px; /* フォントサイズは16ピクセル */
color: #fff; /* テキストの色は白 */
text-align: center; /* 中央揃え */
}
classごとに、
”君たちは16ピクセルで白色、
画面の中央に並びなさい。”
のような指示を出していきます。
CSS、面白いですよね！
HTMLだけのときはただの文字の羅列だったものが、
普段よく見る鮮やかなサイトに変化していきます。
VScode まとめ
Microsoftによって開発された無料のコードエディタ
初心者からプロフェッショナルまで使える
軽量、高速、多言語サポート、拡張性、カスタマイズ性などが魅力
私はDreamweaverしか使ったことがなかったのですが、
問題なく制作できました。
むしろ拡張機能で追加した機能が便利すぎて驚きました！
非常に使いやすく初心者にもおすすめなエディターです。
