HTML

【超初心者向け】そもそもHTMLとは？コピペしながらイメージを掴む

この記事では、「HTMLってそもそも何？」 という超基本から、実際にコードを書いて自分のWebページを作るところまで、初心者にもわかりやすく丁寧に解説します！

💡 コツはたった一つ。意味がわからなくても、まずは手を動かしてみること。

さあ、あなたも一緒にWebページ作成の第一歩を踏み出してみましょう！

HTMLってそもそも何？

HTML（エイチ・ティー・エム・エル）とは、Webページを作るための「骨組み」のようなものです。

たとえば、家を建てるときには、まず柱や壁を立てますよね。この家の骨組みにあたるのがHTMLです。そのあと、壁に色を塗ったり（これがCSS）、家電や家具を配置して便利にしたりする（これがJavaScript）ことで、家が完成します。

つまり、Webページという家を建てるための最初の作業がHTMLなんです！

 HTMLで何ができるの？

HTMLを使うと、次のようなことができます。

  • 見出しをつける（タイトルや大きな文字）
  • 文章を書く（段落やリスト）
  • リンクを作る（他のページやサイトへジャンプ）
  • 表やボタンを作る

実は、あなたが今読んでいるこのページも、裏ではHTMLで作られています！

 HTMLの基本の書き方

HTMLは「タグ」というものを使って書きます。タグは、「< >」で囲む記号です。

<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは、HTML！</h1>
    <p>これは初めて書いたHTMLの文章です。</p>
  </body>
</html>

📦 最初の基本タグ

  • <!DOCTYPE html>：このページはHTMLですよ、と教えるもの。
  • <html>〜</html>：ここからここまでがHTMLです！という意味。
  • <head>：ページの情報を書く場所（タイトルなど）。
  • <title>：ブラウザのタブに表示されるタイトル。
  • <body>：実際に画面に表示される内容を書く場所。
  • <h1>：大きな見出し。
  • <p>：文章（段落）を表すタグ。

ポイント: タグには「開くタグ」と「閉じるタグ」があります。閉じるときは/をつけます（例: </p>）。

実際に書いてみよう！

  1. VS Codeなどのエディタを開きます。
  2. 上のコードをコピペします。
  3. ファイル名を index.html として保存します。
  4. 保存したファイルをブラウザで開いてみよう！

index.htmlの開き方

📂 方法1：フォルダからダブルクリックで開く

  1. index.html を保存したフォルダを開きます。
  2. ファイルをダブルクリックします。
  3. 自動的にWebブラウザで開き、ページが表示されます！

💡 ポイント: デフォルトのブラウザで開きますが、右クリック → 「プログラムから開く」で別のブラウザを選ぶこともできます。

💻 方法2：VS Codeから直接開く

  1. VS Codeで index.html を開いた状態にします。
  2. 画面右クリック → 「Open with Default Browser」 を選択。
  3. または、Live Server プラグインを使えば、保存と同時に自動でブラウザに反映されます。

これで、自分が書いたHTMLが画面に表示されるのを確認できます！🎉

よくあるつまずきポイント

  • タグの閉じ忘れ → <p>だけ書いて</p>を忘れると表示が崩れます。
  • 半角/全角ミス → < >は必ず半角で！
  • ファイルの保存ミス → 拡張子は必ず「.html」にしましょう。

困ったときは、落ち着いてコードを見直せばOK！

📝 問題集（実践してみよう！）

ポイント: タグの意味がわからなくても大丈夫！とにかくコピペしてブラウザで表示してみましょう。

どこにコードを入れるの？

先ほどの基本のHTMLコードの中の<body>タグの間に書きましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは、HTML！</h1>
    <p>これは初めて書いたHTMLの文章です。</p>
  　<!-- ここにコードを追加！！！！！！！！！！！！！！ -->
  </body>
</html>

✅ 問題1：見出しと段落を作ってみよう！

<h1>はじめてのWebページ</h1>
<p>こんにちは！私はHTMLの勉強を始めたばかりです。</p>

✅ 問題2：リンクを作ろう！

<a href="https://www.google.com">Googleへ</a>

✅ 問題3：簡単なリストを作ろう！

<ul>
  <li>ピザ</li>
  <li>ラーメン</li>
  <li>アイスクリーム</li>
</ul>

✅ 完成例（答え合わせ）

<!DOCTYPE html>
<html>
<head>
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>はじめてのWebページ</h1>
  <p>こんにちは！私はHTMLの勉強を始めたばかりです。</p>
  <a href="https://www.google.com">Googleへ</a>
  <ul>
    <li>ピザ</li>
    <li>ラーメン</li>
    <li>アイスクリーム</li>
  </ul>
  <button>クリックしてね！</button>
</body>
</html>

🎯 まとめ

  • HTMLはWebページの「骨組み」を作るための言語
  • タグを使って構造を作る（開くタグと閉じるタグがある）
  • 意味がわからなくてもまずは手を動かしてみよう！

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。