CSSでサイズや色、境界線を設定する

今回のゴール

CSSを使って、文字や要素の色やサイズを指定できるようになる

具体的には:

• サイズの単位（px, em, rem, %）を使い分けられる
• 色の指定方法（キーワード、16進RGB）を理解する
• 境界線（border）のスタイルを設定できる

サイズを指定できるプロパティの例

CSSにはサイズを指定できるプロパティが多数あります。

代表的なもの:

.box {
  width: 300px;
  height: 150px;
  font-size: 18px;
}

サイズの指定: px（ピクセル）

px（ピクセル） は最もよく使われるサイズ単位です。

特徴:

• 絶対単位: 画面のピクセル数で固定される
• どのデバイスでも同じピクセル数で表示される
• 精密なデザインに適している

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

サイズの指定: em

em は親要素のフォントサイズを基準にした相対単位です。

.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em; /* 20px × 1.5 = 30px */
}

特徴:

• 親要素のフォントサイズを基準に計算される
• 入れ子になると、サイズが掛け合わされていく

em の注意点: 入れ子での計算

emは入れ子になると累積して計算されます。

<div class="level1">
  レベル1
  <div class="level2">
    レベル2
    <div class="level3">レベル3</div>
  </div>
</div>

.level1 { font-size: 1.5em; } /* 基準 × 1.5 */
.level2 { font-size: 1.5em; } /* 基準 × 1.5 × 1.5 */
.level3 { font-size: 1.5em; } /* 基準 × 1.5 × 1.5 × 1.5 */

入れ子が深くなるほど、フォントサイズが大きくなります。

サイズの指定: rem

rem はルート要素（html）のフォントサイズを基準にした相対単位です。

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem; /* 16px × 2 = 32px */
}
p {
  font-size: 1rem; /* 16px × 1 = 16px */
}

特徴:

• 常にhtml要素のフォントサイズを基準に計算
• 入れ子になっても累積しない（予測しやすい）

em と rem の違い

/* remは常にhtml基準なので予測しやすい */
html { font-size: 16px; }
.title { font-size: 1.5rem; } /* 常に24px */
.subtitle { font-size: 1.25rem; } /* 常に20px */

サイズの指定: パーセント値

パーセント値（%） は親要素のサイズに対する割合を指定します。

.container {
  width: 800px;
}
.box {
  width: 50%; /* 800px × 0.5 = 400px */
}

特徴:

• 親要素のサイズを基準に計算される

パーセント値の例

<div class="wrapper">
  <div class="percent40">40%幅</div>
  <div class="percent80">80%幅</div>
</div>

.wrapper {
  width: 400px;
}
.percent40 {
  width: 40%; /* 親の40% = 160px */
}
.percent80 {
  width: 80%; /* 親の80% = 320px */
}

例: MDN Playground

どういう場合に px, em, rem, % を使い分けるのか

色を指定できるプロパティの例

CSSには色を指定できるプロパティが多数あります。

代表的なもの:

h1 {
  color: navy;
  background-color: lightyellow;
}

色の指定: 色キーワード

色キーワードは、色を英語の名前で指定する方法です。

h1 {
  color: blue;
}
p {
  background-color: lightblue;
}
.warning {
  color: red;
}

色の指定: 16進RGB

16進RGBは、色を #RRGGBB の形式で指定する方法です。
RRGGBB の部分には 0-9 と a-f の16進数を使います。

h1 {
  color: #ff0000; /* 赤 */
}
p {
  background-color: #0066cc; /* 青 */
}

• RR: 赤の強さ（00が最小、ffが最大）
• GG: 緑の強さ（00が最小、ffが最大）
• BB: 青の強さ（00が最小、ffが最大）

16進RGB の例

.box1 { color: #ff0000; } /* 赤 */
.box2 { color: #00ff00; } /* 緑 */
.box3 { color: #0000ff; } /* 青 */
.box4 { color: #ffffff; } /* 白 */
.box5 { color: #000000; } /* 黒 */

16進RGB の省略形

同じ数字が連続する場合、3桁に省略できます。

/* 6桁 */
color: #ff0000;
color: #00ff00;
color: #ffffff;

/* 3桁（省略形） */
color: #f00; /* #ff0000 と同じ */
color: #0f0; /* #00ff00 と同じ */
color: #fff; /* #ffffff と同じ */

それ以外の色の指定方法（参考）

CSSでは他にも色を指定する方法があります。

rgb() 関数 (赤, 緑, 青)

color: rgb(255, 99, 71); /* トマト色 */

rgba() 関数 (aで透明度を指定)

background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */

hsl() 関数 (色相, 彩度, 明度)

color: hsl(120, 100%, 50%); /* 鮮やかな緑 */

境界線のスタイル指定: border

border プロパティを使うと、要素に境界線を追加できます。

.box {
  border: 2px solid black;
}

borderは3つの値を一度に指定できます:

• 太さ: 2px
• スタイル: solid（実線） (他に none (なし), dashed (破線) など)
• 色: black

例: MDN Playground

特定の辺だけ境界線のスタイルを指定する

.underline {
  border-bottom: 2px solid black;
}

例: MDN Playground

角の丸め: border-radius

border-radius プロパティを使うと、ボックスの角を丸めることができます。

.rounded {
  border-radius: 10px;
}
.more-rounded {
  border-radius: 20px;
}

値が大きいほど、角が丸くなります。

例: 円形のテキストボックスを作る

border-radius に 50% を指定し、 background-color を組み合わせると、円形のテキストボックスが作れます。

.circle {
  width: 200px;
  height: 200px;
  background-color: black;
  border-radius: 50%;
  color: white;
}

まとめ

• サイズの単位: px（固定）、em（親要素基準）、rem（ルート要素基準）、%（親要素の割合）
• 色の指定: 色キーワード（red, blueなど）、16進RGB（#ff0000）
• 境界線: borderで太さ・スタイル・色を指定。border-top, border-bottomなどで一辺だけの指定もできる
• 角丸: border-radiusで角を丸める

さらに学ぶには

• CSSの値と単位
• 背景と境界線