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

HTMLで内容を作ったら、CSSで色や余白を整えます。

CSSは飾り付けだけでなく、読みやすい順番や配置を作るためにも使われます。まだHTMLを書いたことがなければ、先にHTML入門①を読んでください。

CSSの3つの部分

CSSは「どの要素を」「何を」「どうするか」の順で書きます。

p {
  color: #333333;
}

pは対象を選ぶセレクター、colorは変更する項目であるプロパティ、#333333は設定する値です。

CSSファイルを読み込む

HTMLと同じフォルダーにstyle.cssを作ります。続いて、HTMLのhead内へ次の1行を追加します。

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

hrefのファイル名と実際の名前が一致していれば、CSSが読み込まれます。

文字と背景を整える

style.cssに次の内容を書きます。

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

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

line-heightは行の高さです。margin: 48px autoのautoは、左右の空きを自動計算して中央へ置く指定です。

HTMLの本文はmainで囲みます。

<main>
  <h1>プログラミング学習ノート</h1>
  <p>今日覚えたことを記録するページです。</p>
</main>

カードを作る

複数の情報を区切りたいときは、クラス名を付けます。

<section class="card">
  <h2>今日の記録</h2>
  <p>HTMLの見出しと文章を覚えました。</p>
</section>

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

paddingは枠の内側、marginは枠の外側の余白です。このように内容・内側の余白・枠線・外側の余白を考える仕組みをボックスモデルと呼びます。

横並びにはFlexboxを使う

カードを横へ並べたいときは、親要素へdisplay: flexを設定します。

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

gapは要素同士の間隔です。画面が狭いときの調整は、次のスマホ対応の記事で扱います。

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

class="button"を付けたリンクへ、背景色と余白を設定してみましょう。

模範解答

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

解説

inline-blockにすると、リンクへ上下の余白を付けやすくなります。文字色と背景色には十分な差を付け、読めることを優先しましょう。

CSSの役割をさらに確認したい場合は、MDNのCSS入門が参考になります。