読み込み中...

HTMLの編集方法を基本から応用まで15選のコード例で解説

初心者がHTML編集を学ぶイメージ HTML
2024.04.20
この記事は約17分で読めます。

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

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

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

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

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

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

はじめに

Web開発において、HTMLはまさに基礎の基礎です。

これから、HTMLの基本的な概念から始めて、そのタグや機能について詳しく解説していきます。

初心者から中級者まで、さまざまなレベルの方々に役立つ情報をわかりやすく提供することを心がけています。

●HTMLの基本

HTMLは、HyperText Markup Languageの略で、ウェブページを作成するための標準マークアップ言語です。

HTMLを使用することで、テキスト内容を構造化し、ウェブブラウザが解釈しやすい形に整えることができます。

HTMLのコードは、タグと呼ばれる特定のキーワードによって構成されており、これらのタグを使って、テキストの見出し、段落、リンク、画像などを定義します。

○HTMLの概要

HTMLのドキュメントは基本的に、「<html>」タグで始まり、「</html>」タグで終わります。

このHTMLタグの中には、ヘッド部分（head）とボディ部分（body）が含まれます。

ヘッド部分では、ページのタイトルや、スタイルシート、メタデータなどを定義し、ボディ部分では実際のコンテンツを記述します。

これらの構造から、HTMLがいかにウェブページの骨組みを形成しているかがわかります。

○基本的なタグとその機能

では、基本的なタグと機能について、簡単におさらいしていきましょう。

□<title>タグ

このタグは、ウェブブラウザのタブに表示されるページのタイトルを定義します。

SEOの観点からも重要で、適切なタイトルを設定することで、検索結果のクリック率を向上させることが期待できます。

<title>ここにページのタイトルを入力</title>

□<a>タグ

「アンカー」タグとも呼ばれるこのタグは、リンクを作成する際に使用します。

href属性を指定することで、他のページやサイト、同じページ内の異なるセクションへのリンクを作ることができます。

<a href="https://www.example.com">Example.comへのリンク</a>

□<img>タグ

画像をウェブページに埋め込む際に使用するタグです。

src属性には画像のURLを指定し、alt属性には画像の説明文を入れます。

これにより、画像が表示されない場合やスクリーンリーダーを使用している場合でも、何の画像かがわかります。

<img src="image.jpg" alt="説明文">

●HTMLの編集方法

HTMLの編集には、テキストエディタから高度なIDEまで多岐にわたるツールが利用可能ですが、基本的なHTMLの編集技術はすべての開発者にとって重要です。

ここでは、HTMLドキュメント内で最もよく行われる編集操作をいくつか紹介し、具体的なコード例を用いて説明します。

○サンプルコード1：テキストの追加と変更

HTMLドキュメントに新しいテキストを追加する最も基本的な方法は、既存のHTMLタグ内にテキストを挿入することです。

たとえば、段落を追加したい場合は<p>タグを使用します。

<!-- 既存の段落に新しい内容を追加 -->
<p>これは既存のテキストです。</p>
<p>ここに新しいテキストを追加します。</p>

この例では、二つの段落があり、一つ目の段落には既存のテキスト、二つ目の段落には新しいテキストが追加されています。

○サンプルコード2：画像の挿入と属性の設定

ウェブページに画像を挿入する場合は<img>タグを使用し、src属性で画像の場所を指定します。

また、alt属性を使用して、画像が表示されない時の代替テキストを提供することが重要です。

<!-- 画像の挿入例 -->
<img src="example.jpg" alt="説明的なテキスト">

ここでのalt属性は、画像が読み込まれない場合や視覚障害を持つユーザーがスクリーンリーダーを使用している場合に役立ちます。

○サンプルコード3：リンクの作成と管理

ウェブページ間でのナビゲーションを提供する基本的な方法は、アンカータグ<a>を使用することです。

href属性には、リンク先のURLを指定します。

<!-- リンクの例 -->
<a href="https://www.example.com">訪れるサイト</a>

このコードは、ユーザーがクリックすると指定されたURLにリダイレクトされるリンクを作成します。

○サンプルコード4：リストの作成とスタイリング

HTMLでリストを作成するには、順序なしリスト<ul>と順序付きリスト<ol>の二つのタグが一般的に使用されます。

リストアイテムは<li>タグでマークアップします。

<!-- 順序なしリストの例 -->
<ul>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
  <li>リストアイテム3</li>
</ul>

<!-- 順序付きリストの例 -->
<ol>
  <li>最初のアイテム</li>
  <li>次のアイテム</li>
  <li>最後のアイテム</li>
</ol>

このサンプルでは、通常のテキストリストに加えて、各リストアイテムを明確にするためにHTMLリストタグが使われています。

スタイリングによって、これらのリストはさらに視覚的に魅力的にすることができます。

●HTMLフォームの編集

HTMLフォームはウェブ上での情報収集のために不可欠な要素です。

適切なフォームを設計し、ユーザーが使いやすいようにカスタマイズすることが重要です。

