HTML & CSS Handout · ⁨HTML & CSS 講義資料⁩

HTMLはタグを使ってウェブページを記述します。タグは角括弧で囲まれた単語で、例として <p> があります。ほとんどのタグはペアになっており、開きタグ <p> と閉じタグ </p> がコンテンツを包み込みます。タグとそのコンテンツのセットを要素と呼びます。

<p>Hello, world!</p>
<p>This is my first web page.</p>

• ブラウザはタグ間に書かれた内容进行を描写します。
• 閉じタグを忘れたり、スペルが間違ったりすると、正しく表示されないことがあります。

One element = opening tag + content + closing tag → 一つの要素 = 開始タグ + 内容 + 終了タグ

見出しは <h1> （最大）から <h6> （最小）まであります。段落は <p> です。ページのメインタイトルには <h1> を1つだけ使用してください。

<h1>My Blog</h1>
<h2>About me</h2>
<p>I am learning to build web pages.</p>

文字を太字にするには <strong> を、イタリックにするには <em> を使います。改行は <br> で、閉じタグはありません。

<p><strong>Warning:</strong> read this carefully.</p>
<p>First line<br>second line</p>
<p>You can <em>emphasise</em> any word.</p>

** 一般的なミス **

• ほとんどのタグはペアになります（<p>...</p>）。閉じタグを忘れると、以下のレイアウトが崩れます。
• タグは角括弧の中に書き、表示されるテキストは開きタグと閉じタグの間に書きます。
• 見出しは <h1> （最大）から <h6> まであります。サイズだけで見出しを選択しないでください。

无序リスト <ul> は項目記号を表示し、有序リスト <ol> は番号を表示します。各リストアイテムは ⟨li⟩ (<li>) です。

<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>
<ol>
  <li>Wake up</li>
  <li>Go to school</li>
</ol>

ul for bullets, ol for numbers; each item is li → ul はbullet、ol は数字用；各アイテムは li

リンクはアンカー ⟨a⟩ (<a>) です。その href 属性に指し示すアドレスが格納されます。

<a href="https://example.com">Visit Example</a>
<br>
<a href="page2.html">Go to the next page</a>

• 新たなタブでリンクを開くには target="_blank" を追加します。

画像は ⟨img⟩ (<img>) です。閉じタグはありません。src は画像のアドレスであり、alt は画像の読み込み失敗時に表示されるテキスト（視覚障害者向けスクリーンリーダーによる読み上げ用）です。

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png"
     alt="bitmap versus vector" width="120">
<p>If the picture is missing, the alt text shows instead.</p>

** 一般的なミス **

• 画像には src（ファイル）と alt（説明文）が必要で、リンクには href が必要です。
• <img> に独立した闭じタグはありません。
• 破損した src パスは何も表示されません — ファイル名とフォルダを確認してください。

実際のページは固定された骨格を持ちます。 <!DOCTYPE html> はそれが HTML5 であることを示しています。すべての要素は <html> の中に配置されます。 <head> がページの情報を保持し、 <body> がユーザーが見る内容を持っています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is a complete page.</p>
  </body>
</html>

A page is a tree: the head describes the page, the body holds what you see → ページは木構造です：head はページを記述し、body は表示される内容を保持します

• <title> はブラウザのタブに表示されます。
• <meta charset="utf-8"> を使用することで、ページは任意の言語を表示できます。

コメント <!-- ... --> はブラウザが無視する注釈です。タグは互いにネストします。構造を明確に保つために、各レベルごとにインデントしてください。開いた順序と逆の順序で閉じるタグを記述します。

<!-- a simple navigation bar -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

** 一般的なミス **

• タグは重なり合うのではなくネストする必要があります：<b><i>text</i></b>、<b><i>text</b></i> ではありません。
• ページには <html> 、タイトルやリンク用の <head> 、そしてユーザーが見るための <body> が必要です。
• コメントは <!-- ... --> です；ブラウザはそれを無視します。

テーブル <table> は行 <tr> から構成されます。ヘッダーセルは <th> （太字、中央揃え）で、通常のデータセルは <td> です。

<table border="1" cellpadding="6">
  <tr><th>Name</th><th>Score</th></tr>
  <tr><td>Mei</td><td>88</td></tr>
  <tr><td>Sam</td><td>71</td></tr>
</table>

table → tr rows → th/td cells → table → tr 行 → th/td セル

