HTML&CSSコーディング
テキストをレイアウトするプロパティ

CSSコードの書き方がわかったら、あとは主なプロパティを覚えていきます。

プロパティの数自体はとても多いですが、実用的なものは限られているので、コーディングしているうちに自然と覚えると思います。

ここでは、テキスト（文字）をレイアウトまたはデザインするCSSプロパティをわかりやすく解説します。

CSSを反映させるHTMLコード

以下、pタグに対してプロパティを設定していきます。

<p>今日は晴れでした。</p>

文字の色（color）

colorプロパティを使うと、文字の色を指定できます。

値には決まったカラーネームやカラーコードが使えます。

ここでは、カラーネームでを使います。

p {
  color: red;
}

文字の大きさ（font-size）

font-sizeプロパティを使うと、文字の大きさを指定できます。

値にはpx、em、%などが使えます。ここでは、pxを使います。

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

文字の太さ（font-weight）

font-weightプロパティを使うと、文字の太さを指定できます。

値にはnormal（標準）、bold（太字）などのキーワードの他、100、200、300・・・900の数値を取れます（数値で細かく指定してもフォントが対応していない場合があります）。

ここでは、キーワードで指定します。

p {
  color: red;
  font-size: 30px;
  font-weight: bold;
}

フォントの種類（font-family）

font-familyプロパティを使うと、フォントの種類を指定できます。

値にはフォント名やキーワード（sans-serif、serifなど、総称フォントといいます）が使えます。

値として記述するとき、フォント名はクオーテーションで囲み、キーワードは囲みません。

また、指定したフォントがユーザーの環境にはない場合に備えて、優先度の高い順に列記することができます。その場合は , で区切ります。

p {
  color: red;
  font-size: 30px;
  font-weight: bold;
  font-family: "メイリオ", "游ゴシック体", sans-serif;
}

テキストの中央寄せ、左右寄せ（text-align）

text-alignプロパティを使うと、テキストなどを中央に寄せたり、左右に寄せたりできます。

値には、左寄せの場合はleft、中央寄せの場合はcenter、右寄せの場合はrightを取ります。

ここでは中央寄せにしてみます。

p {
  color: red;
  font-size: 30px;
  font-weight: bold;
  font-family: "メイリオ", "游ゴシック体", sans-serif;
  text-align: center;
}