この章では、CSS を使って HTML 要素の見た目を変更する方法について、基本的なところを説明します。前編では、文字の色や大きさ、背景、要素の大きさや余白の調整方法について学びましょう。
1. 文字の色や大きさを変えてみよう
まずは、文字の色や大きさを変える方法について見ていきましょう。
color で文字色を変更
文字の色を変更するには、color プロパティを使います。値には、色の名前（red、blue、green など）や、カラーコード（#FF0000、#0000FF など）を指定します。
css
/* 文字色を赤にする */
p {
color: red;
}
/* 文字色を青にする */
h1 {
color: #0000FF;
}カラーコードは、# の後に 3 桁または 6 桁の 16 進数（0～9、A～F）で色を表現します。#RRGGBB の形式で、それぞれ Red、Green、Blue の強さを表します。
font-size で文字サイズを調整
文字の大きさを変更するには、font-size プロパティを使います。値には、ピクセル（px）、ポイント（pt）、パーセント（%）、em、rem などの単位を指定できます。
css
/* 文字サイズを 16px にする */
p {
font-size: 16px;
}
/* 文字サイズを 1.2em にする */
h1 {
font-size: 1.2em;
}em は親要素のフォントサイズを基準とした相対的な単位です。例えば、親要素のフォントサイズが 16px の場合、1.2em は 19.2px（16px × 1.2）になります。 remはルート（HTML）要素のフォントサイズを基準とした相対的な単位です。
font-weight で文字の太さを変更
文字の太さを変更するには、font-weight プロパティを使います。値には、normal（標準）、bold（太字）、lighter（細字）、bolder（より太く）などのキーワードや、100～900 の数値（400 が normal、700 が bold と同等）を指定できます。
css
/* 文字を太字にする */
p {
font-weight: bold;
}
/* 文字の太さを 700 にする */
h1 {
font-weight: 700;
}font-family でフォントの種類を変更
フォントの種類を変更するには、font-family プロパティを使います。値には、フォント名（Arial、Helvetica、Times New Roman など）を指定します。複数のフォント名をカンマで区切って指定することもでき、その場合は、ブラウザが対応している最初のフォントが適用されます。
css
/* フォントを Arial にする */
p {
font-family: Arial, sans-serif;
}
/* フォントを Times New Roman にする */
h1 {
font-family: 'Times New Roman', serif;
}sans-serif や serif は総称フォントファミリーと呼ばれ、特定のフォント名ではなく、ゴシック体や明朝体などのフォントの分類を指定します。
text-align で文字揃えを設定
文字の揃え方を変更するには、text-align プロパティを使います。値には、left（左揃え）、center（中央揃え）、right（右揃え）、justify（両端揃え）などを指定できます。
css
/* 文字を中央揃えにする */
p {
text-align: center;
}
/* 文字を右揃えにする */
h1 {
text-align: right;
}2. 背景の色や画像を設定しよう
次に、要素の背景に色をつけたり、画像を設定したりする方法を紹介します。
background-color で背景色を指定
要素の背景色を設定するには、background-color プロパティを使います。値には、color プロパティと同様に、色の名前やカラーコードを指定できます。
css
/* 背景色を薄いグレーにする */
body {
background-color: #EEEEEE;
}
/* 背景色を黄色にする */
h1 {
background-color: yellow;
}background-image で背景画像を設定
要素の背景に画像を設定するには、background-image プロパティを使います。値には、url() 関数を使って画像ファイルのパスを指定します。
css
/* 背景に画像を設定する */
body {
background-image: url("images/background.jpg");
}background-repeat で画像の繰り返しを制御
背景画像は、デフォルトではタイル状に繰り返し表示されます。background-repeat プロパティを使うと、画像の繰り返し方を制御できます。
css
/* 背景画像の繰り返しをなくす */
body {
background-image: url("images/background.jpg");
background-repeat: no-repeat;
}repeat：画像をタイル状に繰り返します（デフォルト）。no-repeat：画像を繰り返しません。repeat-x：画像を水平方向にのみ繰り返します。repeat-y：画像を垂直方向にのみ繰り返します。
background-position で画像の位置を調整
background-position プロパティを使うと、背景画像の位置を調整できます。値には、キーワード（top、bottom、left、right、center）や、パーセント（%）、ピクセル（px）などを指定できます。
css
/* 背景画像を右下に表示する */
body {
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-position: right bottom;
}background-size で画像のサイズを調整
background-size プロパティを使うと、背景画像のサイズを調整できます。値には、cover、contain、パーセント（%）、ピクセル（px）などを指定できます。
css
/* 背景画像を要素いっぱいに広げる */
body {
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}cover：要素を完全に覆うように、画像の縦横比を維持したまま、画像を拡大・縮小します。contain：画像の縦横比を維持したまま、画像が要素内に収まるように、画像を拡大・縮小します。
3. 要素の大きさと余白を調整しよう
最後に、要素の大きさや余白を調整する方法を見ていきましょう。
width と height でサイズを指定
要素の幅と高さを指定するには、width プロパティと height プロパティを使います。値には、ピクセル（px）、パーセント（%）、em などの単位を指定できます。
css
/* 幅を 300px にする */
div {
width: 300px;
}
/* 高さを 200px にする */
img {
height: 200px;
}margin で外側の余白を設定
要素の外側の余白（マージン）を設定するには、margin プロパティを使います。値には、ピクセル（px）、パーセント（%）、em などの単位を指定できます。
css
/* 上下左右の余白を 20px にする */
div {
margin: 20px;
}
/* 上下の余白を 10px、左右の余白を 30px にする */
p {
margin: 10px 30px;
}
/* 上の余白を 15px、右の余白を 5px、下の余白を 20px、左の余白を 10px にする */
h1 {
margin: 15px 5px 20px 10px;
}値を 1 つだけ指定した場合は、上下左右すべての余白に同じ値が適用されます。値を 2 つ指定した場合は、1 つ目が上下、2 つ目が左右の余白に適用されます。値を 4 つ指定した場合は、上、右、下、左の順に余白が適用されます（時計回り）。
padding で内側の余白を設定
要素の内側の余白（パディング）を設定するには、padding プロパティを使います。値の指定方法は margin プロパティと同じです。
css
/* 上下左右の余白を 20px にする */
div {
padding: 20px;
}
/* 上下の余白を 10px、左右の余白を 30px にする */
p {
padding: 10px 30px;
}border で枠線を追加
要素に枠線を追加するには、border プロパティを使います。値には、線の太さ、線の種類、線の色を指定します。
css
/* 太さ 1px、実線、黒色の枠線を追加する */
div {
border: 1px solid black;
}
/* 太さ 3px、点線、赤色の枠線を追加する */
p {
border: 3px dotted red;
}線の種類には、solid（実線）、dotted（点線）、dashed（破線）、double（二重線）などがあります。
ボックスモデルって何？
HTML のすべての要素は、ボックスモデルと呼ばれる長方形の領域として扱われます。ボックスモデルは、コンテンツ領域、パディング領域、ボーダー領域、マージン領域の 4 つの部分で構成されています。
- コンテンツ領域：要素の内容（テキストや画像など）が表示される領域です。
- パディング領域：コンテンツ領域とボーダー領域の間の余白です。
- ボーダー領域：要素の枠線です。
- マージン領域：ボーダー領域の外側の余白です。
width プロパティや height プロパティで要素のサイズを指定すると、それはコンテンツ領域のサイズを意味します。つまり、実際の要素のサイズは、コンテンツ領域のサイズに加えて、パディング、ボーダー、マージンのサイズが含まれることになります。