Web制作初心者が最初に学ぶこと｜基礎から分かりやすく解説

2025.09.18

SEO

今回の記事では、私が「Web制作を始めたい」と思ったときに実際に手を動かして学んだ内容を、初心者でもわかりやすいようにまとめました。

はじめに

こんにちは、Aoshiです。
普段は大学でデータサイエンスを学びながら、趣味でWeb制作やプログラミングを勉強しています。
今回の記事では、私が「Web制作を始めたい」と思ったときに実際に手を動かして学んだ内容を、初心者でもわかりやすいようにまとめました。

最初はHTMLやCSSがまったくわからず、どこから学べばいいのか迷っていましたが、少しずつコードを書いていくうちに「自分でもWebページが作れる！」という楽しさを実感できるようになりました。

この記事が、これからWeb制作を始めたい人の“最初の一歩”を踏み出すきっかけになれば嬉しいです。

Web制作初心者が最初に学ぶべきこととは？

最初に押さえるべきなのは、たった2つの言語です。

・HTML：ページの骨組みを作るもの

・CSS：その見た目を整えるもの

よく「家づくり」に例えられます。
HTMLが建物の構造だとしたら、CSSは壁紙や家具などの内装です。

この2つを組み合わせることで、初めて「デザインされたWebページ」が完成します。

今回はまず、最初に作らないといけない、HTMLについて解説しようと思います。

学習の最初のステップ（環境構築編）

1. エディタを準備する

おすすめは Visual Studio Code（VS Code）。
無料で使え、補完機能や拡張機能が豊富です。
→ [Download Visual Studio Code – Mac, Linux, Windows]

VS Codeをインストールして初めて起動すると、左上に「Welcome（ウェルカム）」というタブが開いています。まずは画面上部の ×ボタンでこのタブを閉じておきましょう。

2.フォルダを作成する（超重要）

Web制作ではまず「作業フォルダ」を用意します。
ここでは例として profile という名前で作成してみましょう。

エクスプローラーで、デスクトップなど好きな場所に profile というフォルダを新規作成します。そのフォルダを VS Code のアイコン上にドラッグ＆ドロップして開きます。
これでVS Codeの左側「エクスプローラー」に profile フォルダが表示されます。

フォルダ名の右横にある「新しいファイル」アイコン（＋マーク付きの紙のボタン）をクリックして、新しいファイルを作成します。

ファイル名は index.html にしましょう。
ファイル名は半角英数字のみを使い、日本語やスペースは避けてください（トラブルのもとになります）。

右側に index.html のタブが開き、ここでコードを編集できる状態になります。

3.拡張機能を入れる

左側の□が4つ並んだアイコンから必要な拡張機能を入れます。

Live Server
コードを保存すると自動でブラウザが更新され、リアルタイムに確認しながら編集できます。

Japanese Language Pack for VS Code
VS Codeのメニューや設定画面を日本語化してくれる拡張機能。英語に抵抗がある場合はこれを入れておくと操作がわかりやすくなります。

まずはこの2つを入れておけば、初心者でも快適に作業を始められます。

他にも便利な拡張機能がありますが、調べるとたくさん出てくるので、ここでは省きます。

まずはHTMLから始めよう

HTMLはタグで構造を作ります。
まずは 基本のひな形 を作ってみましょう。

！を押してエンターを押すとこのような画面が出てきます

詳細解説

1. 基本的に書くのは <body> の中身

・<head> には「ページの情報（文字コードやタイトル、CSSなど）」を書きます。

・<body> には「実際にブラウザに表示される内容」を書きます。
初心者は基本的にはここだけ触ればOK。

ただ、titleの中身は変えた方がいいです。今回はprofileにしておきましょう。

上から２行目のenもjaにしておきましょう。

1. 見出しを書いてみよう

まずは <body> の中にページのタイトルとなる見出しを入れます。

<h1> は「ヘッディング1（Heading 1）」の略で、ページ内で最も大きく表示される見出しタグです。
</h1> で閉じて、ここまでが見出しだとブラウザに伝えます。
このタグに書いた文字（ここでは「私のプロフィール」）が、ページの大きなタイトルとして表示されます。

💡補足：ページの構成によってはメインタイトル以外に小さな見出しを使うことがあります。
その場合は <h2>（サブタイトル）や <h3>（さらに小さい見出し）などを使い、階層的に整理します。
サイズが小さくなるだけでなく、検索エンジンにも見出し構造が伝わるためSEO的にも有効です。

2. 画像を表示する

