コードの種
プログラミング

HTML・CSS入門② 色・余白・横並びを整えよう

広告：この記事にはアフィリエイトリンクを含みます。購入・契約により運営者に報酬が入る場合があります。掲載方針

CSSの読み込み、セレクター、余白とボックスモデルを、学習カードを作りながら解説します。Flexboxの親子関係、指定が効かない理由、練習の解答も確認できます。

執筆・編集：しおおにぎり

HTMLでページはできたけれど、文字がぎゅっと詰まっていて少し読みにくい。そこで使うのがCSSです。

今回は前回作った学習ページに色と余白を付け、2枚のカードを並べます。「この数値を変えると、どこが変わる？」を確かめながら進めましょう。

CSSの3つの部分

CSSは、HTMLの見た目や配置を指定するための言語です。1つの指定を、まず日本語に直して読みます。

p {
  color: #333333;
}

これは「p 要素の、文字の色を、濃い灰色にする」という意味です。

部分 呼び方 役割
p セレクター どの要素を選ぶか
color プロパティ 何を変えるか
#333333 値 どう変えるか

: は項目と値の区切り、; は指定の区切りです。{} の中には複数の指定を書けます。英単語の列に見えても、「どれの・何を・どうする」の3つに分ければ追いやすくなります。

#333333 は16進数で色を表す書き方です。最初は色のコードを暗記せず、使いたい色を1つ決めれば十分です。

CSSファイルを読み込む

1. HTMLの隣にファイルを作る

index.html と同じフォルダーへ style.css を作ります。HTMLの head の中には、次の1行を追加します。

<link rel="stylesheet" href="style.css" />

rel="stylesheet" は「見た目の設定を読み込みます」、href はそのファイルの場所です。このタグをCSSファイルの中へ書くのではなく、HTMLへ書く点に注意してください。

2. 小さい変更で接続を確かめる

style.css に、先ほどの p { color: #333333; } を書いて保存します。HTMLも保存し、ブラウザーを更新しましょう。

違いが分かりにくければ、確認中だけ color: blue; にすると段落が青くなります。変われば読み込み成功です。確認後は #333333 へ戻します。

いきなり大量のCSSを書くより、1つ効くことを確かめてから増やした方が、「ファイルを読めていないのか、指定を間違えたのか」を分けられます。

文字と背景を整える

確認用のCSSは、次の内容へ置き換えます。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f7f7f5;
  color: #202020;
  font-family: sans-serif;
  line-height: 1.8;
}

main {
  width: min(90%, 720px);
  margin: 48px auto;
}

* はすべての要素を選ぶセレクターです。box-sizing は幅の数え方を変える設定で、後で詳しく見ます。

body はページ全体の本文です。ここに基本の文字色と書体を指定すると、多くの子要素へ引き継がれます。この「親から一部の設定が伝わる」仕組みを継承と呼びます。背景や余白など、すべてが同じように継承されるわけではありません。

mainの幅と中央寄せを追う

width: min(90%, 720px) は「親の幅の90%と720pxの、小さい方を使う」という指定です。

  • 親の幅が400pxなら、90%は360pxなので幅は360px
  • 親の幅が1000pxなら、90%は900px。720pxの方が小さいので幅は720px

margin: 48px auto は、上下の外側余白が48px、左右は自動です。このように幅が決まったブロックでは、左右の余白が同じになるため中央に置けます。

line-height: 1.8 は、文字サイズに対する行の高さの比率です。本文が16pxなら、行の高さは28.8px相当になります。文字を大きくするだけでなく、行間に余裕を持たせると追いやすくなりますね。

カードを作る

HTMLの main の内容を、次へ置き換えてください。

<main>
  <h1>プログラミング学習ノート</h1>
  <p>覚えたことを、少しずつ残していきます。</p>

  <div class="card-list">
    <section class="card">
      <h2>HTMLの記録</h2>
      <p>見出しと段落を使い分けました。</p>
    </section>
    <section class="card">
      <h2>CSSの記録</h2>
      <p>色と余白を調整しています。</p>
    </section>
  </div>
</main>

class は、CSSなどで使うグループ名です。class="card" が付いた要素は .card で選べます。HTMLの名前には点を付けず、CSSのセレクターにだけ . を付けるのがポイントです。

次のCSSを、style.css の末尾へ追加します。

.card {
  padding: 24px;
  border: 1px solid #dddddd;
  border-radius: 12px;
  background: #ffffff;
}

.card h2 {
  margin-top: 0;
}

.card h2 は「card クラスを持つ要素の中の h2」を選びます。ページ全体の見出しではなく、カード内の見出しだけを調整できるんですね。

