ホーム > 30日チャレンジ > 【初心者向け】30日間でWebサイト作成チャレンジ｜2日目：HTMLの基本構造を理解する

【初心者向け】30日間でWebサイト作成チャレンジ｜2日目：HTMLの基本構造を理解する

投稿日：2026/04/12

最終更新日：2026/04/12

2日目ではHTMLの構造について学んでいきます。

HTMLはWebサイト開発において重要な言語であり、サイトの骨格を作っていく役割を持っています。

サイトの装飾を行うには、CSSという言語が必要になってきますのでそれは3日目で学習していく予定です。

今回はHTMLのコードを書いていきますが、比較的簡単なので気負いせずに取り組んでみてください。

では始めていきましょう。

今回の記事でわかること

コードをどこに書くのか
HTMLの構造についての理解

コードをどこに書くのか？

ではまずどこにコードを書いていったらいいのかをご説明いたします。

コードを書くにはコードエディタというものが必要です。

これはツールであり、人気なものとしてはVS Code(Visual Studio Code) と呼ばれるツールが絶大な人気を誇っています。

私自身もVS Codeを愛用しています。これしか使っていないです。

これを使うにはまずお使いのパソコンにVS Codeをダウンロードする必要があります。

こちらが公式のサイトのリンクです。
↓
VS Code ダウンロード

Windowsを使用している場合は「x 64」を選択すればダウンロードすることができます。

Macの場合はIntelが搭載されている場合はIntel chipを、
M1などが搭載されている場合はApple siliconを選択してダウンロードしましょう。

ダウンロードが済んで以下の画面を表示することができたら準備完了です。

私はテーマを変更しているので色が違います

詳しい使い方については以下の記事を参考にしてください。
↓

VS Codeの使い方を初心者向けに解説｜基本操作・設定・拡張機能

2026/03/20

VS Codeはプログラミングやアプリ開発をする上で多くのエンジニアが使用している人気のコードエディタです。今回はVS Codeを初めて使うという場合にどの部分でコードを書けばいいのかや、どんな設定をすればいいのかなど基本となる部分を解説していき...

HTMLファイルの作成の仕方

ではまずHTMLファイルを作成しましょう。

HTMLを書くにはHTMLファイルを作成する必要があります。

プログラミング言語はその言語に適したファイルでコードを書く必要があります

左上にあるファイルのマークのボタンを押しましょう。するとこんな画面になるはずです。

まずはフォルダを開く必要があります。

名前を「MySite」にしてデスクトップに保存しましょう。

それから開くと以下の画面になります。

左上にMYSITEと書かれていたら成功している証拠です。

では早速HTMLファイルを作っていきましょう。左上のファイルを追加するボタンを押してください

するとファイル名を決めることができるようになります。

名前はindex.htmlと記述するのが一般的です。

以下の画面になったらHTMLを書くことができます。

独学でプログラミング学習に時間がかかってしまっている方に朗報です！

プログラミングを理解するのにはどうしても時間がかかってしまうものです。

本を買うにしても結局わからなくなってしまう

AIに聞いても結局理解できずになんとなく作ってしまう

そんな時に心強いのがこちらのプログラミングスクールですカウンセリングが無料で受けることができます。

↓↓↓

HTMLの構造を理解しよう

では早速HTMlファイルを作成しましょう。

もしhtmlとHTMLファイル内に書いて候補が出たらhtml:5を選択してください。

候補が出なかった場合は以下のコードを記述してください。

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

これがHTMLの第一歩のコードです。

!DOCTYPE htmlではHTMLを書くという宣言を意味しています。

また<>で囲まれているところをタグと呼ばれています。

つまりheadが<>で囲まれていたらそれをheadタグと言います。

また headタグ内には。そのサイトに関する情報を書きます。

この中にCSSのリンク先を記述することでHTMLとCSSを繋げるということが可能となります。
またGoogle Analyticsというそのサイトにどれくらい集まっているかを確認したい場合は、このheadタグ内にコードを埋め込む必要があります。

これらは後の記事でご紹介いたします。

bodyタグ内にはそのサイトのコンテンツを書きます
つまりここに見える部分を書く必要があるのです。では早速書いてみましょう。サイトのタイトルにはh1タグと呼ばれるものが使われます。以下のコードを先ほどのコードのbodyタグに記述しましょう

                
<h1>こんにちは</h1>

全体のコードはこうなっているはずです。

                
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>こんにちは</h1>
</body>
</html>

次回このコードを動かして実際にどんな見た目になっているのかをみていきます。

まとめ

以上がHTMLの構造についてでした。

全部を理解する必要はありませんのでご安心くださいませ。

理解していただきたいのが以下のことです。

プログラミング言語にはその言語専用のファイルを作る必要がある
HTMLはタグで囲む必要がある

次回はHTMLにおいてのタグで囲むということに慣れることとCSSでデザインすることを学んでいきます。

どうしても独学でも厳しいという方にお勧めな書籍があります！

この一冊があればHTMLとCSSの基礎を簡単に学ぶことができます。

本を使って学ぶのもひとつの手です
↓
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］