HTML・CSSの基礎

HTML・CSSの基礎 – はじめてのWebページを作ろう

HTML・CSSの基礎 – はじめてのWebページを作ろう

Webサイトを作るには、まず HTML（HyperText Markup Language） と CSS（Cascading Style Sheets） を理解することが重要です。HTMLはページの 骨組み（構造） を作り、CSSは デザイン（見た目） を整える役割を担います。

1. HTMLの基礎

HTMLとは？

HTML（エイチティーエムエル）は、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>はじめてのHTML</title>
</head>
<body>
    <h1>こんにちは！</h1>
    <p>これは、HTMLとCSSの基礎を学ぶためのサンプルページです。</p>
</body>
</html>

解説

<!DOCTYPE html> … HTML5の宣言
<html> … HTML文書の開始・終了を示す
<head> … メタ情報（文字コードやタイトル）を含む
<meta charset="UTF-8"> … 文字コードをUTF-8に設定（日本語対応）
<title> … ページタイトル（ブラウザのタブに表示される）
<body> … ページの内容を記述する

HTMLの基本（詳細）

2. CSSの基礎

CSSとは？

CSS（シーエスエス）は、HTMLで作成した要素の見た目を整えるためのスタイルシート言語です。色やフォント、レイアウトなどを指定できます。

CSSの適用方法

CSSを適用する方法は大きく3つあります。

インラインCSS（HTMLタグ内に記述） <p style="color: red;">赤い文字の段落</p>
内部CSS（<style> タグを使う） <head> <style> p { color: blue; } </style> </head>
外部CSS（.css ファイルを作成し、HTMLにリンク） <head> <link rel="stylesheet" href="style.css"> </head> style.css（外部CSSファイル） body { font-family: Arial, sans-serif; color: #333; background-color: #f8f8f8; } h1 { color: #007bff; } p { font-size: 16px; line-height: 1.6; }

CSSの基本（詳細）

3. HTML + CSSでシンプルなページを作る

次に、HTMLとCSSを組み合わせたシンプルなWebページを作成してみましょう。

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルなWebページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Webページへようこそ！</h1>
    <p>このページは、HTMLとCSSの基礎を学ぶためのサンプルです。</p>
    <a href="#">リンクのサンプル</a>
</body>
</html>

CSS（style.css）

body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f0f0f0;
    text-align: center;
    padding: 20px;
}

h1 {
    color: #007bff;
    font-size: 24px;
}

p {
    font-size: 18px;
}

a {
    color: #ff6600;
    text-decoration: none;
    font-weight: bold;
}

4. 実際にブラウザで確認してみよう

index.html と style.css の2つのファイルを作成して同一のフォルダーに置く。
index.html をブラウザ（Chrome, Edge, Firefoxなど）で開く。
背景色がグレー、タイトルが青、リンクがオレンジのWebページが表示される。

5. まとめ

HTMLはページの骨組み、CSSはデザインを整える
HTMLの基本構造を理解し、適切なタグを使う
CSSを適用する方法は インライン・内部・外部
実際にファイルを作ってブラウザで確認する

次回は、レイアウトの基本（ボックスモデル、Flexbox、グリッド） について学んでいきましょう！