CSSとは？初心者向けに基本をわかりやすく解説

こんにちは！駆け出しエンジニアのまるです👓🦍

これまでの記事では、HTMLで「ページの中身」を作ってきましたね。

今回はそのページを見やすく・おしゃれに整えるための言葉、

CSS（シー・エス・エス） について紹介していきます！

CSSとは？
CSSでできること
CSSの基本の書き方
CSSはどこにかくの？
<style>タグの役割
実際に試してみよう
まとめ

CSSとは？

CSSは 「Cascading Style Sheets（カスケーディング・スタイル・シート）」 の略です。

ちょっと長い名前ですが、簡単に言うと――

👉 HTMLで作ったページの“見た目”を整えるための言葉 です。

HTMLが「ページの骨組み（中身）」なら、

CSSは「インテリアやデザイン（見た目）」のような存在です。

たとえば、HTMLだけのページはこんな感じ👇

そこにCSSを使うと、

HTMLだけだと文字がベタっとして詰まっていて読みにくいですが、CSSを使うと背景・余白・文字サイズを整えて、一気に”読みやすいデザイン”になります。

まずはこのように、「見た目を変える」体験をしてみるのがおすすめです！

CSSでできること

CSSを使うと、ページの印象をガラッと変えられます！

できること	指示する言葉（プロパティ）
文字の色を変える	color
背景の色を変える	background-color
文字の大きさを変える	font-size
文字の位置を変える	text-align
余白を作る	margin / padding

cssは、ページに”おしゃれ”と”読みやすさ”をくれる魔法の道具なんだよ✨

CSSの基本の書き方

CSSはこんな形で書きます👇

p {
  color: blue;
  font-size: 18px;
}

これを読むときのポイントは3つです👇

p → どこにデザインを当てるか（HTMLのタグ名）
{ } → その中にデザインの内容を書く
color: blue; → 「文字の色を青にする」という意味

つまり、CSSは「どの部分に、どんな見た目を指定するか」を書くだけなんです。

ルールの豆知識

・各行の最後に「 ; (セミコロン)」をつける

・半角英数字で書く（全角だと動きません！）

CSSはどこにかくの？

CSSの書き方には3つの方法があります👇

方法	書く場所	特徴
インラインCSS	HTMLタグの中に直接書く	ちょっと試すとき用
内部CSS	<style> タグの中に書く	小さなページや練習に最適
外部CSS	.css ファイルに書く	本格的なサイトで使う方法（次回紹介）

はじめのうちは「内部CSS」で十分です！

<style>タグの役割

内部CSSを書くときは、HTMLの中に次のように書きます👇

<style>
h1 {
  color: orange;
}
p {
  font-size: 18px;
  color: gray;
}
</style>

この <style> タグは、

**「ここからCSSが始まります！」**という印のようなものです。

HTMLの中では、「構造（中身）」と「デザイン（見た目）」を分けて書くのが基本なので、

この <style> タグは、ページ情報をまとめる <head> の中に書きます。

<head>
  <meta charset="UTF-8">
  <title>CSSの練習</title>

  <style>
    h1 {
      color: orange;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>

👉 これで、ブラウザは「このページのデザインはここに書いてあるんだな！」と理解します。

実際に試してみよう

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>CSSの練習</title>
    <style>
      h1 {
        color: orange;
      }
      p {
        color: gray;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>CSSを使ってみよう！</h1>
    <p>これは段落の文章です。</p>
  </body>
</html>