JP

CSS・はじめの一歩

CSSって何？

HTMLで作った骨組みに「見た目」を着せる言葉、CSS。色・大きさ・配置はぜんぶこの子のしごとです。

HTMLはページの「骨組み」でしたね。でも骨組みだけだと、文字は真っ黒・背景は真っ白でそっけない。そこに色や大きさ、配置といった”見た目”を着せてあげるのがCSSです。

HTMLとCSSの役割分担

言葉担当
HTML「ここは見出し」「ここは段落」という中身・構造
CSS「その見出しを青く、大きく」という見た目

服を着替えても中身の人は変わらないように、CSSを変えてもHTMLの中身はそのまま。見た目だけを自由に変えられます。

着せ替えができる、うれしさ

なぜわざわざ分けるの？と思うかもしれません。いちばんのごほうびは、着せ替えが自由なこと。

同じHTML（中身）に、あかるい服のCSSを着せれば元気なページに、落ち着いた服のCSSを着せれば大人っぽいページに。中身を1文字も触らずに、雰囲気だけをまるっと変えられる。これが「分けておく」ことのいちばんの気持ちよさです。

見た目を着せると、こう変わる

言葉より、見たほうが早いです。同じ中身に、CSSを着せる前と着せたあとを並べてみました。

中の文字はどちらもまったく同じ。変わったのは見た目だけ——これがCSSのしごとです。

CSSという名前の意味

CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略です。むずかしそうな名前ですが、大事なのは後ろの「スタイルシート」＝見た目の指示書という部分。「この見出しは青く」「この段落は大きく」という指示を、1枚のシートに書きためていく——そんなイメージの言葉です。

頭の「カスケーディング（滝のように流れ落ちる）」は、指示が重なったときにどれを優先するかというルールのこと。これはもっと先のレッスンで効いてくる話なので、今は「CSS＝見た目の指示書」だけ持ち帰れば十分です。

こんなことができる

CSSでできることを、ちょっとだけのぞいてみましょう（今は「へぇ」で十分）。

  • 文字の色を変える
  • 文字を大きく・小さくする
  • まわりにすき間（余白）をつくる
  • 背景に色をしく

どれも「見た目」の話ばかり。見えるものの調整は、だいたいCSSのしごと、と覚えておけば大丈夫です。

たとえば「見出しの文字を青緑にする」は、CSSでこう書きます。

h1 {
  color: teal;
}

読み方はまだわからなくて大丈夫。「どこを（h1）」「どうする（文字の色を青緑に）」——たったこれだけの短い指示で、ページの見た目が変わります。この形の読み書きは、次のレッスンからゆっくり覚えていきます。

身のまわりのページも、ぜんぶCSS

ふだん見ているニュースサイトも、動画サイトも、この学習サイトも、見た目はすべてCSSで作られています。プロが作る大きなサイトも、これからあなたが作る小さなページも、使っている仕組みはまったく同じ。ここから覚えるひとつひとつが、そのまま“本物”の道具です。

このレッスンのまとめ

  1. CSSは見た目を担当する言葉
  2. HTML（中身）とCSS（見た目）は役割が分かれている
  3. 中身はそのままに、見た目だけを着せ替えできる

よくある質問

CSSは何の略？
Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。「スタイルシート＝見た目の指示書」と覚えておけば十分です。
CSSだけでWebページは作れる？
作れません。CSSはHTMLに見た目を着せる言葉なので、先にHTMLの骨組みが必要です。骨組みが先、着せ替えは後、という順番です。
HTMLとCSSはどっちから勉強すればいい？
HTMLが先です。CSSは「HTMLのどこを、どうするか」を書く言葉なので、HTMLの見出しや段落がわかっていると、CSSもすんなり頭に入ります。