今回の練習問題では、セレクタ（クラス・ID）の使い方 や CSSの整理 に加え、
これまで学んだプロパティの組み合わせ を実践します。
すべての問題を解くと、簡単なWebページのレイアウトが完成するので、実際にブラウザで表示しながら進めていきましょう！
準備：HTMLファイルを作成しよう
まず、次のHTMLファイル index.html を作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS総合問題</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>CSS総合問題：サイトのデザインを完成させよう！</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>サービス一覧</h2>
<p>ここにサービスの説明が入ります。</p>
</section>
</main>
<footer>
<p>© 2024 Sample Site</p>
</footer>
</body>
</html>このHTMLファイルを作成し、style.css というCSSファイルを作成して、そこに解答を書いていきましょう！
問題1：ヘッダーの背景色を変更しよう
問題: header の背景色を 濃い青（navy）、文字色を 白 にしてください。
自分で考えてみましょう！ CSSに追加するコードを記述してください。
（分からなかったらクリック）答えを見る
header {
background-color: navy;
color: white;
padding: 20px;
}解説
background-color で背景色を変更し、color で文字色を白にしています。
問題2：main の横幅を調整しよう
問題: main の横幅を 80% にし、中央揃えにしてください。
（分からなかったらクリック）答えを見る
main {
width: 80%;
margin: 0 auto;
}解説
width: 80%; で横幅を指定し、margin: 0 auto; で中央揃えにしています。
問題3：フッターを画面の下部に固定しよう
問題: footer を **画面の下部に固定** してください。
（分からなかったらクリック）答えを見る
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: navy;
color: white;
text-align: center;
padding: 10px;
}解説
position: fixed; を指定すると、要素を画面の固定位置に配置できます。
問題4：ナビゲーションメニューを横並びにしよう
問題: ul のメニューを **横並び** にしてください。
（分からなかったらクリック）答えを見る
nav ul {
display: flex;
list-style: none;
padding: 0;
}解説
display: flex; で横並びにし、list-style: none; でリストマーカーを消しています。
問題5：セクションの間隔を統一しよう
問題: section のボックスの間隔を統一してください。
（分からなかったらクリック）答えを見る
section {
padding: 20px;
border: 1px solid lightgray;
}解説
padding: 20px; で内部の余白を均等にし、border で枠線を追加しました。
まとめ
background-colorとcolorで見た目を整えられる。widthとmarginでコンテンツの幅と位置を調整できる。position: fixed;でフッターを画面下部に固定できる。display: flex;でナビゲーションメニューを横並びにできる。paddingでボックスの余白を統一できる。
コメントを残す