本文したい(body)
<!DOCTYPE html>
<html lang="ja">
<head>...</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
bodyタグは、ブラウザの画面に表示される内容をすべて囲むタグです。
htmlタグの直下に1つだけ置き、headタグの後に書きます。
見出し、段落、画像、ナビゲーションなど、利用者が見るものはすべてbodyの中に入ります。
bodyの外(headの中)に書いた内容は画面に表示されません。
フォントしたい(font-family)
body {
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.7;
color: #333333;
}
font-family、line-height、colorなどの継承可能なプロパティは、bodyにまとめて指定しておくと便利です。
注釈
remの基準になるfont-sizeは、bodyではなくhtmlに指定します。
中央寄せしたい(margin)
body {
max-width: 720px;
margin: 0 auto;
padding: 0 1rem;
}
margin: 0 autoで、ページ両端の余白を自動設定して中央寄せにできます。
このとき、width(もしくはmax-width)でページ幅(の上限)を設定します。
背景色したい(background-color)
body {
background-color: #ffffff;
}
background-colorプロパティで、ページ全体の背景色を変更できます。
注釈
内容が短いページでは画面下部に地の色(htmlの背景色)が見えてしまいます。