HTML・CSS入門｜自己紹介カードを1ファイルで作る。CSSが効かないときは、セレクターが当たっているかを先に確かめる

執筆・監修: 徐聖博／株式会社シンシア代表取締役社長

HTMLとCSSの役割を、自己紹介カードを1枚作りながら理解します。CSSが効かないときに値をいじり続けないよう、セレクターが当たっているかを検証画面で確かめる手順と、4つの変更課題つき。

HTML・CSS入門｜自己紹介カードを1枚作って、構造と見た目を分ける

HTMLはページの構造を書き、CSSはその見た目を指定します。役割の違いは、大きなサイトを真似するより、見出し・文章・リストを持つカードを1枚作るほうが分かります。

この記事では、画像も外部サービスも使わずに、1つのファイルで自己紹介カードを作ります。保存すればそのままブラウザで表示できます。

訂正（2026年9月30日）

公開時、この記事は「ナミノリの受講ログでは、CSSセレクターの回は完了した10人全員が2回以上かかり、色や余白をその場で試す回は5人全員が1回で合格した」と書き、CSSで止まるのは値ではなくセレクターだという主張の根拠にしていました。

この数字は、比べられるものではありませんでした。

セレクターの回の確認テストには「IDセレクターを使う場合、どの記号を使いますか？」という問題があり、正解は #idselect です。ところが、画面の表示処理の誤りで先頭の # が消え、idselect と表示されていました。正解の選択肢が画面に出ていなかったので、1回で合格できた人がいなかったのは当然でした
「色や余白を試す回は5人全員が1回で合格」の5人のうち4人は、ナミノリ社内の確認用アカウントでした。社外の受講者は1人です

表示の誤りは2026年9月30日に修正しました。受講ログから「セレクターが難しい」とは言えません。お詫びして訂正します。

この記事の手順（検証画面でセレクターが当たっているかを確かめる）は、CSSが効かないときの確かめ方として、受講ログとは関係なくそのまま使えます。

準備：ファイルを1つ作る

VS Code のようなプレーンテキストを編集できるエディターを使います。Wordなどの文書作成ソフトでは、保存したときに余計な情報が入ります。Macのテキストエディットは、初期設定のままだとリッチテキストで保存されるので避けてください。

作業用のフォルダを作る
エディターで新しいファイルを作り、下のコードを貼り付ける
index.html という名前で、文字コードを UTF-8 にして保存する
保存したファイルをダブルクリックして、ブラウザで開く

ファイル名が index.html.txt になっていないか確認してください。拡張子が表示されない設定だと気づきにくいところです。

名前や文章は学習用の架空のもので構いません。本名や住所、電話番号を入れる必要はありません。なお、自分のパソコンで開いているだけなので、このページはインターネットには公開されていません。

完成コード

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学習用の自己紹介</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: sans-serif;
      line-height: 1.7;
      background: #f4f6f8;
    }
    main {
      max-width: 560px;
      margin: 0 auto;
    }
    .card {
      padding: 24px;
      border: 1px solid #aaa;
      border-radius: 12px;
      background: #fff;
    }
    .card h1 {
      font-size: 1.6rem;
      margin-top: 0;
    }
    .card a:focus {
      outline: 3px solid #1a73e8;
    }
  </style>
</head>
<body>
  <main>
    <article class="card">
      <h1>はじめまして、ナミです</h1>
      <p>Webの基礎を学習しています。小さなページを1つずつ作ります。</p>
      <h2>今週の目標</h2>
      <ul>
        <li>HTMLで見出しを付ける</li>
        <li>CSSで余白を調整する</li>
      </ul>
      <a href="https://naminori.xincere.jp/courses/7">HTML/CSS初級講座を見る</a>
    </article>
  </main>
</body>
</html>

白いカードの中に、見出し・文章・箇条書き・リンクが表示されれば成功です。

HTMLの役割：意味のまとまりを作る

タグ	意味
`<h1>` `<h2>`	見出し。数字は階層（h1がいちばん上）
`<p>`	段落
`<ul>` と `<li>`	箇条書き。`ul` の中に `li` を並べる
`<a href="...">`	リンク
`<article>`	それだけで完結する内容のまとまり（ここではカード1枚）
`<main>`	ページの主要な部分

見出しのタグは、文字を大きくしたいから選ぶものではありません。内容の階層で選びます。大きさはCSSで変えられます。

<title> はブラウザのタブに出る題名で、<h1> はページの本文に出る見出しです。別のものなので、両方書きます。

CSSの役割：どこに、何を当てるか

CSSの1つの指定は、どこに（セレクター） と 何を（プロパティと値） の組でできています。

.card {
  padding: 24px;
}

これは「class="card" の要素に、内側の余白24pxを当てる」という意味です。

セレクターの書き方は、まず3つだけ覚えれば足ります。

書き方	当たる相手	この記事での例
`h1`	すべての `<h1>`	―
`.card`	`class="card"` を持つ要素	カード本体
`.card h1`	`.card` の中にある `<h1>`	カードの見出し

.card のドットが「classの名前」という意味です。HTML側には class="card" と書き、ドットは付けません。CSSにはドットを付け、HTMLには付けない。 ここが食い違うと、エラーも出ずに何も起きません。

ほかに #名前 で id="名前" に当てる書き方もありますが、最初はclassだけで十分です。

セレクターが当たっているか確かめる

CSSが効かないとき、値を何度も変えてしまいがちです。先に当たっているかどうかを確かめてください。

カードの上で右クリックして「検証」を選ぶ（Chromeの場合）
開いた画面の「Elements」で <article class="card"> が選ばれていることを確認する
右側の「Styles」に .card { ... } が表示されているか見る

表示されていれば当たっています。 表示されていなければ、セレクターとclass名が食い違っています。値を変えても意味はありません。

Stylesの中の値は、その場でクリックして書き換えられます。値の調整はここで試し、決まったらファイルに書き写すのが速いやり方です。

変更課題

1つ変えたら保存し、ブラウザを再読み込みします。1回に変えるのは1か所だけにしてください。

課題1：項目を増やす
今週の目標に <li>ブラウザで確認する</li> を追加します。
完成条件：箇条書きが3項目になる。

課題2：角を四角にする
.card の border-radius を 0 にします。
完成条件：角だけが四角くなり、枠線と余白は変わらない。

課題3：わざとセレクターを外す
HTMLの class="card" を class="crad" に書き換えて、保存・再読み込みします。
完成条件：カードの白い背景・枠線・余白が消えることを確認し、上の手順で Styles に .card が出ていないことを確かめる。確認できたら card に戻す。

課題4：画面を狭くする
ブラウザの幅を狭めるか、検証画面のデバイス表示（スマートフォンのアイコン）で幅を320pxにします。
完成条件：文章が折り返され、横スクロールが出ない。

課題3がこの記事でいちばん大事です。セレクターが外れたときにどう見えるかを一度見ておくと、次に効かなかったときに、値ではなくセレクターを疑えるようになります。