paddingとmarginを分ける

カードを、内容を入れた小さな箱と考えてみます。

  • 内容：見出しや文章
  • padding：内容と枠線の間にある内側の余白
  • border：箱の枠線
  • margin：枠線より外の余白

この幅の考え方をボックスモデルと呼びます。padding を増やすと文字が枠から離れ、margin を増やすとほかの要素から離れます。「文字が枠に近い」なら、直すのはまず padding です。

指定した幅より大きくなる理由

標準的な content-box の計算で width: 200px; padding: 24px; border: 1px solid; とすると、枠まで含めた横幅は 200 + 24×2 + 1×2 = 250px です。

冒頭の box-sizing: border-box は、指定した幅に内側の余白と枠線も含める設定です。同じ指定なら枠まで200pxとなり、内容が使える幅が150pxになります。外側の margin は、どちらの場合も別です。

「あれ、200pxのはずなのにはみ出す」というときは、この数え方が手がかりになります。

横並びにはFlexboxを使う

2枚のカードを並べるCSSを追加します。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 260px;
  min-width: 0;
}

Flexboxは、要素を1方向に並べ、空きに合わせて大きさを調整する配置方法です。display: flex を付けるのはカードそのものではなく、2枚を包む親要素の .card-list です。

gap はカード間の間隔です。flex-wrap: wrap があると、並ぶ余裕がないときに次の行へ折り返します。

flex: 1 1 260px は、ここでは「260pxを出発点に、空いていれば広がり、必要なら縮む」と読んでください。min-width: 0 は、長い内容があるときも幅を縮められるようにする指定です。

幅が720pxなら、間隔16pxを引いた704pxを2枚で分け、各352pxにできます。狭い画面で2枚分が入らなければ縦に並びます。厳密に「何px以上なら2列」と決める方法は、次のスマホ対応の記事で扱います。

指定が効かないときの確認順

  1. HTMLとCSSの両方を保存したか
  2. href="style.css" と実ファイル名が一致するか
  3. class="card" を .card で選んでいるか
  4. {} や : の抜けがないか
  5. 同じ対象に、ほかの指定がないか

同じ強さのセレクターなら、基本的に後から書いた指定が優先されます。ただし「必ず最後が勝つ」わけではなく、セレクターの強さなども関係します。これを含む優先順位の仕組みがカスケードです。

ブラウザーの開発者ツールで要素を選ぶと、適用されたCSSを確認できます。打ち消し線のある指定は別の指定に負けている場合があるので、むやみに !important を足す前に確認しましょう。

練習：リンクをボタン風にする

カードの外、main の末尾へ次のリンクを置きます。

<a class="button" href="https://developer.mozilla.org/ja/">HTML・CSSを調べる</a>

背景を緑、文字を白にし、文字の周りへ上下10px・左右18pxの余白を付けてください。キーボード操作で選ばれた場所も分かるようにします。

模範解答

.button {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 18px;
  border-radius: 8px;
  background: #216536;
  color: #ffffff;
  text-decoration: none;
}

.button:hover {
  background: #174a28;
}

.button:focus-visible {
  outline: 3px solid #202020;
  outline-offset: 3px;
}

解説

inline-block は、文章の流れに置きながら箱として大きさや余白を扱える表示方法です。padding で押せる範囲が広がり、margin-top で上の内容から離れます。

:hover はポインターを重ねた状態、:focus-visible はキーボードなどで選択位置を示す必要がある状態への指定です。Tabキーでリンクへ移動し、枠が分かるかも確かめます。

見た目がボタンでも、別のページへ移動するなら a のままで正解です。何かの処理を実行するボタンは button を使います。見た目とHTMLの役割を分けて考えると、使いやすさも保てます。

整えたページを公開したい場合

PCで見た目を確認できたら、HTMLサイトを無料で公開する手順でURLを発行できます。CSSを別ファイルにした場合は一緒にアップロードし、スマートフォンからも色や配置が反映されているか確かめましょう。

レイアウトの作例を増やしたい場合

練習を続けるなら、まずこの記事の色・余白・横並びを変えて確かめてみましょう。本を使ってサイト全体のレイアウトまで作りたい場合には、Mana著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］』も候補になります。

出版社の目次・紹介で、Flexboxやレスポンシブ対応、1列・2列・タイル型の制作を扱うことを確認しました。HTML入門で紹介したものと同じ本です。すでに持っている場合は、その本のCSSやレイアウトの章を使えます。

参考にした公式資料

← 記事一覧へ戻る