読み込み中...

HTMLでホームページを作成する5つのステップとサンプルコード

初心者が簡単にHTMLでホームページを作成するイメージ HTML
2024.04.17
この記事は約20分で読めます。

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

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

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

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

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

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

はじめに

この記事はHTMLを用いたホームページ作成について、初心者から中級者までが段階を追って学べる内容で解説します。

HTMLはウェブページを構築するための基本的な言語であり、その理解はすべてのウェブ開発者にとって不可欠です。

今回は、HTMLの基礎からスタートし、実際にサンプルコードを使って具体的なページの作成方法を見ていきます。

●HTMLの基本

HTML（HyperText Markup Language）は、ウェブページを作成するために使用されるマークアップ言語です。

テキストに「タグ」と呼ばれる特定のマーカーを付けることで、文書の構造を定義し、ブラウザにページの表示方法を指示します。

HTMLは構造を提供するため、他の技術と組み合わせて使われることが一般的です。

例えば、CSS（Cascading Style Sheets）はスタイルを、JavaScriptは動的な機能を担当します。

○HTMLとは何か？

先ほども触れたように、HTMLはウェブページの骨組みを作るための言語です。

ウェブページ上で見るテキスト、画像、ビデオなどのコンテンツをブラウザがどのように処理し、表示するかを指示するのがHTMLの役割です。

HTMLは「タグ」と呼ばれる特殊なコードを使用してこれを実現します。

例えば、<p>タグは段落を表すために使われ、<img>タグは画像を表示するために使われます。

○HTMLの基本的な構造

HTMLの文書は、<html>タグで始まり、<html>タグで終わります。

この中には<head>と<body>が含まれています。

headは、ページのメタデータ（ページのタイトルやスタイルシートへのリンクなど）を含むために使用され、bodyは実際にブラウザで表示されるすべての内容（テキスト、画像、ビデオなど）を含みます。

基本的なHTMLの骨組みは下記のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>これは見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

このコード例では、<!DOCTYPE html>宣言が文書の開始を告げ、HTML5文書であることを表しています。

htmlタグはページ全体のコンテンツを囲みます。

headタグ内のtitleタグはページのタイトルを定義し、bodyタグ内の内容はブラウザに表示されます。

h1タグは主要な見出しを、pタグは段落テキストをマークアップします。

●ホームページのレイアウト設計

ウェブサイトの効果的なレイアウトは、訪問者の注意を引き、情報を効率的に伝えるための鍵です。

良いデザインの基本として、コンテンツは視覚的に整理され、利用者が求める情報に簡単にアクセスできるように配置されるべきです。

まず、主要な情報は画面の中央に目立つように設置し、補助情報は周辺に配置するのが一般的なアプローチです。

具体的には、ヘッダー、フッター、サイドバー、メインコンテンツエリアという構造を考えます。

ヘッダーにはロゴやナビゲーションメニューを配置し、ユーザーがサイト内をスムーズに移動できるようにします。

メインコンテンツエリアには記事、商品情報、サービス説明など、サイトの主要な情報を展開します。

フッターには連絡先情報、著作権情報、プライバシーポリシーのリンクなど、一般的にはサイトの法的または補足的情報を配置します。

○レイアウトの計画方法

ウェブページのレイアウトを計画する際には、まずサイトの目的を明確にし、ターゲットとするユーザー層が何を求めているのかを考慮する必要があります。

例えば、製品を紹介するサイトの場合、製品の画像や説明が主眼となり、購入へ導くコールトゥアクションが随所に配置されるべきです。

