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」が、ファイルの段階できれいに分かれます。

つなぐのは、たった一行

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

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

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

じゅんびHTMLファイルの全体像ページの骨組みを作ったあの回へ。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——今回は「つながったこと」だけ確認できれば十分です。