HTML for初心者必見! 7つのステップで完全解説

はじめに

HTMLを学び始めたばかりの初心者の方に向けて、この記事ではHTMLの基本から応用までを徹底解説します。

この記事を読めば、HTMLを使って独自のウェブページを作成することができるようになります。

サンプルコードも用意しているので、ぜひ参考にしてください。

HTMLの基本構造

HTMLの基本構造は、下記のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    ここにコンテンツが入ります。
</body>
</html>

それぞれのタグについて、簡単に説明します。

○DOCTYPE宣言

DOCTYPE宣言は、文書のタイプを宣言するもので、HTML5では <!DOCTYPE html> と記述します。

これは、文書の最初に記述する必要があります。

○htmlタグ

<html> タグは、HTML文書全体を囲むタグです。

このタグの中に、<head> タグと <body> タグが入ります。

○headタグ

<head> タグは、HTML文書のメタデータ（情報）を含むタグです。

<title> タグや、CSSやJavaScriptのリンクなどがここに入ります。

○titleタグ

<title> タグは、ウェブページのタイトルを指定するタグです。

ブラウザのタブに表示されるタイトルを設定できます。

○bodyタグ

<body> タグは、HTML文書のコンテンツ部分を囲むタグです。

ここにテキスト、画像、リンクなどの要素が入ります。

HTMLタグの使い方

HTMLでは、さまざまなタグを使ってコンテンツを整形します。

ここでは、よく使われるタグをいくつか紹介します。

○見出しタグ

見出しを表現するためのタグです。

<h1> から <h6> までの6段階の見出しがあります。

<h1> が最も大きく、<h6> が最も小さい見出しとなります。

○段落タグ

段落を表現するためのタグです。

<p> タグで囲むことで、段落として扱われます。

○リンクタグ

他のウェブページへのリンクを表現するためのタグです。

<a> タグで囲み、href 属性にリンク先のURLを指定します。

○画像タグ

画像を表示するためのタグです。

<img> タグを使い、src 属性に画像のURLを指定します。

○リストタグ

リストを表現するためのタグです。

順序付きリストは <ol> タグ、順序なしリストは <ul> タグで囲み、リスト項目は <li> タグで表現します。

サンプルコード

実際にHTMLを使ってウェブページを作成する例をいくつか紹介します。

サンプルコードを参考にして、実践的な理解を深めましょう。

○サンプルコード1：シンプルなHTMLページの作成

下記のコードは、シンプルなHTMLページを作成する例です。

<!DOCTYPE html>
<html>
<head>
    <title>シンプルなHTMLページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはシンプルなHTMLページです。</p>
</body>
</html>

○サンプルコード2：ナビゲーションメニューの作成

下記のコードは、ナビゲーションメニューを作成する例です。

<!DOCTYPE html>
<html>
<head>
    <title>ナビゲーションメニュー</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">サービス</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</body>
</html>

○サンプルコード3：画像ギャラリーの作成

下記のコードは、画像ギャラリーを作成する例です。

画像のURLは、適切なものに置き換えてください。

<!DOCTYPE html>
<html>
<head>
    <title>画像ギャラリー</title>
</head>
<body>
    <h1>画像ギャラリー</h1>
    <div>
        <img src="画像1のURL" alt="画像1の説明">
        <img src="画像2のURL" alt="画像2の説明">
        <img src="画像3のURL" alt="画像3の説明">
    </div>
</body>
</html>

○サンプルコード4：お問い合わせフォームの作成

下記のコードは、お問い合わせフォームを作成する例です。

<!DOCTYPE html>
<html>
<head>
    <title>お問い合わせフォーム</title>
</head>
<body>
    <h1>お問い合わせ</h1>
    <form>
        <label for="name">お名前：</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">メールアドレス：</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="message">お問い合わせ内容：</label>
        <textarea id="message" name="message"></textarea>
        <br>
        <input type="submit" value="送信">
    </form>
</body>
</html>

応用例とサンプルコード

ここでは、HTMLを使った応用的な例をいくつか紹介します。

これらの例を参考にして、HTMLの可能性をさらに広げましょう。

○サンプルコード5：アコーディオンメニューの作成

下記のコードは、アコーディオンメニューを作成する例です。

JavaScriptを使って動的に開閉するようにしています。

<!DOCTYPE html>
<html>
<head>
    <title>アコーディオンメニュー</title>
    <style>
        .accordion {
            cursor: pointer;
        }
        .panel {
            display: none;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var accordions = document.getElementsByClassName("accordion");

            for (var i = 0; i < accordions.length; i++) {
                accordions[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    panel.style.display = (panel.style.display === "block") ? "none" : "block";
                });
            }
        });
    </script>
</head>
<body>
    <h2 class="accordion">セクション1</h2>
    <div class="panel">
        <p>セクション1の内容です。</p>
    </div>
    <h2 class="accordion">セクション2</h2>
    <div class="panel">
        <p>セクション2の内容です。</p>
    </div>
    <h2 class="accordion">セクション3</h2>
    <div class="panel">
        <p>セクション3の内容です。</p>
    </div>
</body>
</html>

○サンプルコード6：タブ切り替えの実装

下記のコードは、タブ切り替えを実装する例です。

JavaScriptを使って、タブをクリックすると内容が切り替わるようにしています。

<!DOCTYPE html>
<html>
<head>
    <title>タブ切り替え</title>
    <style>
        .tab {
            cursor: pointer;
        }
        .tabcontent {
            display: none;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var tabs = document.getElementsByClassName("tab");

            for (var i = 0; i < tabs.length; i++) {
                tabs[i].addEventListener("click", function() {
                    var tabcontents = document.getElementsByClassName("tabcontent");
                    for (var j = 0; j < tabcontents.length; j++) {
                        tabcontents[j].style.display = "none";
                    }
                    var target = document.getElementById(this.getAttribute("data-target"));
                    target.style.display = "block";
                });
            }
            tabs[0].click();
        });
    </script>
</head>
<body>
    <div>
        <button class="tab" data-target="tab1">タブ1</button>
        <button class="tab" data-target="tab2">タブ2</button>
        <button class="tab" data-target="tab3">タブ3</button>
    </div>
    <div id="tab1" class="tabcontent">
        <h2>タブ1の内容</h2>
        <p>ここにタブ1の内容を記述します。</p>
    </div>
    <div id="tab2" class="tabcontent">
        <h2>タブ2の内容</h2>
        <p>ここにタブ2の内容を記述します。</p>
    </div>
    <div id="tab3" class="tabcontent">
        <h2>タブ3の内容</h2>
        <p>ここにタブ3の内容を記述します。</p>
    </div>
</body>
</html>

注意点、対処法、カスタマイズ方法 HTMLを使ってウェブページを作成する際には、いくつかの注意点や対処法があります。

また、独自のデザインや機能を実現するために、HTMLをカスタマイズする方法も紹介します。

●注意点

HTML要素を正しく閉じることが重要です。
開始タグと終了タグのペアを常に確認してください。
HTML属性の値は、ダブルクォーテーションで囲むようにしましょう。
各ブラウザでは、HTMLの解釈や表示が異なる場合があります。
複数のブラウザで確認することが重要です。

●対処法

HTMLの文法や構造に問題がある場合は、W3CのHTMLバリデータを使ってチェックしましょう。
エラーや警告が表示された場合は、修正してください。
ブラウザ間の表示の違いを解決するために、CSSリセットやNormalize.cssを使用することが有効です。
これらのツールは、ブラウザごとのデフォルトのスタイルをリセットし、一貫した表示を提供します。