JP

CSS・はじめの一歩

CSSはどこに書くの？

色や大きさを試す前に、まず"置き場所"から。CSSはstyle.cssに書いて<link>でつなぐ——これを先に押さえれば、次からはすぐ手を動かせる。

CSSが「見た目を着せる言葉」だとわかりました。でも、いざ書こうとすると最初にぶつかるのが「そのCSS、どこに書けばいいの？」という疑問です。色や大きさを試す前に、まずこの”置き場所とつなぎ方”を先に押さえておきましょう。ここさえわかれば、書いたそばから試せるようになります。

CSSは専用のファイルに書く

CSSは、HTMLとは別のファイルに書くのが基本です。名前はよく style.css にします。中身は、これから少しずつ覚えていく形——たとえば、こんなふうに書きます。

h1 {
  color: teal;
}

いまは中身の意味がわからなくても大丈夫。「こういうものを書きこむ入れ物が style.css」というイメージだけ持っておけば十分です。

HTMLファイル（index.html）と同じフォルダに、style.css を並べて置いておきましょう。これで「中身のHTML」と「見た目のCSS」が、ファイルの段階できれいに分かれます。

別ファイルにしておくうれしさは、もうひとつあります。ページが2枚、3枚と増えたとき、どのHTMLからも同じstyle.cssをつなげること。1枚の指示書をぜんぶのページで共有できるので、たとえば背景色を1か所直すだけで、サイト全体の色がそろって変わります。

つなぐのは、たった一行

style.css に書いただけでは、まだページには届きません。効かせるには、HTMLの <head> の中に、次の一行を入れます。

<head>
  <link rel="stylesheet" href="style.css">
</head>
  • rel="stylesheet" … 「これはスタイルシート（＝CSS）だよ」という合図
  • href="style.css" … 読み込むファイルの場所と名前

この一行が、HTMLとCSSをつなぐ橋です。橋がかかって初めて、style.css の指定がページに届きます。

じゅんびHTMLファイルの全体像ページの骨組みを作ったあの回へ。CSSをつなぐ一行の置き場所が、そこにあります

ブラウザの中では、何が起きている？

<link> の一行で何が起きるのか、流れを追ってみましょう。

  1. ブラウザが index.html を上から読みはじめる
  2. <head> の中で <link> を見つける
  3. href に書かれた style.css を取りに行く
  4. 書かれていた指定を、ページの見た目に反映する

<link> を <head> に書くのは、この流れのためです。<head> はページの準備情報を書く場所。本文（<body>）を表示する前に「見た目の指示書はこれ」と先に伝えておくことで、ページが最初からきれいな姿で現れます。

ファイル名はstyle.cssじゃないとだめ？

じつは、名前そのものは自由です。main.css でも piyo.css でも動きます。ただし、決まりが2つだけあります。

  • 拡張子は.cssにする（これがCSSファイルの目印）
  • href に書く名前と実際のファイル名を一字一句そろえる（大文字・小文字も区別されます）

とはいえ style.css は、世界中で使われている定番の名前。迷う理由がなければ、まずはこの名前にしておくのがおすすめです。

このレッスンのまとめ

  1. CSSは style.css のような別ファイルに書く
  2. <head> の中で <link rel="stylesheet" href="style.css"> とつなぐ
  3. つないで初めて、CSSがページに効く

やってみよう：style.cssを作ってつなぐ

しまちゃんのページに、style.css を用意しましょう。index.html と同じフォルダに、新しいファイルを作ります。

（作業フォルダ）
├─ index.html
└─ style.css

このとおり、2つのファイルが横ならびになっていればOKです。style.css の中に、こう書きます。

body {
  background-color: pink;
}

そして index.html の <head> に、つなぐ一行を足します。

<head>
  <link rel="stylesheet" href="style.css">
</head>
ブラウザ表示。ページ全体の背景がピンク色になっている
ページ全体がピンク色になれば、無事つながった証拠。色そのものはまだ適当でOK——今回は「つながったこと」だけ確認できれば十分です。

よくある質問

CSSを書いたのに反映されないときは？
まず、linkタグのhrefに書いた名前と実際のファイル名が一字一句同じか、index.htmlとstyle.cssが同じフォルダにあるかを確かめましょう。直しても変わらないときは、ブラウザの再読み込みも試してください。
linkタグはHTMLのどこに書くの？
headタグの中です。ページの準備情報を書く場所なので、bodyの中には書きません。
HTMLファイルの中に直接CSSを書いてもいい？
styleタグを使えば書けますが、中身と見た目を分けて管理しやすくするため、基本は別ファイル（style.css）にしてlinkタグでつなぐ形がおすすめです。