読み込み中...

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

初心者向けHTML解説、HTMLの基本構造、HTMLタグの使い方、HTMLの応用例 HTML
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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をカスタマイズする方法も紹介します。

●注意点

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

●対処法

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

●カスタマイズ方法

  1. CSSを使って、HTML要素の見た目をカスタマイズできます。
    フォントサイズや色、余白などのスタイルを自由に設定できます。
  2. JavaScriptを使って、HTML要素に対して動的な機能を追加できます。
    例えば、ボタンをクリックしたときに特定の要素を表示したり、非表示にしたりすることができます。

まとめ

この記事では、HTMLの基本構造や要素、属性について詳しく解説しました。

さらに、HTMLの作り方や使い方、注意点、カスタマイズ方法についても紹介しました。

具体的なサンプルコードを通じて、HTMLの実践的な応用例も学びました。

HTMLはウェブページ作成の基本であり、CSSやJavaScriptと組み合わせることで、さらに魅力的なウェブページを作成できます。

この記事を参考にして、自分だけのウェブページを作成してみてください。