HTML基礎：Webページの骨組みを理解しよう

2025/07/07
INTRODUCTION
0comments
59views
約6分で読めます

WordPressを学ぶ前に、Webサイトの基礎となるHTML、CSS、JavaScriptについて理解しましょう。

「HTMLって何？」「CSSでどんなことができるの？」「JavaScriptは難しそう…」と感じている方も大丈夫です。

このシリーズでは、実際にコードを書きながら、それぞれの役割と基本的な使い方を初心者にもわかりやすく解説しています。

WordPressでオリジナルのサイトを作るためには、これらの知識が欠かせません。一つずつ丁寧に学んでいきましょう。

HTMLとは何か？

Webページの「骨組み」としての役割

HTMLは「HyperText Markup Language」の略で、Webページの構造を作るための言語です。家を建てるときに最初に骨組みを作るように、WebページもHTMLで基本的な構造を作ります。

文章の見出しはどこか、段落はどこか、リストはどこかといった「意味」をHTMLで指定します。HTMLがなければ、ブラウザはただの文字の羅列をどう表示すればいいのか分からないのです。

重要なのは、HTMLは「見た目」ではなく「意味」を表現することです

例えば、文字を大きくしたいからといって <h1>を使うのは間違いです。

<h1> は「最も重要な見出し」という意味であり、文字サイズを大きくするためのタグではありません。

文字サイズはCSSで調整します。

HTMLを書く際は、常に「この要素はどういう意味なのか」を考えることが大切です。デザイン性は一切考えず、純粋に文書の構造と意味に集中しましょう。

HTML、CSS、JavaScript、メディアの関係性

WebページはHTML、CSS、JavaScript、メディア（画像や動画）の4つで構成されています。

HTML：構造（骨組み）を作る
CSS：見た目（デザイン）を整える
JavaScript：動きや機能を追加する
メディア：画像や動画などのコンテンツ

家の建築に例えると、HTMLが骨組み、CSSが内装・外装、JavaScriptが電気設備、メディアが家具や装飾品のような役割です。

それぞれが連携して、美しく機能的なWebページが完成します。

HTMLの基本構造

<!DOCTYPE html>の意味と重要性

HTMLファイルの最初には必ず <!DOCTYPE html> と書きます。

これは「このファイルはHTML5で書かれています」とブラウザに伝える宣言です。

重要な注意点：必ずファイルの1行目に記述する必要があります

空行や他の文字が前にあると、ブラウザが正しく解釈できません。

HTMLにもバージョンがあり、時代とともに進化してきました。

現在主流なのはHTML5です。

それ以前のバージョン（HTML4、XHTMLなど）では、もっと複雑な DOCTYPE宣言が必要でした。

例えば、HTML4.01では以下のような長い宣言が必要でした。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5では、この宣言が <!DOCTYPE html> という短くシンプルな形に統一されました。

これもHTML5の「シンプルで分かりやすい」という理念の現れです。

<!DOCTYPE html>

この宣言がないと、ブラウザが古いHTMLの解釈方法を使ってしまい、予期しない表示になる可能性があります。

現在のWeb制作では、HTML5が標準なので、必ずこの宣言を入れましょう。

<html>タグ：すべての始まり

<!DOCTYPE html> の次には <html> タグを書きます。

これはHTMLファイル全体を囲む最も大きな要素で、すべてのHTMLコンテンツはこのタグの中に入ります。

<html> タグには言語を指定する属性を付けることが一般的です。

日本語サイトの場合は <html lang="ja"> と書きます。

<html lang="ja">
</html>

<head>と<body>の役割分担

<html> タグの中は、大きく <head> と <body> の2つの部分に分かれます。

<head>：ページの設定情報（ブラウザには表示されない）
<body>：実際にブラウザに表示される内容

<head> は裏方の仕事をする部分で、<body> が表舞台に立つ部分と考えると分かりやすいでしょう。

<html lang="ja">
    <head>
    </head>
    <body>
    </body>
