まず最初に前回保留にした上面の空きの修正方法を整理します。これは、全称セレクタ（ユニバーサルセレクター）を指定することで、すべての要素を対象にスタイルを適用するセレクターとしてアスタリスク（ * ）を記述します。CSSファイル内に以下のブロックを追加記述します。
/* rule.css */
* {
margin: 0px;
padding: 0px;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>森のお菓子屋さん</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rule.css">
</head>
<body>
<div id="main_box">
<div id="header">
</div>
<div id="side_menu">
<div class="menu_button">
<!-- indexへの移動ボタン -->
</div>
<div class="menu_button">
<!-- page01への移動ボタン -->
</div>
<div class="menu_button">
<!-- ipage02への移動ボタン -->
</div>
<div class="menu_button">
<!-- page03への移動ボタン -->
</div>
</div>
<div id="content">
<div id="main_picture"> <!-- main_picture宣言 -->
</div> <!-- main_picture宣言終了 -->
</div>
</div>
</body>
</html>
<!-- index.html -->
/* rule.css */
@charset "UTF-8";
* { /* 全称セレクタ設定 */
margin: 0px;
padding: 0px;
}
body {
background: #edfd8e;
}
div#main_box {
height: 600px;
width: 800px;
background: #ff69b4;
margin: 0px auto;
}
div#header {
height: 80px;
width: 100%;
background: #f8844e;
}
div#side_menu {
float: left; /* 左寄せ設定
floatプロパティは、
指定された要素を左あるいは右に寄せて配置する際に使用。
直後に続く内容は、その反対側に回り込む。*/
height: 520px;
width: 25%;
background: #63dada;
}
div.menu_button { /* class設定 */
margin: 24px auto;
height: 100px;
width: 100px;
background: #ffffff;
}
div#content {
float: right; /* 左寄せ設定 */
height: 520px;
width: 75%;
background: #4ff1ae;
}
div#main_picture {
margin: 24px auto;
height: 360px;
width: 480px;
background: #ffffff;
}
/* rule.css */
