HTML/CSS れんしゅう帳
<h1>書いたものが、そのまま出る。</h1>
↓ ブラウザが読むと

書いたものが、そのまま出る。

このページ自体が教材です。左の見た目と右のコードを見比べて、気になったところをファイルの中で直接書き換えてみてください。上の「骨組みを表示」を押すと、それぞれの部品がどのタグでできているか見えます。

01

見出しと段落

文章の骨格は h1〜h6 と p でつくります。見出しは大きさで選ぶのではなく、内容の階層で選びます。

中くらいの見出し

ふつうの段落です。strong は重要な語、em は強調したい語に使います。

改行したいときは
brタグを使います。

<h3>中くらいの見出し</h3>
<p>ふつうの段落です。
  <strong>strong</strong> は重要な語、
  <em>em</em> は強調したい語。
</p>
<p>改行は<br>こうします。</p>
02

リンクとリスト

ul は順序のない箇条書き、ol は順番に意味があるとき。リンクは a の href に行き先を書きます。

  1. 手順が決まっているもの
  2. その次にやること
<ul>
  <li>順番は関係ない項目</li>
  <li><a href="https://...">リンク</a></li>
</ul>

<ol>
  <li>手順が決まっているもの</li>
</ol>
03

画像とキャプション

alt は画像が見えない人・読み込めないときのための説明文です。省略しないでください。ここでは外部ファイルを使わず、SVGを直接書いています。

図1：SVGで描いた図形
<!-- 写真を置くとき -->
<figure>
  <img src="cat.jpg" alt="窓辺で寝ている猫">
  <figcaption>図1：説明文</figcaption>
</figure>
04

表

見出しのセルは td ではなく th。border-collapse:collapse を指定すると罫線が1本になります。

タグ役割
thead見出し行のまとまり
tbody中身の行のまとまり
th見出しのセル
 
<table>
  <thead>
    <tr><th>タグ</th><th>役割</th></tr>
  </thead>
  <tbody>
    <tr><td>th</td><td>見出しのセル</td></tr>
  </tbody>
</table>
05

フォーム

label の for と入力欄の id をそろえると、ラベルを押しただけで入力欄が選ばれます。使い勝手が大きく変わる部分です。

<label for="n">お名前</label>
<input type="text" id="n" placeholder="山田 太郎">

<button type="submit">送信する</button>
06

ボックスモデル

CSSでいちばん最初につまずくところ。すべての要素は「中身・padding・border・margin」の入れ子でできています。色は開発者ツールと同じ配色にしてあります。

margin（外側の余白）
padding（内側の余白）
content（中身）
/* 幅の計算をわかりやすくするおまじない */
*{ box-sizing: border-box; }

.box{
  margin: 22px;   /* 外側 */
  border: 6px solid #1e2320;
  padding: 22px;  /* 内側 */
}
07

Flexbox（横並び）

親に display:flex を書くと、子が横に並びます。gap がすき間、flex:1 をつけた子だけが余白を吸って伸びます。

固定
flex:1 で伸びる
固定
.parent{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;   /* 入らなければ折り返す */
}
.child-b{ flex: 1; }  /* ここだけ伸びる */
08

Grid（格子）

行と列をまとめて決めたいときはGrid。1fr は「余ったぶんを1として分ける」という単位です。

span 2
3
4
5
6
.parent{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wide{ grid-column: span 2; }  /* 2列ぶん使う */
09

色・単位・CSS変数

同じ色を何度も書くかわりに --名前 で定義しておくと、1か所直すだけで全体が変わります。このページの配色もすべてそれで管理しています。

--shu
--marker
--ink
--box-content
:root{
  --shu: #c8362a;
  --marker: #ffd84d;
}
.button{ background: var(--shu); }

/* 単位：px=固定 / rem=文字基準 / % と fr=割合 / vw=画面幅 */
10

状態の変化とアニメーション

:hover はカーソルが乗ったとき、:focus-visible はキーボードで選ばれたとき。transition を足すと、その変化がなめらかになります。下のボタンに触れてみてください。

button{
  background: #1e2320;
  transition: background .18s ease, transform .18s ease;
}
button:hover{
  background: #ffd84d;
  transform: translateY(-2px);
}
11

レスポンシブ

画面幅によってCSSを切り替えます。ブラウザの窓を横に縮めてみてください。700px以下になると下の帯の色が変わり、このページの2列組みも1列に変わります。

700pxより広い → 青 ／ 狭い → 黄
@media (max-width: 700px){
  .resp{ background: #ffd84d; }
  .split{ grid-template-columns: 1fr; }
}
12

練習場

左に書くと右にすぐ出ます。ページを読み込み直すと元に戻るので、思いきり壊して大丈夫です。

左：あなたのコード　／　右：結果