ここは <main> 領域です。中央コンテンツが広く表示され、読みやすさを重視しています。
📐 Grid使用箇所（CSS）
/* グリッド全体のレイアウト */
body {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 1fr 3fr 1.2fr;
gap: 12px;
}
/* 各エリアの配置指定 */
header { grid-area: header; } /* 上部タイトル */
nav { grid-area: nav; } /* 左側ナビゲーション */
main { grid-area: main; } /* 中央メインコンテンツ */
aside { grid-area: aside; } /* 右側の補足エリア */
footer { grid-area: footer; } /* 最下部フッター */
🧱 Grid構造のHTML
<body>
<header>...</header>
<main>...</main>
<nav>...</nav>
<aside>...</aside>
<footer>...</footer>
</body>