ここでは、HTMLで基本的なフォームを作成し、その後、入力検証とカスタマイズを加える方法について詳しく解説します。

○サンプルコード5：基本的なフォームの作成

フォームの基本的な構造は<form>タグを用いて作成します。

この中に、入力フィールド、ラベル、送信ボタンなどが含まれます。

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  <button type="submit">送信</button>
</form>

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

○サンプルコード6：入力検証の追加

入力検証は、ユーザーがフォームに入力したデータが正しい形式であることを確認するために重要です。

HTML5では、様々なタイプの入力検証が簡単に実装できます。

<form action="/submit" method="post">
  <label for="age">年齢:</label>
  <input type="number" id="age" name="age" min="18" max="99" required>
  <button type="submit">送信</button>
</form>

ここでは、年齢を入力するフィールドがあり、ユーザーが18歳から99歳の間の値を入力する必要があります。

required属性によって、このフィールドの入力が必須であることも指定しています。

○サンプルコード7：フォームのカスタマイズ

フォームの見た目や挙動をカスタマイズすることで、ユーザーエクスペリエンスを向上させることができます。

CSSやJavaScriptを利用して、フォーム要素にスタイルを追加したり、動的な機能を実装することが可能です。

<style>
  form {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
  }
  label {
    margin: 10px 0;
  }
  input, button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
  }
</style>

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" placeholder="ここに名前を入力">
  <button type="submit">送信</button>
</form>

この例では、フォーム全体にパディングと背景色を設定し、入力フィールドとボタンには全幅のスタイルとパディングが適用されています。

さらに、名前入力フィールドにはプレースホルダーテキストが設定されています。

これにより、フォームがより視覚的に魅力的で、わかりやすくなります。

●CSSとの統合

ウェブデザインにおいて、CSSはHTMLの見た目を整えるために不可欠です。

ここでは、HTML要素にCSSを適用し、レスポンシブデザインとアニメーションを追加する方法について具体的に解説します。

○サンプルコード8：HTML要素のスタイリング

CSSを使用してHTML要素にスタイルを適用することは、ウェブページの外観を改善する基本的な方法です。

この例では、CSSを用いて段落とヘッダーのスタイルを定義しています。

<style>
  p {
    color: navy;
    font-size: 16px;
  }
  h1 {
    color: darkred;
    font-weight: bold;
  }
</style>

<h1>見出しのスタイル例</h1>
<p>こちらは段落のテキストです。</p>

このCSSでは、段落のテキストに紺色と16ピクセルのフォントサイズを適用し、見出しには濃い赤色と太字を設定しています。

○サンプルコード9：レスポンシブデザインの適用

レスポンシブデザインは、デバイスの画面サイズに応じてコンテンツが適切に表示されるようにする技術です。

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

<style>
  body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
  }
  @media (max-width: 600px) {
    body {
      background-color: #ddd;
    }
  }
</style>

<body>
  <p>画面サイズに応じて背景色が変わります。</p>
</body>

この例では、画面の幅が600ピクセル以下の場合に背景色をグレーに変更しています。

○サンプルコード10：アニメーションの追加

CSSアニメーションを使用すると、ウェブページに動的な要素を加えることができます。

この例では、ボックスが画面上で移動するアニメーションを作成しています。

<style>
  @keyframes move {
    from {left: 0;}
    to {left: 100px;}
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: move 2s infinite alternate;
  }
</style>

<div class="box"></div>

このCSSアニメーションはmoveという名前で定義され、ボックスが左から右に100ピクセル移動する動作を2秒間隔で繰り返しています。

alternateキーワードにより、アニメーションが往復するように設定されています。

●JavaScriptを使った動的編集

ウェブページをインタラクティブにするためには、JavaScriptが欠かせません。

ここでは、要素の動的追加、イベントハンドリング、そしてフォームの自動保存機能をJavaScriptを使って実装する方法について詳しく解説します。

○サンプルコード11：要素の動的追加

JavaScriptを使用して、ユーザーのアクションに応じて新しいHTML要素を動的に追加することができます。

この例では、ボタンをクリックすると新しい段落がページに追加されるデモを表しています。

<button onclick="addElement()">新しい段落を追加</button>
<div id="content"></div>

<script>
function addElement() {
  var newPara = document.createElement("p");
  newPara.textContent = "新しい段落が追加されました!";
  document.getElementById("content").appendChild(newPara);
}
</script>

このスクリプトでは、addElement関数が新しいp要素を作成し、そのテキスト内容を設定後、contentというIDを持つdiv要素に追加しています。

○サンプルコード12：イベントハンドラの設定

ウェブアプリケーションにおいてユーザーのインタラクションを管理するには、イベントハンドラが必要です。

このコードは、特定のイベントが発生した際に関数を呼び出しています。

<button id="myButton">クリックしてください</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  alert("ボタンがクリックされました!");
});
</script>

ここでは、addEventListenerメソッドを使用して、myButtonというIDを持つボタンにクリックイベントリスナーを追加し、クリックするとアラートが表示されるようにしています。

○サンプルコード13：フォームの自動保存機能

