サイトのタイトル

/* 全体の設定 (リセット) */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } /* ヘッダー */ header { background-color: #007bff; /* 青色 */ color: white; padding: 20px; text-align: center; } header h1 { margin: 0; } /* ナビゲーションメニュー */ nav ul { list-style: none; /* リストの点を非表示 */ padding: 0; margin-top: 10px; } nav ul li { display: inline; /* 横並びにする */ margin: 0 15px; } nav ul li a { color: white; text-decoration: none; /* 下線を非表示 */ } /* コンテンツ全体を中央に寄せるためのコンテナ */ .container { width: 90%; max-width: 1200px; /* 最大幅を設定 */ margin: 20px auto; /* 上下20px、左右中央揃え */ display: flex; /* Flexboxを使ってメインとサイドバーをレイアウト */ gap: 20px; /* 要素間の隙間 */ } /* メインコンテンツエリア */ main { flex: 3; /* サイドバーの3倍の幅を取る */ background-color: white; padding: 20px; border-radius: 8px; /* 角を丸くする */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影をつける */ } /* サイドバー */ aside { flex: 1; /* メインの1倍の幅を取る */ background-color: #e9ecef; /* 少し薄い灰色 */ padding: 20px; border-radius: 8px; } aside ul { list-style: none; padding: 0; } /* フッター */ footer { background-color: #333; color: white; text-align: center; padding: 10px; margin-top: 20px; }