</html>

見えない重要な情報

ブラウザタブに表示されるタイトル

<title> タグは、ブラウザのタブに表示されるページのタイトルを指定します。検索結果にも表示される重要な要素です。

適切なタイトルを付けることで、ユーザーがそのページの内容を理解しやすくなり、SEO（検索エンジン最適化）にも効果があります。

<title>サンプルサイト</title>

文字コード設定の重要性

<meta charset="UTF-8"> は、そのHTMLファイルがどの文字エンコーディングで書かれているかを指定します。日本語サイトでは「UTF-8」が標準です。

この設定がないと、日本語が文字化けしてしまう可能性があります。HTMLファイルを作成する際は、必ず <head> の最初の方に記述しましょう。

<meta charset="UTF-8">

スマホ対応の基本

<meta name="viewport"> は、スマートフォンやタブレットでの表示を制御するための設定です。

最も基本的な設定は <meta name="viewport" content="width=device-width, initial-scale=1.0"> です。

この設定の意味は

width=device-width：Webページの幅をスマホの画面幅に揃える
initial-scale=1.0：初期表示倍率を1倍（等倍）で表示する

ただし、これは一例であり、サイトの要件に応じて調整することができます。

例えば

user-scalable=no を追加してズームを禁止する
maximum-scale や minimum-scale でズームの範囲を制限する
initial-scale で初期表示倍率を調整する

重要なのは、この設定がないとスマートフォンで見た際に、PC向けのレイアウトが縮小表示されてしまい、文字が小さくて読みにくくなってしまうことです。現在はスマホからのアクセスが多いため、適切なviewport設定は必須と言えるでしょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSSファイルとの連携

CSSを適用する方法は2つあります。

外部CSSファイルを読み込む場合

<link> タグを使用

<link rel="stylesheet" href="style.css"> のように記述することで、「style.css」というファイルに書かれたデザイン情報を適用できます。

HTMLファイル内に直接記述する場合

<style> タグを使用

<style>
    body { background-color: blue; }
</style>

これはJavaScriptと異なる点です。JavaScriptは <script> タグひとつで、外部ファイル読み込み（<script src="script.js"></script>）と内部記述（<script>コード</script>）の両方に対応していますが、CSSは外部ファイルなら <link>、内部記述なら <style> と、タグが分かれています。

それぞれの特徴

外部CSSファイルを使う場合

複数のHTMLファイルで同じデザインを共有できる
HTMLとCSSの役割が明確に分離される

内部CSSを使う場合

ファイル数が少なくて済む
小規模なサイトや特定ページでのみ使用するスタイルに適している

その他の`<head>`内要素

<head> 内には他にも重要な要素があります。

<meta name="description">：検索結果に表示されるページの説明文
<link rel="icon">：ファビコン（ブラウザタブに表示される小さなアイコン）の設定

これらの要素も、Webページの完成度を高める重要な役割を果たします。

実際に表示される内容

コンテンツが表示される場所

<body> タグの中には、ブラウザに実際に表示されるすべての内容が入ります。文章、画像、リンク、ボタンなど、ユーザーが目にするすべての要素がここに配置されます。

現在は`</body>`直前に配置が主流

本来、<script> タグは <head> 内に書くのが基本でしたが、現在はページの読み込み速度を向上させるため、</body> の直前に配置することが多くなっています。

これにより、HTMLとCSSが先に読み込まれ、ユーザーがページの内容を早く見られるようになります。

詳細は後の記事で解説予定

<body> 内の具体的なタグや要素については、この後の記事で詳しく解説予定です。まずは「実際に表示される内容が入る場所」ということを理解しておきましょう。

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>
    <meta name="description" content="HTMLの基本構造を学ぶサンプルページです">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>ここに実際のコンテンツが入ります。</p>
    
    <script src="script.js"></script>
</body>
</html>

このサンプルを見ると、今回学んだ要素がすべて含まれていることが分かります。