第2回: CSSの基本とスタイリングのルール

CSSとは何か

HTML ＝ 構造（骨組み）
CSS ＝ 見た目

CSSを使うと・・・

• 色を変えられる
• 文字サイズを変えられる
• 余白を調整できる
• レイアウトを整えられる

CSSファイルを読み込んでみよう

① CSSファイルを作成

css/style.cssを作成する

② HTML内でCSSを読み込む

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

これを書かなければCSSは効かない

③ セレクタとclass

「どこに適用するか」を指定＝セレクタという

タグ指定

p {
  color: #333;
}

→ すべてのpタグに適用

class指定

<p class="highlight">重要なお知らせです</p>

.highlight {
  color: red;
  font-weight: bold;
}

.highlightの. は「class」を意味します。

実務ではほとんどclassを使います。

④ 文字を装飾してみよう

p {
  color: #333;          /* 文字色 */
  font-size: 18px;      /* 文字サイズ */
  font-weight: bold;    /* 太さ */
  line-height: 1.8;     /* 行間 */
  letter-spacing: 2px;  /* 文字間 */
}

CSSを使うと文字の見た目を自由に変えられます。

よく使うプロパティ：

• color → 文字色
• font-size → 文字サイズ
• font-weight → 太さ
• line-height → 行間

⑤ ボックスモデル（超重要）

HTML要素はすべて「箱（ボックス）」です。

箱は4つの層でできています。

• content（中身）
• padding（内側の余白）
• border（枠線）
• margin（外側の余白）

実際に書いてみよう

.box {
  margin: 20px;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  background-color: #f5f5f5;
}

余白を作る

.box {
  margin: 20px;   /* 外側の余白 */
  padding: 20px;  /* 内側の余白 */
}

境界線をつける

.box {
  border: 2px solid #333;
  border-radius: 10px;
}

border → 枠線
border-radius → 角丸

背景色をつける

.box {
  background-color: #f5f5f5;
}

文字を中央揃えにする

text-align: center;

⑥ ブロック要素とインライン要素

• ブロック要素：横幅いっぱい（div, p, h1）
• インライン要素：文字の幅だけ（span, a）

.inline-box {
  display: inline-block;
  background: #ddd;
  padding: 10px;
}

displayを変えると振る舞いが変わります。

⑦ ボタンを作ってみよう

<a href="#" class="button">申し込む</a>

.button {
  display: inline-block;
  width: 200px;
  padding: 12px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
}

hover効果

.button:hover {
  background-color: #0056b3;
}

マウスを乗せると色が変わります。

疑似要素 after

.button::after {
  content: " →";
}

テキストの後ろに矢印を追加できます。

⑧ CSSプロパティの順番（視覚順）

.example {
  display: block;

  width: 300px;
  margin: 20px;
  padding: 20px;

  border: 1px solid #000;
  border-radius: 8px;

  background-color: #eee;

  color: #333;
  font-size: 16px;
}

レイアウト → 余白 → 枠線 → 背景 → 文字 の順で書くと見やすくなります。

⑨ CSS設計（BEM入門）

<div class="card">
  <h3 class="card__title">カードタイトル</h3>
  <p class="card__text">カードの文章です。</p>
</div>

.card {}
.card__title {}
.card__text {}
.card--large {}

• Block → card
• Element → card__title
• Modifier → card--large

ミニ課題

① 文字サイズと色を自分好みに変更する

② boxクラスを作り、余白を調整する

③ ボタンを1つ追加する

④ hoverの色を変えてみる

この回のまとめ

• CSSは見た目を整える言語
• classを使って自由に装飾できる
• HTMLは箱（ボックス）でできている
• ボタンはaタグで作れる
• CSSは整理して書くことが大事