CSS基礎

CSSってなに？

CSSは、Webページの見た目（デザイン）を整えるための言語です。

HTMLが「構造・意味」を担当するのに対して、
CSSは次のような役割を持ちます。

• 文字の色・大きさ
• レイアウト（配置）
• 余白
• 背景色
• 枠線 など

つまりCSSは、Webページの見た目担当です。

CSSでできること

CSSを使うと、次のような指定ができます。

• 文字色を変える
• 文字サイズを変える
• 要素を横並びにする
• 余白を調整する
• 画面サイズに応じてデザインを変える

HTMLだけだと地味なページでも、
CSSを加えることで見た目が整います。

CSSの基本的な書き方

CSSは、「どの要素に」「何を」「どうするか」　で書きます。

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

例：

p {
  color: red;
  font-size: 16px;
}

• p：セレクタ
• color：プロパティ
• red：値

「pタグの文字色を赤にする」という意味です。

CSSの書き方の種類

① 外部CSS

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

p {
  color: blue;
}

② 内部CSS

<style>
  p {
    color: blue;
  }
</style>

③ インラインCSS

<p style="color: blue;">文章</p>

※ 実務では 外部CSSが基本 です。

CSSの指定方法（セレクタの種類）

タグセレクタ

p {
  color: red;
}

クラスセレクタ

<p class="text">文章</p>

.text {
  color: blue;
}

IDセレクタ

<h1 id="title">タイトル</h1>

#title {
  font-size: 24px;
}

よく使うCSSプロパティ

① 文字・テキスト系

プロパティ	役割
color	文字色
font-size	文字サイズ
font-weight	太さ
text-align	文字揃え

p {
  color: black;
  font-size: 16px;
}

② サイズ・余白系

プロパティ	役割
width	横幅
height	高さ
margin	外側の余白
padding	内側の余白

.box {
  width: 300px;
  padding: 16px;
}

③ 枠線・背景系

プロパティ	役割
border	枠線
background-color	背景色
border-radius	角丸

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
}

レイアウト関連（Flexbox）

.container {
  display: flex;
  justify-content: space-between;
}

Flexboxを使うと、

• 横並び
• 中央揃え
• 余白調整

が簡単にできます。

CSSを書くときの注意点

• HTMLは構造、CSSは見た目
• 見た目調整をHTMLに書かない
• 同じ指定はまとめる

<!-- ❌ 非推奨 -->
<p style="color:red;">文章</p>

/* ⭕ 推奨 */
p {
  color: red;
}

まとめ

• CSSはWebページの見た目を整える言語
• HTMLと役割が分かれている
• 基本は「セレクタ + プロパティ + 値」
• レイアウトはFlexboxから覚えるのがおすすめ