コース目次 / 第3章

見た目

CSSを別ファイルで用意して、色・フォント・余白を整えます。

目安約55分この章のゴール: 配色とフォントの効いた「デザインされた感」のあるページになる

ここまでのページは、黒い文字と白い背景のままでした。この章で CSS を導入して、一気に見た目を整えます。変化が大きいので、いちばん楽しい章かもしれません。

今日のゴール

同じ内容のまま、背景がやわらかいクリーム色になり、見出しが緑になり、文字のかたちが変わります。中身(HTML)はほとんど変えません。見た目だけを別のファイルで指定します。

ミニ解説その1: HTML と CSS の役割分担

HTML … 何が書いてあるか(見出し・段落・画像)
CSS … それをどう見せるか(色・大きさ・余白)

この2つを分けておくと、「文章を直したいだけなのに見た目が壊れた」ということが起きにくくなります。

CSS の書き方はいつも同じ形です。

どれを {
  なにを: どうする;
}

「どれを」の部分を セレクタ といいます。この章では2種類だけ使います。

書き方	意味
`h1 { ... }`	ページ中のすべての `<h1>` が対象(要素セレクタ)
`.intro { ... }`	`class="intro"` と書いた場所だけが対象(クラスセレクタ)

class(クラス) は「同じ見た目にしたいものに付ける名札」です。名札を付けておくと、<p> がいくつあっても、狙ったものだけを変えられます。CSS で名札を指すときは、先頭に点(.)を付けます。

ミニ解説その2: margin と padding

余白には2種類あります。ここだけ図で覚えてください。

        ↑ margin(箱の外側の余白)
  ┌───────────────┐
  │ ↑ padding     │  ← 枠の内側の余白
  │ ←  中身  →    │
  │ ↓             │
  └───────────────┘
        ↓ margin

margin … 箱と箱のあいだをあける
padding … 枠と中身のあいだをあける

いまはこれだけで十分です。深追いしないでください。使っているうちに body で覚えます。

準備: フォントを読み込む

Google Fonts という無料のフォント置き場から、日本語の書体を1つ借ります。<head> に3行足すだけで使えるようになります。この3行は意味が分からなくてもコピーで大丈夫です。

書き写すその1: style.css を作る

VS Code で mysite の中に style.css という新しいファイルを作り、まるごと書き写します。

style.css

body {
  background-color: #fbfaf7;
  color: #33312e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  padding: 24px;
}

h1 {
  color: #4a6b57;
  font-size: 28px;
  margin-bottom: 8px;
}

h2 {
  color: #4a6b57;
  font-size: 20px;
  margin-top: 40px;
}

a {
  color: #b4703a;
}

.intro {
  color: #6b665f;
}

.icon {
  width: 120px;
}

書き写すその2: index.html から呼び出す

CSS ファイルは、作っただけでは効きません。HTML から「このCSSを使ってね」と呼び出します。

index.html+6 / -2

     <meta charset="UTF-8" />   <title>はるとの記録</title>+  <link rel="preconnect" href="https://fonts.googleapis.com" />+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />+  <link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap" rel="stylesheet" />+  <link rel="stylesheet" href="style.css" /> </head> <body>   <h1>こんにちは、はるとです</h1>-  <img src="images/icon.png" alt="はるとのアイコン" />-  <p>カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>+  <img class="icon" src="images/icon.png" alt="はるとのアイコン" />+  <p class="intro">カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>     <!-- 好きなものを3つならべる -->

class="intro" と class="icon" は、さっき作った .intro と .icon の名札です。

保存してリロードしてください。背景がクリーム色になり、見出しが緑になっていれば成功です。

あなたの番

配色を自分の好きなものに変えます。 迷ったら、下の3つから選んでコピーしてください。style.css の色の部分を置き換えるだけです。

名前	背景	文字	見出し	リンク
森(見本と同じ)	`#fbfaf7`	`#33312e`	`#4a6b57`	`#b4703a`
海	`#f7f9fb`	`#2c3238`	`#3f6b86`	`#c2704f`
夕方	`#fdf8f4`	`#3a3230`	`#a25a4c`	`#7a6a52`

自分で色を決めたい人は、ブラウザで「カラーピッカー」と検索すると色を選べるページが出てきます。選んだ色の # から始まる6文字をコピーして貼り付けてください。

フォントを変えたい人は、Google Fonts のサイトで「Japanese」で絞り込み、好きな書体の読み込みコードをもらってきて、<head> の3行目と font-family の名前を差し替えます。

うまくいかないときは

CSSがまったく効かない

次の3つを順番に確認してください。

link を書いたか … <head> の中に <link rel="stylesheet" href="style.css" /> がありますか。
ファイル名が合っているか … style.css と styles.css(sが多い)はよくある間違いです。左のファイル一覧の名前と見比べてください。
セミコロンがあるか … CSS は1行ごとの終わりに ; が必要です。1つ抜けると、そこから下がまるごと効かなくなります。

一部だけ効かない

名札(class)の綴りがずれていることがほとんどです。HTML の class="intro" と CSS の .intro を、1文字ずつ見比べてください。CSS 側の先頭の点(.)を忘れていないかも確認します。

フォントが変わらない

<head> の Google Fonts の行が入っているか確認してください。また、インターネットにつながっていないとフォントを読み込めません。うまくいかなくても、そのほかの色や余白は効いているはずなので、先に進んで大丈夫です。

こうなっていればOK

mysite の中に style.css がある
index.html の head に style.css の link がある
背景の色と文字の色が変わっている
見出しに色が付いている
フォントが変わっている

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

この章はまだ完了していません。