フォーム <form> はユーザーからの入力を受け取る。 <input> はボックスであり、 <label> が名付け、 <button> が送信を行う。

<form>
  <label>Name: <input type="text"></label>
  <br><br>
  <label>Age: <input type="number"></label>
  <br><br>
  <button type="submit">Send</button>
</form>

• 一般的な <input> type の値： text , number , email , password , checkbox 。

** 一般的なミス **

• テーブルセルは行の中に配置される： <tr> が <td> セルを保持する。
• 各フォーム入力は対応する <label> を持つべきであり、明確でアクセシブルにする。
• フォーム内のボタンはデフォルトで送信しますが、そうしたくない場合は type="button" を設定します。

<div> はコンテンツを各行にまとめるための一般的なブロックボックスです。<span> はテキストの行内にある一般的なインラインボックスです。これらはスタイリングや配置のためにグループ化するために使用します。

<div>
  <span>Price:</span> <span>$9.99</span>
</div>
<div>
  <span>Stock:</span> <span>in stock</span>
</div>

セマンティックタグは役割を説明するため、スクリーンリーダーや検索エンジンに役立ちます。適宜 plain <div> よりもそれらを優先してください：<header>, <nav>, <main>, <section>, <article>, <footer>。

<header><h1>My Site</h1></header>
<main>
  <section>
    <h2>News</h2>
    <p>Today we launched the site.</p>
  </section>
</main>
<footer>© 2026 My Site</footer>

** 一般的なミス **

• <div> はブロック（新しい行を開始）です；<span> はインライン（テキスト内に留まる）です。
• <header>、<nav>、<footer> などの意味のあるタグを使用し、全てに <div> を使うのは避ける。
• デフォルトの外観だけのためにタグを使用せず、代わりに CSS でスタイリングしてください。

CSSがHTMLにスタイルを適用する。最も単純な方法は、 <style> ブロックを <head> （大規模サイトでは別 .css ファイルに <link> ）に配置することだ。CSSルールにはセレクターがあり、その後に declarations と呼ばれる { property: value; } のペアが続く。

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

class は複数の要素にスタイルを適用します：HTML に class="..." を追加し、CSS で .name を記述します。id は ONE (1つの) 要素にのみスタイルを適用します：id="..." と #name。

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

最も頻繁に出会うセレクタを一处にまとめました：

** 一般的なミス **

• クラスセレクタは . で始まり、IDセレクタは # で始まります。
• スタイルシートを <head> にリンクするか、ルールを <style> ブロック内に置きます。
• クラスは多くの要素で再利用可能ですが、id はページ内で一度のみ使用します。

文字色を color で、背景を background-color で設定します。色は名前一例 red 、ヘックスコード #ff0000 、または rgb(255, 0, 0) で指定できます。

