CSSとは？初心者向け｜仕組みと基本をやさしく解説

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

これまでの記事では、HTMLを使って、
Webページの「中身（文字や構造）」を作ってきましたよね。

しかし、HTMLだけだと―
文字が黒くて、背景は白。
ちょっと味気ないページになってしまいます。

そこで登場するのがCSSです！

今回は、CSSとは何かを初心者向けに、
仕組みと基本を解説していきます✨️

CSSとは？HTMLとの役割の違い
CSSを使うと何ができるの？
CSSの基本の書き方を見てみよう
CSSはどこに書くの？
<style>タグの役割
実際にCSSを使ってみよう
まとめ｜CSSはページを読みやすくする魔法

CSSとは？HTMLとの役割の違い

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

名前は難しそうですが、役割はとてもシンプルです。

というのも、CSSはHTMLで作ったページの「見た目」を整えるための仕組みだからです。

HTMLが「ページの骨組み（中身）」だとすると、
一方でCSSは「インテリアやデザイン（見た目）」を担当します。

つまり👇️

HTMLが「中身」なら、CSSは「見た目」

という関係です✨️

CSSを使うと何ができるの？

では次に、CSSでできることを見ていきましょう。

CSSを使うと、ページの印象をガラッと変えられます。
たとえば次のようなことが可能です。

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

CSSは、ページに
「読みやすさ」と「おしゃれ」をプラスしてくれる存在なんです🎨

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」でOK！

<style>タグの役割

内部CSSを書くときは、HTMLの中に
<style>タグを使います。

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

この <style> タグは、

「ここからCSSが始まりますよ！」と
ブラウザに伝える役割があります。

そのため、HTMLでは
「中身」と「デザイン」を分けて書くのが基本です。

実際にCSSを使ってみよう

<!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>