ゆっくりITカフェ

記事一覧に戻る

HTML初心者ガイド：基本から始めるWebページ作成

10分フロントエンド

「HTML初心者のための完全ガイド。基本的なタグの使い方から実践的なWebページ作成まで、コード例を交えて分かりやすく解説します。見出し、段落、リスト、リンクなどの基礎から始めて、実際に自己紹介ページを作成する手順まで網羅。」

HTML初心者ガイド：基本から始めるWebページ作成
#HTML

HTML（HyperText Markup Language）は、Webページを作成するための基本的なマークアップ言語です。この記事では、HTML未経験の方でも理解できるよう、基本から順番に解説していきます。

HTMLとは？

HTMLは、Webページの骨組みを作るための言語です。テキストに意味を持たせるためのタグ（マークアップ）を使って、コンピュータがその内容を理解できるようにします。

HTMLの役割

  • 構造を定義：見出し、段落、リストなどの文書構造
  • リンクを作成：他のページやサイトへのリンク
  • メディアを埋め込み：画像、動画、音声ファイルの表示
  • フォームを作成：ユーザーからの入力を受け取る仕組み

HTML文書の基本構造

すべてのHTML文書は以下の基本構造を持ちます：

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <h1>メインの見出し</h1>
    <p>段落のテキストがここに入ります。</p>
</body>
</html>

よく使うHTMLタグ

見出しタグ

見出しは<h1>から<h6>まで6つのレベルがあります。

html
<h1>最重要な見出し</h1>
<h2>セクションの見出し</h2>
<h3>サブセクションの見出し</h3>

段落とテキスト

html
<p>これは段落です。</p>
<strong>強調したいテキスト</strong>
<em>斜体のテキスト</em>
<br>改行タグ

リスト

順序なしリスト

html
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

順序付きリスト

html
<ol>
    <li>手順1</li>
    <li>手順2</li>
    <li>手順3</li>
</ol>

リンクと画像

html
<!-- リンク -->
<a href="https://example.com">リンクテキスト</a>

<!-- 画像 -->
<img src="画像のパス.jpg" alt="画像の説明">

初心者が覚えるべきポイント

1. タグの正しい書き方

  • 開始タグ：<tagname>
  • 終了タグ：</tagname>
  • 自己完結タグ：<img>, , <hr>など

2. 属性の使い方

html
<a href="リンク先URL" target="_blank">リンクテキスト</a>
<img src="画像パス" alt="代替テキスト" width="300">

3. 適切な入れ子構造

html
<!-- 正しい例 -->
<div>
    <p>段落の<strong>強調</strong>テキスト</p>
</div>

<!-- 間違った例 -->
<p>段落の<div>ブロック要素</div>テキスト</p>

実践：簡単なWebページを作ってみよう

以下は、学んだタグを使った簡単なWebページの例です：

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私の自己紹介ページ</title>
</head>
<body>
    <h1>山田太郎の自己紹介</h1>
    
    <h2>基本情報</h2>
    <p>こんにちは！私は<strong>山田太郎</strong>です。</p>
    <p>趣味はプログラミングと読書です。</p>
    
    <h2>好きなもの</h2>
    <ul>
        <li>コーヒー</li>
        <li>猫</li>
        <li>映画鑑賞</li>
    </ul>
    
    <h2>連絡先</h2>
    <p>メール：<a href="mailto:yamada@example.com">yamada@example.com</a></p>
</body>
</html>

次のステップ

HTMLの基本を理解したら、以下のステップで学習を進めることをおすすめします：

  1. CSS（スタイルシート）を学ぶ：ページの見た目を美しくする
  2. JavaScript：インタラクティブな機能を追加
  3. レスポンシブデザイン：スマートフォン対応
  4. セマンティックHTML：より意味のあるマークアップ

まとめ

HTMLは、Web開発の基礎となる重要な技術です。最初は覚えることが多く感じるかもしれませんが、基本的なタグを覚えて実際にコードを書いてみることで、必ず理解が深まります。

重要なポイント

  • HTML文書の基本構造を理解する
  • よく使うタグの書き方を覚える
  • 実際にコードを書いて練習する
  • ブラウザで結果を確認する習慣をつける HTMLをマスターして、自分だけのWebページを作成してみましょう！