CSS（Cascading Style Sheets）について

CSSとは？

CSS（カスケーディング・スタイル・シート）は、HTMLで作成されたWebページの見た目（デザイン）を制御するためのスタイル指定言語です。
色、文字サイズ、余白、レイアウトなどをHTMLから分離して指定できます。

CSSの3つの書き方

• インラインスタイル（HTML要素内に直接書く）
• 内部スタイルシート（<style>タグ内に書く）
• 外部スタイルシート（CSSファイルをHTMLから読み込む）

インラインスタイルの例

<p style="color:red;">赤い文字です。</p>

内部スタイルシートの例

<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>
  

外部スタイルシートの例

<link rel="stylesheet" href="style.css">

基本的なCSSの構文

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

例：

h1 {
  color: green;
  font-size: 24px;
}
  

よく使うプロパティ

• color：文字色
• background-color：背景色
• font-size：文字サイズ
• text-align：文字の配置（left, center, right）
• margin：外側の余白
• padding：内側の余白
• border：枠線
• width / height：幅・高さ

セレクタの種類

• 要素セレクタ（例：p、h1）
• クラスセレクタ（例：.box）
• IDセレクタ（例：#header）
• 属性セレクタ（例：input[type="text"]）
• 子孫セレクタ、疑似クラス（例：a:hover）など

CSSを使うメリット

• HTML構造とデザインを分離できる
• 複数ページに同じデザインを適用できる
• 保守性・再利用性が高まる
• レスポンシブデザインにも対応しやすい

まとめ

• CSSはWebページの見た目を整えるスタイル指定言語
• インライン・内部・外部の3つの記述方法がある
• 色、余白、フォントなどの指定が可能
• HTMLと分けて管理することで、効率よくデザインできる