HTMLとCSS入門

対象読者: Webページを初めて作る人。HTMLやCSSの知識は不要です。

この教材でできるようになること

HTMLを構造と意味、CSSを見た目と配置として使い分けられる
見出し、本文、リンク、リストをsemantic HTMLで表せる
box modelと基本的なresponsive designを説明できる
キーボード操作と読みやすさを考慮できる

1. 最小のHTML

index.htmlを作り、ブラウザで開きます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>最初の学習ページ</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>学習記録</h1>
    </header>
    <main>
      <h2>今日学んだこと</h2>
      <ul>
        <li>HTMLは意味と構造を表す</li>
        <li>CSSは見た目を整える</li>
      </ul>
      <a href="https://developer.mozilla.org/ja/">MDNで調べる</a>
    </main>
  </body>
</html>

見た目のためだけに見出しを選ばず、文書構造に合う要素を選びます。

2. CSSを適用する

styles.cssを作ります。

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

body {
  max-width: 70rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem);
}

a {
  color: #1553ff;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

system fontを使えば外部フォントの読み込みは不要です。clamp()は画面幅に応じた余白を一つの宣言で表せます。

3. box model

要素の大きさは、content、padding、border、marginから成ります。

*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 100%;
  padding: 1rem;
  border: 2px solid;
  margin-block: 1rem;
}

box-sizing: border-boxでは、指定した幅にpaddingとborderが含まれます。

4. responsive layout

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

固定幅だけに頼らず、内容が狭い画面で収まるかを320px幅と200% zoomでも確認します。

5. accessibilityの最初の基準

画像には目的に合うaltを付ける。装飾だけならalt=""
buttonで行う操作をdivのclickで代用しない
labelとinputを関連付ける
色だけで状態を伝えない
heading levelを見た目の都合で飛ばさない
キーボードでfocus位置が分かるようにする

演習: 自己紹介カード

次を含む一枚のカードを作ってください。

名前をh2
学びたいことをp
三つの項目をul
公式資料へのlink
320pxでも横scrollしないCSS

開発者ツールでviewport幅、見出し構造、focus表示を確認します。