CSS
初級読み方：シーエスエス｜英語：CSS
Cascading Style Sheets の略で、HTMLで作った構造に色・大きさ・配置などの見た目を付ける言語だよ。いつ使う？ 文字の色を変えたい、レイアウトを整えたい、ボタンをおしゃれにしたいなど、ページの見た目を変えるときに必ず使うよ。間違いやすいポイント: CSSファイルを作っただけではHTMLに反映されないよ。<link rel="stylesheet" href="style.css">でHTMLから読み込む必要があるよ。ファイル名のスペルミスにも注意しよう。
やさしい説明
CSS（シーエスエス）とは、Webページの見た目を整える言語です。正式名称は「Cascading Style Sheets」です。
HTMLが「内容と構造」を作るのに対し、CSSは「色・サイズ・配置・アニメーション」を担当します。HTMLだけだと白黒で味気ないページですが、CSSを加えるとカラフルで見やすいデザインになります。
書き方は「セレクタ { プロパティ: 値; }」の形です。「どの要素の」「何を」「どう変えるか」を指定します。
具体例・使い方
/* 見出しを青く大きく */
h1 {
color: blue;
font-size: 2rem;
}
/* カードにデザインを適用 */
.card {
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}いつ使う？
Webページを作るときは必ずHTMLとセットで使います。文字の色を変える、余白を調整する、レイアウトを作る——見た目に関することはすべてCSSの仕事です。
間違いやすいポイント
❌ HTMLファイルにCSSを読み込み忘れる
<!-- headの中にlinkタグを書く -->
<link rel="stylesheet" href="style.css">CSSファイルを作っても、HTMLから読み込まないとスタイルが適用されません。
よくある疑問
Q: CSSを書き忘れるとどうなる？
A: HTMLの初期スタイルだけで表示されます。文字は黒、背景は白、リンクは青のシンプルな見た目になります。
Q: CSSの書き方は何種類ある？
A: ①外部ファイル（<link>で読み込み）②<style>タグ内に書く ③インラインスタイル（style属性）の3種類。外部ファイルが最も推奨されます。
Q: CSSが反映されないときは？
A: ①<link>タグのhrefパスが正しいか ②ブラウザのキャッシュ（Ctrl+Shift+Rでスーパーリロード）③セレクタのスペルミス、の3つを確認しましょう。
関連用語
📖 関連レッスン
レッスンを見る →