CSS初期設定テンプレート：サイト全体のフォントと背景を整える基本方法
📝 使用用途
このテンプレートでは、サイト全体に共通するフォントと背景色を設定するCSSコードを示します。背景色は薄い青(#e0f7fa)に、フォントはArial、文字サイズは18pxに設定されています。
📘 解説
下記のコードでは、`body`タグに共通フォント、背景色、文字サイズを設定しています。これにより、全ページで同一のスタイルが適用され、統一感のあるデザインになります。
🔹 部分コード（フォント・背景設定）
/* 共通フォントと背景設定 */
body {
font-family: 'Arial', sans-serif; /* フォント */
background-color: #e0f7fa; /* 背景色 */
color: #333; /* 文字色 */
font-size: 18px; /* フォントサイズ */
line-height: 1.6; /* 行間 */
margin: 0;
padding: 0;
}
💻 完全動作コード（フォント・背景設定）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS フォント・背景設定のデモ</title>
<style>
/* 共通フォントと背景設定 */
body {
font-family: 'Arial', sans-serif; /* フォント */
background-color: #e0f7fa; /* 背景色 */
color: #333; /* 文字色 */
font-size: 18px; /* フォントサイズ */
line-height: 1.6; /* 行間 */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>サイト全体のフォントと背景の初期設定</h2>
<p>このページではサイト全体のフォントと背景色を設定しています。フォントはArial、背景色は#e0f7fa（薄い青）です。</p>
</body>
</html>
🔲 フォントと背景のサンプル
下記のボタンをクリックして、背景色とフォントを切り替えてみてください。
🧩 応用と活用方法
サイト全体のフォントと背景を統一することで、ユーザー体験の向上とブランドイメージの統一が図れます。特にfont-familyプロパティでは、'Arial', sans-serifのように複数のフォントを指定することで、最初のフォントが利用できない環境でも代替フォントが適用されます。
📌 背景色の選び方のコツ
背景色は#e0f7faのような薄い色を選ぶと、長時間閲覧しても目が疲れにくくなります。また、background-colorとcolorのコントラスト比は4.5:1以上（WCAG AA基準）を確保しましょう。ツールを使えば簡単にチェックできます。
⚙️ レスポンシブ対応のポイント
モバイルデバイス向けに、@mediaクエリを使ってフォントサイズを調整すると良いでしょう。例えば@media (max-width: 768px) { body { font-size: 16px; } }のように設定します。これで小さな画面でも読みやすくなります。
ダークモード対応も考慮する場合、@media (prefers-color-scheme: dark)を使って背景色と文字色を反転させる方法があります。例えばbackground-color: #1a1a1a; color: #f0f0f0;のような設定が可能です。
これらの設定はCSS変数（--main-bg-colorなど）を使って一元管理すると、後からの変更が容易になります。特に大規模サイトではこの手法が有効です。