「初めてのWebサイト制作、HTMLってどこから始めればいいの？」
こんな悩みを抱えているあなた。実は、HTMLを学ぶことは、Web制作への第一歩なのです。
HTMLは、Webサイトを構築する上で欠かせない言語。でも、初心者にとっては、タグの多さや文法の複雑さに戸惑ってしまうかもしれません。
そこでこの記事では、HTMLの基礎から応用まで、実践的な演習を交えながら、段階的に学んでいきます。
「Webサイトをカッコよくデザインしたい！」
「SEOに強いサイトを作りたい！」
「アクセシビリティに配慮した優しいサイトを作りたい！」
そんなあなたの目標に合わせて、HTMLの知識を深めていきましょう。
最新のWeb制作トレンドや、現場で使える技術もバッチリ押さえています。これを読めば、あなたも一流のWeb制作者に近づけるはずです。
本記事は、HTMLを一から学びたい初心者から、スキルアップを目指す中級者まで、幅広い方を対象としています。
以下のような方々に特におすすめです
本記事を読み進めることで、HTMLの基本的な文法や使い方から、レスポンシブデザイン、SEO、アクセシビリティなど、Web制作に必要な知識が身につきます。
さらに、実践的な演習問題に取り組むことで、HTMLを使ったWebサイト制作の流れを体感できるでしょう。
HTMLは、1990年代初頭に生まれました。当時は、シンプルな文書構造を表現するために使われていましたが、その後、バージョンアップを重ねながら、より高度な表現力を獲得してきました。
現在は、HTML5が主流となっています。HTML5では、マルチメディアコンテンツの埋め込みやセマンティックなタグが導入され、よりリッチで意味のあるWebサイト制作が可能になりました。
HTMLは、タグを使ってマークアップを行い、文書構造を表現します。すべてのHTMLファイルには、以下のような基本構造があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body></p>
<!-- ページのコンテンツ -->
<p></body>
</html>
HTMLには、様々なタグが用意されており、それぞれ異なる役割を果たします。代表的なタグをいくつか紹介しましょう。
<h1>〜<h6>: 見出しを表す
<p>: 段落を表す
<a>: リンクを表す
<img>: 画像を表す
<ul>、<ol>、<li>: リストを表す
<div>、<span>: 汎用的なコンテナを表す
例えば、以下のようなコードで、見出しと段落を表現できます。
<h1>これは最上位の見出しです</h1>
<p>これは段落です。ここにテキストを入力します。</p>
<p>属性の役割と設定方法
タグには、属性を設定することで、その動作を制御できます。例えば、 <a>タグのhref属性にURLを指定することで、リンク先を設定できます。
<a href="https://www.example.com">リンクテキスト</a> 同様に、<img>タグのsrc属性に画像のURLを指定することで、画像を表示できます。
<img src="image.jpg" alt="代替テキスト">
alt属性には、画像の説明を記載します。これは、画像が表示されない環境や、スクリーンリーダーを使用するユーザーのためのアクセシビリティ対策として重要です。
HTMLでは、コメントアウトを使って、コードの説明を記述したり、一時的にコードを無効化したりできます。コメントアウトは、<!--と-->で囲みます。
<!-- これはコメントアウトです。ブラウザには表示されません。 -->実践演習：簡単なHTMLページの作成 それでは、これまで学んだ知識を活用して、簡単なHTMLページを作成してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のウェブサイト</title>
</head>
<body>
</p>
<h1>ようこそ、私のウェブサイトへ！</h1>
<p>このサイトは、シンプルなHTMLページの例です。</p>
<ul>
<li><a href="#about">私について</a></li>
<li><a href="#services">提供サービス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
<h2 id="about">私について</h2>
<p>私は、ウェブ制作を愛するクリエイターです。</p>
<h2 id="services">提供サービス</h2>
<p>私は、以下のようなサービスを提供しています：</p>
<ul>
<li>ウェブデザイン</li>
<li>HTML/CSSコーディング</li>
<li>ウェブサイト最適化</li>
</ul>
<h2 id="contact">お問い合わせ</h2>
<p>お問い合わせは、<a href="mailto:info@example.com">こちら</a>からお願いします。</p>
<p></body>
</html>
初心者がHTMLを書く際によく陥る間違いを見ていきましょう。
現在、多くのユーザーがスマートフォンやタブレットを使ってウェブサイトを閲覧しています。そのため、あらゆるデバイスで最適な表示を提供するレスポンシブデザインは、ウェブサイト改善の重要な要素となっています。
レスポンシブデザインとは、ウェブサイトのレイアウトや要素を、閲覧するデバイスの画面サイズに応じて自動的に調整する手法です。これにより、スマートフォンやタブレット、PCなど、どのデバイスで見ても、快適に閲覧できるようになります。
レスポンシブデザインを実現するには、主にHTMLとCSSを使用します。HTMLでページの構造を定義し、CSSでレイアウトやスタイルを指定します。
レスポンシブデザインの中核となるのが、メディアクエリです。メディアクエリを使うことで、デバイスの画面サイズに応じて、異なるCSSを適用できます。
以下は、メディアクエリの基本的な構文です：
@media (max-width: 600px) {
/* 画面の幅が600px以下の場合に適用されるCSS /
}
この例では、画面の幅が600px以下の場合に、指定したCSSが適用されます。
メディアクエリを使って、デバイス別にレイアウトを調整してみましょう。
/ デフォルトのスタイル /
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 25%;
}
/ 画面の幅が600px以下の場合 /
@media (max-width: 600px) {
.item {
flex-basis: 50%;
}
}
/ 画面の幅が400px以下の場合 */
@media (max-width: 400px) {
.item {
flex-basis: 100%;
}
}
この例では、デフォルトでは4つのアイテムが横並びになっています。画面の幅が600px以下になると2つ並びに、400px以下になると1つ並びになるように調整しています。
img {
max-width: 100%;
height: auto;
}
この設定により、画像の幅は親要素の幅に合わせて自動的に調整され、アスペクト比は維持されます。
レスポンシブデザインを実現するためのレイアウトテクニックはいくつかありますが、ここでは代表的な2つを紹介します。
これらのレイアウトテクニックを使いこなすことで、柔軟でメンテナンス性の高いレスポンシブデザインを実現できます。
それでは、これまで学んだ知識を活かして、レスポンシブデザインを実装してみましょう。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブデザインの例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>レスポンシブデザインの例</h1>
</header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<main>
<article>
<h2>レスポンシブデザインについて</h2>
<p>レスポンシブデザインは、今や必須の手法です。</p>
<img src="responsive.jpg" alt="レスポンシブデザインの例">
</article>
</main>
<footer>
<p>© 2024 例示株式会社</p>
</footer>
</div>
</body>
</html>
CSS:
/* デフォルトのスタイル */
.container {
display: flex;
flex-direction: column;
}</p>
<p>nav ul {
display: flex;
list-style: none;
}</p>
<p>nav ul li {
margin-right: 1rem;
}</p>
<p>main {
flex-grow: 1;
}</p>
<p>img {
max-width: 100%;
height: auto;
}</p>
<p>/* 画面の幅が600px以下の場合 */
@media (max-width: 600px) {
nav ul {
flex-direction: column;
}</p>
<p>nav ul li {
margin-bottom: 0.5rem;
}
}
このコードでは、Flexboxを使ってヘッダー、ナビゲーション、メインコンテンツ、フッターを縦に並べています。画面の幅が600px以下になると、ナビゲーションのリンクが縦並びになるように調整しています。また、画像はmax-width: 100%;を設定して、画面サイズに合わせて伸縮するようにしています。
実際にこのコードを試して、レスポンシブデザインの効果を確認してみてください。
レスポンシブデザインを効果的に実装するためのベストプラクティスをいくつか紹介します。
最初にモバイル向けのデザインを作成し、画面サイズが大きくなるにつれて要素を追加していく
不要な要素を省略し、シンプルで読みやすいデザインを心がける
スマートフォンでは、指でタップして操作するため、リンクやボタンは十分な大きさを確保する
最低でも、タップターゲットは40×40px以上の大きさが推奨される
モバイルデバイスでは、小さすぎるフォントは読みづらい
最低でも、16px以上のフォントサイズを使用する
要素間の余白を適切に設定することで、レイアウトが見やすくなる
特に、モバイルデバイスでは、十分な余白が必要
画像ファイルのサイズを最適化し、ページの読み込み速度を向上させる
必要に応じて、画像の遅延読み込み（lazy loading）を検討する
これらのベストプラクティスを念頭に置きながら、レスポンシブデザインに取り組んでいきましょう。
SEO（検索エンジン最適化）とは、検索エンジンで自社のウェブサイトを上位に表示させるための手法です。SEOを適切に行うことで、以下のようなメリットがあります：
SEOを行う上で重要なのは、検索エンジンのアルゴリズムを理解し、それに合わせてウェブサイトを最適化することです。
SEOに効果的なHTMLの書き方の基本は、構造化とセマンティックなマークアップです。
構造化とは、見出しタグ（ <h1>〜<h6>）を適切に使用して、ページ内容の階層を明確にすることです。これにより、検索エンジンはページの内容を理解しやすくなります。
セマンティックなマークアップとは、内容に応じて適切なHTMLタグを使用することです。例えば、ナビゲーションには<nav> タグ、記事には<article> タグ、独立したセクションには<section> タグを使用します。
以下は、構造化とセマンティックなマークアップの例です
<body>
<header>
<h1> 会社名</h1>
<nav>
<ul>
<li> <a href="#"> ホーム</a> </li>
<li> <a href="#"> 会社概要</a> </li>
<li> <a href="#"> 製品情報</a> </li>
<li> <a href="#"> お問い合わせ</a> </li>
</ul>
</nav>
</header>
<main>
<article>
<h2> 新製品のお知らせ</h2>
<p> 新製品がリリースされました。</p>
<section>
<h3> 製品の特徴</h3>
<ul>
<li> 特徴1</li>
<li> 特徴2</li>
<li> 特徴3</li>
</ul>
</section>
</article>
</main>
<footer>
<p> © 2024 例示株式会社</p>
</footer>
</body>
このように、適切な構造化とセマンティックなマークアップを行うことで、SEOに positive な影響を与えることができます。
メタデータは、ウェブページの内容を説明するための情報です。適切にメタデータを設定することで、検索エンジンにページの内容を的確に伝えることができます。
主要なメタデータには、以下のようなものがあります
以下は、メタデータの設定例です
<head>
<title>会社名 | 新製品のお知らせ</title>
<meta name="description" content="新製品がリリースされました。製品の特徴や購入方法などをご紹介します。">
<meta property="og:title" content="会社名 | 新製品のお知らせ">
<meta property="og:description" content="新製品がリリースされました。製品の特徴や購入方法などをご紹介します。">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/new-product">
</head>
ページの内容を適切に表現したメタデータを設定することで、検索エンジン結果ページ（SERP）での表示を最適化できます。
ページの読み込み速度は、SEOとユーザーエクスペリエンスの両方に影響します。以下は、ページ速度を改善するためのテクニックです
これらのテクニックを適用することで、ページの読み込み速度を大幅に改善できます。
アクセシビリティとは、障がい者を含むすべてのユーザーが、ウェブサイトを支障なく利用できることを指します。アクセシビリティに配慮することは、法的義務であるだけでなく、ユーザーエクスペリエンスの向上にもつながります。
アクセシビリティを向上させるためのテクニックの一つが、WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）の活用です。WAI-ARIAは、HTMLタグに特定の属性を追加することで、支援技術（スクリーンリーダーなど）にページの構造や機能を伝える役割を果たします。
以下は、WAI-ARIAを使用した例です：
<nav>
<ul>
<li><a href="#" aria-current="page">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<p><button aria-label="メニューを開く" aria-expanded="false">
<svg>…</svg>
</button>
この例では、ナビゲーションの現在のページを示すためにaria-current属性を、ボタンの役割と状態を示すためにaria-labelとaria-expanded属性を使用しています。
ここでは、これまでに学んだSEOとアクセシビリティのテクニックを活用し、実際にHTMLを作成してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株式会社Example | 企業情報</title>
<meta name="description" content="株式会社Exampleは、革新的な製品とサービスを提供し、お客様のビジネスを支援します。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>株式会社Example</h1>
<nav aria-label="グローバルナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/" aria-current="page">企業情報</a></li>
<li><a href="/products/">製品情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>企業理念</h2>
<p>私たちは、お客様のパートナーとして、ビジネスの成長と成功を支援します。</p>
<section>
<h3>経営方針</h3>
<ul>
<li>顧客満足の追求</li>
<li>イノベーションの促進</li>
<li>社会的責任の遂行</li>
</ul>
</section>
</article>
</main>
<footer>
<p>© 2024 株式会社Example</p>
</footer>
<script src="script.js" defer></script>
</body>
</html>
このHTMLでは、以下のようなSEOとアクセシビリティへの配慮が施されています