サンプルコードで具体例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    <style>
        header, footer {
            background-color: #f3f3f3;
            padding: 10px 20px;
            text-align: center;
        }
        nav {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
        }
        main {
            padding: 20px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <header>ここはヘッダーです。</header>
    <nav>ナビゲーションメニュー</nav>
    <main>
        <h1>メインコンテンツのタイトル</h1>
        <p>ここにメインコンテンツのテキストが入ります。</p>
    </main>
    <footer>ここはフッターです。</footer>
</body>
</html>

このHTMLでは、ページ全体の構成要素が明確に分けられており、それぞれのセクションに適切なスタイリングが施されています。

CSSを利用して各セクションの見た目を整え、利用者の利便性を高めています。

○レスポンシブデザインの基礎

レスポンシブデザインは、異なるデバイス（デスクトップ、タブレット、スマートフォンなど）でコンテンツが適切に表示されるように設計するアプローチです。

この設計手法により、幅広いユーザーに対して最適な閲覧体験を実装することが可能になります。

CSSのメディアクエリを使うことで、画面のサイズに応じてスタイルを動的に変更することができます。

例として、下記のCSSコードはデバイスの画面幅に基づいて異なるスタイルを適用します。

/* 基本スタイル */
body {
    font-family: Arial, sans-serif;
}

/* 画面幅が600px未満の場合 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 画面幅が600px以上1000px以下の場合 */
@media (min-width: 600px) and (max-width: 1000px) {
    body {
        background-color: lightgreen;
    }
}

この例では、小さい画面では背景をlightblueに、中サイズの画面ではlightgreenに設定しています。

これにより、ユーザーはどのデバイスを使用していても、視覚的に快適な体験を得ることができます。

●HTMLでホームページを作成する具体的なステップ

ウェブサイトの構築を成功させるためには、計画的かつ段階的に進めることが重要です。

HTMLを使用した基本的なホームページの作成プロセスは、理解しやすく、効率的に進めることができるステップに分けられます。

具体的には、HTMLファイルの作成から始め、基本的なHTML構造を設定し、ナビゲーションバー、コンテンツ、フッターの追加といった具体的な部分を順に形成していきます。

○サンプルコード1：基本的なHTML構造

最初に、HTML文書の骨組みを作成します。

これには、DOCTYPE宣言から始め、html要素、head、そしてbodyを含める必要があります。

下記のサンプルコードは、その基本的な構造を表しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>あなたのウェブサイトのタイトル</title>
</head>
<body>
    <h1>メインの見出し</h1>
    <p>ここに本文が入ります。</p>
</body>
</html>

このHTMLコードは、最もシンプルなウェブページの構造を形成しており、どんなウェブサイトにも適用可能な基礎となります。

○サンプルコード2：ナビゲーションバーを作成する

ユーザーがサイト内を簡単に移動できるように、ナビゲーションバーは非常に重要です。

下記のサンプルコードは、基本的なナビゲーションバーを追加する方法を示しています。

<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#services">サービス</a></li>
        <li><a href="#about">私たちについて</a></li>
        <li><a href="#contact">連絡先</a></li>
    </ul>
</nav>

このコードは、リンク付きのリストを使用してナビゲーションバーを作成しており、各リンクはページ内の異なるセクションに対応しています。

○サンプルコード3：コンテンツ要素を作成する

次に、主要なコンテンツを設計します。

下記のコードは、記事のタイトルと数段落のテキストを含む基本的なコンテンツ要素の例です。

<section>
    <h2>記事のタイトル</h2>
    <p>ここに最初の段落が入ります。</p>
    <p>ここに二番目の段落が入ります。</p>
</section>

この要素は、ウェブページの主要な情報をユーザーに提供するためのものです。

○サンプルコード4：フッターを追加する

ウェブページのフッターには、著作権情報、追加リンク、連絡先情報などを含めることが一般的です。

下記のコードは、シンプルなフッターの構造を表しています。

<footer>
    <p>&copy; 2024 あなたの会社名. All rights reserved.</p>
</footer>

このフッターは、サイトのプロフェッショナリズムを高め、訪問者に追加情報を表しています。

○サンプルコード5：CSSを使ってスタイルを適用する

HTML構造が完成したら、CSSを使用してスタイルを適用します。

CSSは、色、フォント、レイアウトなど、サイトの視覚的要素を制御するために使用されます。

下記のサンプルコードは、基本的なスタイリングを表しています。

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f4f4f4;
}

h1, h2 {
    color: #555;
}

nav ul {
    list-style: none;
    background-color: #333;
    text-align: center;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: white;
    padding: 5px 20px;
    display: inline-block;
}

section p {
    margin: 0 0 10px;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #222;
    color: white;
}

