Zenn
📝

CSS基本講座1 基本の書き方

に公開
CSS
HTML
tech

こんにちは！
今回は、Webページの見た目を整えるための言語 CSS の基本的な書き方について解説します。

CSS基本講座1 基本の書き方

CSSとは？

📌 使いどころ
CSS（Cascading Style Sheets）は、HTMLで作った要素の「見た目（デザイン）」を装飾するための言語です。

📖 説明
文字の色やサイズ、余白、背景色、レイアウトなど、Webページを美しく整えるのに欠かせない技術です。

HTMLだけでは、素朴といいますか、なんとも寂しい見た目になってしまいます...

そこで、CSSで色や背景などの見た目の部分を調整してあげることで、かっこいいWEBページを作ることができるようになります！

💡 CSSの例

CSSの基本構文

📖 書き方のルール

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

🧠 用語の意味

セレクタ
「どの要素にスタイルを適用するか」を指定します。

プロパティ
変更したい見た目の種類（色、サイズなど）を指定します。

値
プロパティに設定する具体的な値を指定します。

💡 例
pタグの文字色を青色に指定するときは以下のように書きます。

p {
  color: blue;
}

セレクタの部分には要素名であるpタグのpを指定しています。
プロパティは色を指定するためのcolor、値は青色なのでblueと指定します。

※プロパティや値の種類については次の講義以降どんどん紹介していく予定です！

IDとクラス

先ほど、pタグの文字色を指定する際は、セレクタに要素名であるpと指定しました。

このように対象の要素名を使って指定することも可能なのですが、こうするとWEBページにあるpタグの文字色が全て青色になってしまいます...

少し使いづらいですよね。
pタグ全部ではなく、「ここの文章だけ青くしたい！」とか「こことここだけ青くしたい！」などが出来ればよいのですが...

ということで、もちろんできるので、その方法をご紹介しますね。

それがIDやクラスといったものをセレクタに指定する方法です。

📌 使いどころ
HTMLで要素にCSSを当てるには、id や class 属性を使って「目印（ラベル）」をつけます。
そうすることで、目印を付けたところだけに特定のCSSのデザインをあてることができます。
便利ですね～。

📖 違いの比較

項目 ID クラス
書き方（HTML） id="main" class="title"
書き方（CSS） #main { ... } .title { ... }
対象 1つの要素に対して1回のみ 複数の要素に共通で使える
用途例 特定の1か所にだけスタイル適用 汎用的なスタイルを複数に適用したいとき

💡 例

👨‍🏫 ポイント

  • id はページ内で 一意（ユニーク） に使う。1ページに同じ id を複数使うのはNG。
  • class は 複数の要素に繰り返し使える。同じ見た目にしたいときに便利。

IDとクラスを使い分けることで、HTMLとCSSの設計が整理され、保守性もアップします！

まとめ

CSSを使えば、Webページを自分好みに自由にデザインできるようになります！
まずは基本的なセレクタとプロパティから使ってみましょう！

Discussion