<!DOCTYPE html>
<html lang="ja">
<head>
<title>森のお菓子屋さん</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="rule.css"> <!-- cssファイル指定
ファイル名の"rule.css"以外はお呪いのようなものと理解 -->
</head>
<body> <!-- 設定をデフォルトに -->
<div id="main_box"> <!-- main_box宣言
idの他にclassがある（後述）
「DIV」とは、特別意味のあるタグではないが、
囲った部分をブロックレベル要素としてグループ化することができる。 -->
</div> <!-- main_box宣言終了 -->
</body>
</html>
<!-- index.html -->
■css（Cascading Style Sheets、カスケーディング・スタイル・シート）ファイル（rule.css）の記述はhtmlとかなり異なります。
まず<!--と-->で鋏まれた部分がコメント文となります。
命令は大括弧"{}"の中記述します。また、オプション設定はコロン":"の後にパラメーター類を記述し、最後はセミコロン";"で終わります。
class属性の設定 要素名とclass名との間に半角の「.」ドット記号を記述します。要素名は省略できます。 ※同じclass名を、1ページに何度でも使える。 id属性の設定 要素名とid名との間に半角の「#」シャープ記号を記述します。要素名は省略できます。 ※同じid名は、1ページに1回しか使えない。 「class」を「会社名」、「id」を「メールアドレス」と置き換えると分かりやすいでしょう。
marginとは要素間の間隔で個別に指定する場合は以下の通り。 margin-top: ○○px; 上の間隔 margin-right: ○○px; 右の間隔 margin-bottom: ○○px; 下の間隔 margin-left: ○○px; 左の間隔 まとめて指定する場合は以下の通りです。 margin: ○○px; 四方向共通 margin: ○○px ○○px; 上下 左右 margin: ○○px ○○px ○○px; 上 左右 下 margin: ○○px ○○px ○○px ○○px; 上 右 下 左
/* rule.css */
@charset "UTF-8";
body {
background: #edfd8e; /* 背景色は#edfd8e */
}
div#main_box { /* main_boxをdiv id宣言 */
height: 600px; /* 高さは600pixel */
width: 800px; /* 幅は800pixel */
background: #ff69b4; /* 背景色は#ff69b4 */
margin: 0px auto; /* 上下間隔は0で左右間隔は自動 */
}
/* rule.css */
なお、cssファイルは以下の様に記述しても問題はありませんが、可読性が悪いのでお薦めしません。
/* rule.css */
@charset "UTF-8";
body { background: #edfd8e; }
div#main_box { height: 600px; width: 800px; background: #ff69b4; margin: 0px auto; }
/* rule.css */
<!-- index.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"> <!-- header宣言 -->
</div> <!-- header宣言終了 -->
<div id="side_menu"> <!-- side_menu宣言 -->
</div> <!-- side_menu宣言終了 -->
<div id="content"> <!-- content宣言 -->
</div> <!-- content宣言終了 -->
</div>
</body>
</html>
<!-- index.html -->
/* rule.css */
@charset "UTF-8";
body {
background: #edfd8e;
}
div#main_box {
height: 600px;
width: 800px;
background: #ff69b4;
margin: 0px auto;
}
div#header { /* headerをdiv id宣言 */
height: 80px;
width: 100%; /* 幅800pixelの100%をサイズとして指定
または、width: 800px */
background: #f8844e;
}
div#side_menu { /* side_menuをdiv id宣言 */
float: left;
/*floatとはフロート（浮動化）を指定するプロパティ。 none（初期値） フロートは行わない。 left ボックスを左側に寄せ、右側に後続の内容を回り込ませる。 right ボックスを右側に寄せ、左側に後続の内容を回り込ませる。*/
height: 520px;
width: 25%; /* 幅800pixelの25%をサイズとして指定 */
background: #63dada;
}
div#content { /* contentをdiv id宣言 */
float: right;
height: 520px;
width: 75%; /* 幅800pixelの75%をサイズとして指定 */
background: #4ff1ae;
}
/* rule.css */