このCSSコードは、ページ全体のフォント、色、リストスタイルを定義し、ナビゲーションバー、セクション、フッターに特定のスタイルを適用しています。

これにより、ウェブサイトはより魅力的で一貫性のある外観になります。

●よくあるHTMLのエラーと対処法

HTMLを使用してウェブページを作成する際には、いくつかの一般的なエラーが発生することがあります。

これらのエラーは、ページの表示が意図した通りにならない原因となり、場合によってはサイトのアクセシビリティやSEOに悪影響を与える可能性があります。

ここでは、よくあるHTMLエラーとそれらを解決する方法について詳しく解説します。

○閉じタグを忘れる

HTML要素には開始タグと終了タグが必要ですが、しばしば終了タグを忘れがちです。

これは特に長いコードを書いているときや、多くのネストが存在する場合に起こります。

対処法として、開始タグを記述したら、すぐに終了タグも書く癖をつけることが重要です。

また、エディタの構文ハイライト機能を利用して、タグが正しく閉じられているかを視覚的に確認しましょう。

   <!-- 誤った例 -->
   <p>これは段落です。
   <!-- 正しい例 -->
   <p>これは段落です。</p>

○属性値の引用符を省略する

HTMLでは、属性値を引用符で囲むことが標準的なルールですが、時々引用符を省略してしまうことがあります。

対処法として、属性値は常にダブルクォーテーションまたはシングルクォーテーションで囲みましょう。

これにより、属性値にスペースが含まれていても正しく解釈されます。

   <!-- 誤った例 -->
   <img src=example.png alt=画像>
   <!-- 正しい例 -->
   <img src="example.png" alt="画像">

○小文字と大文字の混在

HTMLタグと属性は小文字で書くことが推奨されています。

しかし、大文字を混在させてしまうことがあります。

対処法として、コードの一貫性を保つため、また将来的なXHTMLの使用を考慮して、タグと属性はすべて小文字で記述しましょう。

   <!-- 誤った例 -->
   <DIV CLASS="menu">メニュー</DIV>
   <!-- 正しい例 -->
   <div class="menu">メニュー</div>

○非標準のHTMLタグの使用

時として独自のタグを作成してしまいがちですが、これらは標準に準拠していないため、ブラウザによっては正しく表示されないことがあります。

対処法として、常にHTML標準に準拠したタグを使用し、カスタムデータが必要な場合は data-* 属性を使用しましょう。

   <!-- 誤った例 -->
   <mytag>内容</mytag>
   <!-- 正しい例 -->
   <div data-custom="value">内容</div>

●HTMLの応用例

HTMLの応用例として、ここではより複雑なウェブページの機能を実現するためのいくつかのサンプルコードを紹介します。

これらの例は、基本的なHTMLの知識を活かして、よりインタラクティブかつ機能的なウェブサイトを構築する方法を表しています。

○サンプルコード6：画像ギャラリーを作成する

画像ギャラリーはウェブサイトでよく見られる要素で、訪問者に対して視覚的に魅力的なコンテンツを提供します。