ユーザーがフォームに入力したデータを自動で保存し、ページを再訪したときにその情報を復元する機能をJavaScriptとlocalStorageを使用して実装する方法を見ていきます。

<label for="username">ユーザー名:</label>
<input type="text" id="username" oninput="saveInput()">

<script>
function saveInput() {
  var userName = document.getElementById("username").value;
  localStorage.setItem("username", userName);
}

window.onload = function() {
  if (localStorage.getItem("username")) {
    document.getElementById("username").value = localStorage.getItem("username");
  }
}
</script>

このスクリプトは、ユーザーが入力フィールドに何か入力するたびにsaveInput関数を呼び出し、その値をローカルストレージに保存します。

また、ページがロードされた際にローカルストレージから値を取得し、入力フィールドに設定しています。

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

Web開発中にエラーが発生するのは珍しいことではありません。

HTMLやCSSを使用しているときによく遭遇するエラーには、タグが閉じていない、CSSセレクタが機能していない、画像が表示されない、JavaScriptが実行されないなどがあります。

これらのエラーを特定し、適切に対処することで、開発プロセスをスムーズに進行させることができます。

開発者ツールを利用すると、エラーの原因を迅速に特定しやすくなりますし、ソースコードの見直しによって簡単に解決できる問題も多くあります。

○エラー例とその解決策

HTMLのタグが正しく閉じられていない場合、ブラウザはページを正常にレンダリングできなくなることがあります。

このような場合、コードエディタのシンタックスハイライト機能を使用して未閉じのタグを見つけ出し、適切に閉じることが重要です。

また、CSSセレクタが正しく機能していない問題は、しばしばタイプミスやセレクタの指定ミスに起因します。

この場合は、セレクタと対象のHTML要素が正しくマッチしているかを確認し、必要に応じて修正します。

画像が表示されない場合は、画像のパスが正しいかどうか、ファイルがサーバーに存在するかどうかを確認することが解決策となります。

JavaScriptが実行されない場合は、スクリプトの読み込みが完了しているかどうか、コンソールにエラーが表示されていないかを確認し、エラーメッセージに基づいてコードを修正することが求められます。

○デバッグのヒント

効果的なデバッグのためには、問題が発生しているコードを特定し、一つずつ要素を確認していくことが有効です。

Webブラウザの開発者ツールを使用することで、HTML構造やCSSプロパティ、JavaScriptのエラーをリアルタイムで確認することができます。

特にJavaScriptのデバッグでは、console.log()を活用して変数の値を出力することで、コードのどの部分に問題があるのかを視覚的に追跡することが可能です。

また、問題のあるコードにブレークポイントを設定してステップ実行することで、コードの挙動を詳細に調査し、問題の根本原因を突き止めることができます。

●HTML編集の応用例

HTMLを用いたウェブページ編集にはさまざまな応用例がありますが、特にインタラクティブな要素の追加や外部APIとの連携は、現代のウェブ開発において非常に重要です。

これらの技術を駆使することで、ユーザーエンゲージメントを向上させ、よりダイナミックな体験を実装することが可能になります。

○サンプルコード14：インタラクティブなウェブページの作成

インタラクティブなウェブページを作成する一つの方法は、JavaScriptやCSSアニメーションを利用したユーザーインタラクションの強化です。

この例では、ユーザーがボタンをクリックすることで動的にコンテンツが変化するシンプルなインタラクションを実装しています。

HTML部分↓

<button id="changeContent">内容を変更する</button>
<div id="interactiveContent">ここにインタラクティブな内容が表示されます。</div>

JavaScript部分↓

document.getElementById('changeContent').addEventListener('click', function() {
    document.getElementById('interactiveContent').innerHTML = '内容が更新されました！';
});

このコードは、ボタンがクリックされた際にdiv要素の内容を「内容が更新されました！」に変更します。

これにより、ページをリロードすることなく、ユーザーのアクションに応じてコンテンツが更新されるようになります。

○サンプルコード15：APIとの連携

ウェブアプリケーションが外部のデータを取り入れる場合、外部APIとの連携が必要です。

このJavaScriptコードは、公開APIからデータを取得し、ウェブページに表示しています。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        document.getElementById('apiData').innerHTML = '取得したデータ: ' + data.value;
    })
    .catch(error => console.error('データの取得中にエラーが発生しました', error));

HTML部分↓

<div id="apiData">ここにAPIから取得したデータが表示されます。</div>

このスクリプトは、指定されたURLからデータを非同期に取得し、成功した場合はそのデータをウェブページに表示します。

fetch APIを用いることで、サーバーとの間でデータをやり取りする際のコーデ

まとめ

この記事では、HTMLの基本から応用まで、さまざまな編集技術とその実装方法を解説しました。

具体的なサンプルコードを通じて、テキストの追加や改変、画像の挿入、リンクの管理などの基本操作から、インタラクティブなウェブページの作成やAPIとの連携に至るまで、Web開発の幅広いスキルを紹介しました。

これらの知識を活用して、より効果的でユーザーに優しいウェブサイトを構築することが可能です。