<style>
  body { background-color: #f0f4ff; }
  .card { background-color: white; color: #1e3a8a; padding: 12px; }
</style>
<div class="card">A card with its own colours.</div>

一般的なテキストプロパティ：font-size, font-weight (例：bold), font-family, text-align (left / center / right)、および spacing (間隔) 用の line-height。

<style>
  h1 { font-family: Arial, sans-serif; text-align: center; }
  p  { font-size: 18px; line-height: 1.6; }
</style>
<h1>Centered title</h1>
<p>Readable paragraph text with comfortable line spacing.</p>

** 一般的なミス **

• color は文字色を設定し；background-color は背景を設定します。
• 色は名前、#rrggbb ヘックスコード、または rgb(...) で指定できます。
• 各 declaration は波括弧内を半角セミコロン ; で終了させます — これは property: value ペアを区切ります（最後の declaration の後のものは任意です）。ルール自体は閉じ波括弧 } で終わります。

すべての要素は内側から外側へ、content (コンテンツ)、padding (ボーダー内部のスペース)、border (枠線)、margin (ボーダー外部のスペース) という4つのレイヤーを持つボックスです。

<style>
  .box { background: #dbeafe; border: 3px solid #2563eb;
         padding: 16px; margin: 20px; }
</style>
<div class="box">content + padding + border + margin</div>

padding はボーダー内側にスペースを追加してコンテンツを内側に押し込みます。margin は外側にスペースを追加して他のボックスを遠ざけます。1つの値を全辺に与えるか、4つ (上 右 下 左) を与えます。

<style>
  .a { background: #fde68a; padding: 4px; }
  .b { background: #bbf7d0; padding: 20px; margin-top: 16px; }
</style>
<div class="a">tight padding</div>
<div class="b">roomy padding</div>

display プロパティはボックスのフロー方法を設定します。block は全体を占める行を消費します；inline はテキストの行内に配置されます；none はボックスを完全に非表示にします；flex は子要素を横一列に並べます（次トピック）。

<style>
  .hidden { display: none; }
  .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; }
</style>
<p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

** 一般的なミス **

• パディングはボーダーの内側にあり、マージンはその外側のスペースです。
• box-sizing: border-box は設定された幅に padding と border を含めます — 通常これが望ましいものです。
• display: none は要素を完全に隠し；visibility: hidden はそのスペースを残します。

ボックスの width を設定します。ブロックを中央に配置するには、width を与えて margin: 0 auto にします — auto は残りのスペースを左右均等に分配します。

<style>
  .page { width: 300px; margin: 0 auto; background: #e0e7ff;
          padding: 16px; text-align: center; }
</style>
<div class="page">A centered, fixed-width page.</div>

Flexbox は子要素を横一列 (または縦一列) に並べます。親要素であるコンテナに display: flex を設定します。gap は子要素間にスペースを追加し；flex: 1 は幅を共有します。

<style>
  .row { display: flex; gap: 10px; }
  .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; }
</style>
<div class="row">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

ボックス、カラー、テキスト、スペースを一つの小さなコンポーネントに組み合わせます。

<style>
  .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1;
          border-radius: 12px; padding: 16px; font-family: sans-serif; }
  .card h2 { margin: 0; color: #1e3a8a; }
  .card .role { color: #64748b; margin: 4px 0 8px; }
</style>
<div class="card">
  <h2>Mei Chen</h2>
  <p class="role">Student · Grade 11</p>
  <p>Loves maths and building web pages.</p>
</div>

** 一般的なミス **

• 固定された幅を持つブロックをmargin: 0 autoで中央に配置します。
• Flexbox は ITEMS (アイテム) ではなく CONTAINER (コンテナ) に display: flex が必要です。
• % 内の幅は親に対する相対的なため、親の幅も確認してください。

擬似クラスは特定の状態にある要素にスタイルを適用します。:hover はマウスが要素の上にある間適用されます。transition を追加すると、変換が跳ねるのではなく滑らかに行われます。

<style>
  .btn { background: #2563eb; color: white; padding: 10px 18px;
         border: none; border-radius: 8px; font-size: 16px;
         transition: background 0.3s; }
  .btn:hover { background: #16a34a; }
</style>
<button class="btn">Hover me</button>

• 他の便利な擬似クラス：:focus (ユーザーが入力 field に焦点を当てたもの) と :first-child。

ポジショニングはボックスを通常の位置からずらします。relative はボックスを少しずらし (そしてそれを子要素のためのアンカーにします)；absolute は最も近い positioned 親から測定して正確に配置します；fixed はページがスクロールしても画面に固定します。

<style>
  .card { position: relative; width: 260px; height: 90px;
          background: #dbeafe; border-radius: 10px; padding: 12px; }
  .badge { position: absolute; top: -10px; right: -10px;
           background: #dc2626; color: white; padding: 4px 10px;
           border-radius: 999px; font-size: 13px; }
</style>
<div class="card">
  A product card
  <span class="badge">NEW</span>
</div>

• top, right, bottom, left は移動量を指定しますが、positioned ボックスでのみ機能します。

レスポンシブページは画面サイズに合わせて適応します。メディアクエリは条件 (例えば max-width など) が成立している間のみルールを適用します。

<style>
  .banner { background: #2563eb; color: white; padding: 16px; }
  @media (max-width: 600px) {
    .banner { background: #16a34a; }   /* narrow screens turn green */
  }
</style>
<div class="banner">Resize the window: blue when wide, green when narrow.</div>

• Mobile-first で設計します：まずスマホ用スタイルを書き、次に大きい画面用の @media (min-width: ...) ルールを追加します。
• パーセント幅と max-width はボックスを画面に合わせて縮小できます。

** 一般的なミス **

• :hoverは選択子とスペースなしで接続する: .btn:hover、 .btn :hoverではない。
• position: absoluteは最も近い配置された親要素から測定される — その親に position: relative を与える。
• メディアクエリは全体のルールをラップする: @media (max-width: 600px) { .a { ... } }。