下記のHTMLとCSSを用いて、シンプルな画像ギャラリーを作成する方法を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <style>
        .gallery img {
            width: 100px;
            margin: 10px;
            transition: transform 0.25s ease;
        }
        .gallery img:hover {
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="画像1">
        <img src="image2.jpg" alt="画像2">
        <img src="image3.jpg" alt="画像3">
    </div>
</body>
</html>

このコードでは、CSSの :hover 疑似クラスを使用して、マウスカーソルが画像の上にあるときに画像を拡大表示します。

これにより、ユーザーの注意を引きつけ、画像を強調表示することができます。

○サンプルコード7：フォームを使ったユーザー入力の受け取り

ウェブフォームは、ユーザーからの情報を収集する基本的な手段です。

下記のHTMLは、シンプルな連絡先フォームを作成する一例を表しています。

<!DOCTYPE html>
<html>
<body>
    <form action="/submit_form" method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="送信">
    </form>
</body>
</html>

このフォームでは、ユーザーが名前とメールアドレスを入力でき、送信ボタンをクリックするとデータがサーバーに送信されます。

method="post" 属性により、データはHTTP POSTリクエストを通じて送信されます。

○サンプルコード8：JavaScriptを使った動的な要素の追加

JavaScriptを使用すると、ページに動的な要素を追加し、ユーザーインタラクションに応じてコンテンツを更新することが可能になります。

下記の例では、ボタンをクリックするとテキストが変更されるシンプルなスクリプトを表しています。

<!DOCTYPE html>
<html>
<body>
    <p id="demo">JavaScriptを使ってこのテキストを変更しましょう。</p>
    <button onclick="changeText()">クリックしてね</button>

    <script>
        function changeText() {
            document.getElementById("demo").innerHTML = "こんにちは、世界！";
        }
    </script>
</body>
</html>

このスクリプトでは、onclick イベントハンドラがボタンに設定されており、ボタンがクリックされると changeText 関数が呼び出されます。

この関数は、innerHTML を使用してページ上のテキストを動的に変更します。

●エンジニアとしてのさらなる一歩

プロフェッショナルなエンジニアへとステップアップするためには、新しい技術の習得は避けて通れない道です。

特にWeb開発の領域では、技術の進化が速く、常に最新の知識を取り入れる必要があります。

HTML5の新機能の習得は、その一例です。

HTML5は、以前のHTML規格に比べて多くの新しい要素やAPIを提供し、よりリッチなウェブアプリケーションの構築を可能にします。

○HTML5の新機能

HTML5は、ウェブページのマークアップのための新しい要素だけでなく、グラフィックやマルチメディアの扱いを改善するためのものが含まれています。

例えば、<canvas> タグは、JavaScriptを使って直接グラフィックを描画できるように設計されており、ゲームや視覚効果が豊富なアプリケーションに適しています。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
</script> 

</body>
</html>

このコード例では、<canvas> エレメントを使用して、赤い長方形を描画しています。

これはグラフィックの基本的な描画に過ぎませんが、さらに複雑な2Dまたは3Dグラフィックも、追加のライブラリを用いずに実装可能です。

また、<video> と <audio> タグは、それぞれビデオやオーディオコンテンツをHTML内に直接組み込むことを可能にし、以前のバージョンでは外部プラグインが必要だったものをネイティブサポートします。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

このHTMLコードは、ブラウザで直接ビデオを再生するためのものです。

controls 属性を追加することで、ユーザーは再生、一時停止、スキップなどのコントロールを利用できます。

○SEO対策とHTMLの関係

ウェブ開発においてSEO（検索エンジン最適化）は非常に重要です。

HTMLのマークアップは、検索エンジンにウェブページの内容を適切に理解させるための鍵となります。

HTML5では、より意味的な要素が導入されており、それによってコンテンツの構造を明確にすることが可能です。

例えば、<article>, <section>, <nav>, <header>, <footer> といった要素は、ページの異なる部分を区別し、その意味を明確にします。

これにより、検索エンジンはページの構造をより良く理解し、関連する検索クエリに対して適切なページを実装することが可能になります。

また、<meta> タグの description 属性を適切に設定することで、検索結果に表示されるページの説明文を最適化できます。

これはクリック率を高めるために非常に重要です。

<head>
<meta name="description" content="こちらはHTML5を使ったウェブページ作成の基本を説明するページです。">
<title>HTML5入門</title>
</head>

この例では、ページの内容を簡潔に説明しており、検索エンジンにとってもユーザーにとっても有益な情報を提供しています。

SEOとHTMLの適切な組み合わせは、ウェブサイトの訪問者数を増やすために不可欠です。

まとめ

このガイドを通じて、HTMLの基本から応用まで、ウェブページの作成方法を段階的に解説しました。

HTMLの構造、CSSのスタイリング、JavaScriptによる動的処理といったウェブ開発の基本的な要素を学び、それぞれの要素がどのようにウェブサイトの形成に貢献するかを理解していただけたかと思います。

本記事で解説した知識を活用して、効果的なウェブサイトを自ら構築し、訪問者にとって魅力的かつ機能的なオンライン空間を実装することができます。