HTML/CSSの始め方 — 自己紹介カードを2つのファイルで作る

ひよこ

自分の紹介ページを作ってみたい！何から始めればいい？

ペンギン先生

最初はHTMLとCSSで十分だよ。HTMLで「名前・紹介文・好きなこと」の意味と順番を作り、CSSで色や余白を整えよう。下の2つのファイルで試せるよ。

ひよこ

HTMLとCSSは、何が違うの？

ペンギン先生

HTMLは文章の見出しやリスト、リンクなどの構造を表すもの。CSSは文字色や配置などの見た目を指定するものだよ。同じHTMLのまま、CSSを変えて見た目を比べられるんだ。

ひよこ

特別なアプリがないと作れない？

ペンギン先生

テキストエディターとブラウザがあれば始められるよ。index.htmlとstyle.cssを同じフォルダーに保存する。拡張子が.txtになっていないかも確認しよう。

ひよこ

h1は、一番大きな文字という意味？

ペンギン先生

見出しの階層で最上位を表すタグだよ。文字の大きさはCSSで変えられるから、大きさだけで選ばない。例ではページの題名をh1、好きなことの見出しをh2にするよ。

ひよこ

カードの余白は、どこを変えるの？

ペンギン先生

paddingは中身と枠の間、marginは外側の間隔だよ。箱の扱いはdisplayなどでも変わる。まずこのカードでpaddingを変えて、見た目を比べると理解しやすいね。

ひよこ

好きなことを横に並べたいな。

ペンギン先生

今回はFlexboxで並べ、入り切らないときは折り返すよ。justify-contentは主軸、align-itemsは交差軸に沿ってそろえる。主軸はflex-directionで変わるので、いつも横・縦とは限らないんだ。

ひよこ

スマホで見るときは何を確認すればいい？

ペンギン先生

狭い幅でも文字が読めるか、内容がはみ出さないかを見よう。viewportの指定も入れるよ。メディアクエリを使わなくても、幅や折り返しの指定で対応できる部分があるんだ。

ひよこ

見た目ができたら完成かな？

ペンギン先生

リンクをキーボードでも使えるか、見出しの順番が分かるかも確認しよう。画像のaltは役割に合わせて書き、飾りだけなら空にする。次にJavaScriptでボタンの動きを加えてみよう。

最初の目標：自分の名前と好きなことを表示する

小さな自己紹介カードを作ります。名前を表示し、リンクを押すと「好きなこと」へ移動できれば成功です。公開サービスへの登録はまだ不要です。

新しいフォルダーに index.html と style.css を作り、どちらもUTF-8で保存します。まず 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="style.css">
</head>
<body>
  <main class="card">
    <h1>こんにちは、ひよこです</h1>
    <p>ITを少しずつ勉強しています。</p>
    <a href="#hobbies">好きなことを見る</a>
    <section id="hobbies">
      <h2>好きなこと</h2>
      <ul class="hobbies">
        <li>読書</li>
        <li>散歩</li>
        <li>もの作り</li>
      </ul>
    </section>
  </main>
</body>
</html>

CSSで、色と余白を整える

style.css に次を保存します。

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 24px 16px;
  font-family: sans-serif;
  line-height: 1.7;
  color: #2c3e50;
  background: #fff9e6;
}
.card {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  background: white;
  border: 2px solid #4a90d9;
  border-radius: 16px;
}
h1 { font-size: 1.5rem; }
a { color: #24629b; }
a:focus-visible {
  outline: 3px solid #996000;
  outline-offset: 4px;
}
.hobbies {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  list-style: none;
}
.hobbies li {
  padding: 8px 16px;
  background: #e8f4e8;
  border-radius: 8px;
}

index.html をブラウザで開き、白いカードと3つの好きなことが出るか確認します。名前を自分の名前へ変えて保存し、再読み込みすると変更が見えるはずです。これはローカルで見るページで、他の人へ公開されるわけではありません。

「できた」を確認する4つの操作

1. リンクを押し、URL末尾に #hobbies が付き、対象へ移動するか見る。
2. Tabキーでリンクに移り、枠が出るか確認。Enterでも移動できるか試す。
3. ブラウザの幅を狭くし、リストが必要に応じて折り返されるか見る。
4. .card の padding を24pxから32pxへ変え、内側の余白が広がるか比べる。

Flexboxは主軸と交差軸を基準に配置します。この例の既定の主軸は横方向ですが、flex-direction: column へ変えると縦方向になります。justify-content を「横方向専用」と覚えないのがポイントです。

ボックスモデルは幅・内外の余白を考える入口です。この例は border-box なので、指定した幅にはpaddingとborderも含まれます。インライン要素とブロック要素では、幅や上下の余白の効き方が同じではありません。

つまずいたら、まずファイルと適用先を見る

CSSが効かない場合は、両ファイルが同じフォルダーにあるか、style.css の綴り・拡張子を確認します。ブラウザの開発者ツールでは、どのCSSが適用されているかを見ることができます。そこでの編集は保存したファイルへ自動で書き戻されるわけではありません。

画像を加えたい場合、内容を伝える写真などには意味のあるaltを付けます。飾りだけの画像は alt="" とし、すべての画像へ同じ説明を付けません。まず適切なHTMLを使い、ARIAを足せば自動的に使いやすくなるとは考えないようにしましょう。

この例は折り返しで幅に対応しています。幅によって配置そのものを変えたい場合は、メディアクエリを学びます。次はJavaScript入門で、ボタンによる表示変更へ進めます。

参考資料

• MDN — Basic HTML syntax — 文書とタグの構造
• MDN — Headings and paragraphs — 見出しの意味と階層
• MDN — Box model — 幅・余白・インラインとの違い
• MDN — Flexbox — 主軸・交差軸・折り返し
• MDN — img — 画像の役割とalt