次に、プロフィール写真やアイコンを表示しましょう。

<img> は画像を表示するタグです。
画像の置き場所
1. まず「profile」フォルダの中にimgという名前の新しいフォルダを作ります。
2. その中に自分の写真（例：myphoto）を入れておきます。
src は画像ファイルへのパス（場所）を指定します。

入力するときは ./ と打つとVS Codeが候補を予測してくれるので、
出てきた img フォルダを選び、さらに写真ファイルを選択します。
これを相対パスと呼び、今編集しているindex.htmlから見た位置を指定する方法です。
alt は画像が表示できないときの代替テキストを指定します。

ここには写真を簡単に説明する文章を書きます（例：「自分の顔写真」など）。
altを入れることで、スクリーンリーダーの読み上げ機能や検索エンジンにも情報が伝わりやすくなります。

3. 自己紹介の文章を書く

続いて文章で簡単なプロフィールを書きます。

<p>こんにちは！Web制作を勉強中の○○です。<br>

趣味は映画鑑賞とカフェ巡りです。<br>

これからたくさんのサイトを作っていきたいです！</p>

は段落を表すタグで、テキストを書くための基本タグです。
- 文章をひとかたまりとして区切りたいときに使います。
- ブラウザは <p> と </p> の間の文章を1つの段落として自動的に余白をつけて表示します。
<br> は改行タグで、段落内でさらに行を分けたいときに使います。

4. リンクを作る

最後にTwitterなど外部ページへのリンクを追加します。

<a href=”https://twitter.com/” target=”_blank”>Twitterを見る</a>

<a> はリンク（アンカー）を作るタグです。
href に移動先のURLを指定します。
target=”_blank” を付けると、クリックしたときに新しいタブで開くようになります。
<a> と </a> の間の文字（ここでは「Twitterを見る」）が実際にクリックできるリンク文字として表示されます。

実際にGo Liveで見てみるとこんな感じです。

作業手順

1. フォルダを用意

デスクトップなどにprofileフォルダを作成。
その中にimgというフォルダを作成し、自分の写真を入れておく。
例：myphoto.jpg

2. ファイルを作成

index.html という名前のファイルを profile フォルダの中に作成する。
ファイル名は半角英数字を使用。スペースや日本語はトラブルのもとになるので避ける。

3. VS Codeで編集

index.htmlを開いて上記コードを貼り付ける。
<img>タグのsrcは相対パスで指定。
例：./img/myphoto.jpg → 「現在のHTMLから見てimgフォルダ内のmyphoto.jpgを表示する」という意味。
alt属性には写真の簡単な説明を入れる。
例：「自分の顔写真」。読み上げ機能や検索時のヒントになる。

4. 各タグの役割

<!DOCTYPE html>：HTML5で書くことを宣言する。
<html lang=”ja”>：ページ全体を囲むタグ。lang=”ja”は日本語ページの意味。
<head>：ページ情報をまとめる。今回は文字コード・表示設定・タイトルのみ。
<title>：ブラウザのタブに表示されるページ名。
<body>：実際に画面に表示する内容を書く。
<h1>：ページの大見出し。サブ見出しが必要な場合は<h2>や<h3>を使用。
<img>：画像を表示する。srcで場所、altで説明を設定。
<p>：文章を段落としてまとめる。<br>を使えば段落内で改行可能。
<a>：リンクを作る。hrefにURL、target=”_blank”で新しいタブで開く設定。

まとめ

環境構築：profileフォルダ → imgフォルダ → index.html
基本構造：<!DOCTYPE html> → <html> → <head> → <body>
必須タグ：見出し、画像、文章、リンク
CSSやデザインの知識がなくても、HTMLだけでプロフィールページを作成し、
画像表示やリンクなどWebページの基礎を体験できます。

最初はたくさんタグがあって自分も覚えるのが大変でしたが、最初は調べながらやっていくうちに勝手に身についていくので覚えようとしなくても問題ありません。まずはこつこつサイトの模写や、学習サイトから学んでいきましょう！

初心者におすすめの学習方法

学習サイトを活用する
- Progate（スライドで学べる）
- ドットインストール（短い動画で効率的）
- MDN Web Docs（信頼できる公式情報）
- Paizaラーニング（ゲーム感覚で学べる）
模写から始める
→ 既存サイトの「ヘッダー部分」や「自己紹介ページ」を真似して作る
オリジナル作品を作る
→ 名前、趣味、好きな写真を載せた「自己紹介ページ」など、簡単なものでOK