⚙️

【初心者向け】Webサイトの仕組みと最初のHTMLを書いてみよう その1

に公開
CSS
HTML
プログラミング初心者
web開発
tech


こんにちは！
今日から 「ゼロから学ぶWeb制作」シリーズ を始めます。

このシリーズは、パソコンは触れるけどHTMLやCSSは全くの初心者 という方を対象にしています。
最終的には、自分のプロフィールページやシンプルなWebサイトを作れるようになることを目標にしています。

Web制作は、少しずつ手を動かしながら学ぶのが一番効率的です。
この記事では、Webサイトがどうやってできているのか、そして初めてのHTMLを書いてブラウザで表示するところまでを丁寧に解説します。

1. Webサイトは何でできているの？

私たちが普段見ているWebサイトは、大きく分けて次の2つの言語で作られています。

言語 役割 例
HTML ページの「骨組み」 見出し・段落・画像・リンクなどの内容
CSS ページの「デザイン」 文字の色や大きさ、背景色、配置など見た目

イメージしてみよう

  • HTML = 家の骨組み（どこに壁があって、部屋がどこにあるか）
  • CSS = 壁紙や家具、色のコーディネート

つまり、HTMLだけでもページは表示できますが、見た目はシンプルすぎます。
CSSを組み合わせることで、見た目がきれいなWebページになります。

2. 学習の準備

まずはHTMLを書いて動かすための環境を用意しましょう。

必要なもの

  1. ブラウザ
    → なにもこだわりがなければ Google Chrome をお勧めします。
    → 作ったWebページを確認するために使います。
  2. コードを書くアプリ（Visual Studio Code）
    → 無料で使えるプロ向けのエディタです。
    → 文字を色分けしてくれたり、保存もしやすいので便利です。
    → 後述では VScode

VScodeのインストール手順

ダウンロード

Visual Studio Code の公式ページにアクセスし、 「Download for Windows」ボタンをクリックします。

https://code.visualstudio.com/

インストーラの起動

ダウンロードが完了したら、ダウンロードした場所を開き、ファイルをダブルクリックしてインストーラを実行します。

ライセンスの同意

起動したら下記画像のようなものが表示されると思います。
使用許諾契約の内容を確認して、「同意する」を選択し、「次へ」をクリックします。

インストール先の選択

インストール先フォルダの選択画面が表示されたら、「次へ」をクリックします。

スタートメニューフォルダーの指定

スタートメニューフォルダの選択画面が表示されたら、「次へ」をクリックします。

追加タスクの設定

追加タスクの選択画面が表示されたら、「次へ」をクリックします。

インストールの確認

インストールの準備完了画面が表示されたら、「インストール」をクリックします。

インストールの終了

インストール完了画面が表示されたら、「完了」をクリックします。

これでVScodeがインストールされました。
Web制作への第一歩ですね。

VScodeの初期設定

次に初期設定をしていきましょう。
最初インストールした後ですと全体が英語で書いておりわかりづらい人もいると思います。
なのでVScodeの日本語化をしていきましょう。

日本語化

左端にある「Extension（拡張機能）」アイコンをクリックします。

拡張機能の検索ボックスに「japanese」と入力します。

検索結果に Japanese Language Pack for Visual Studio Code が表示されたら、「Install」をクリックします。

右下に再起動を促すメッセージが表示されたら、「Change Language and Restart」をクリックします。
VScodeが自動で再起動しますので、アプリが終了しても動揺せずに…

VSCode の再起動後に日本語のメニューが表示されれば、日本語化の完了です。

今回は学習の準備を進めました。
次は実際に HTMLを実際に書いてみる から始めたいと思います。

Discussion