今回の確認問題では、市松模様を作ってみましょう。
ただ、全部スタイルシートで作るのは、けっこうむずかしいので、
下の欠けた市松模様の背景画像をつかって、市松模様を完成させてください。
この欠けてる部分に、スタイルシートでつくったボックスを配置させて、市松模様を完成させてほしいんです。
この四角形は、
１辺が
20pxの正方形です。
カラーは、
#FF9999。
まず、
下の画像を親ボックスの背景として定義して、ネストした子ボックスを配置します。
.box-oya{
width: 180px;
height: 100px;
background:url(img/ichimatsu.gif)
}
.box-ko1{
width: 20px;
height: 20px;
background-color: #FF9999;
margin:0px 0px 0px 120px;
}
.box-ko2{
width: 20px;
height: 20px;
background-color: #FF9999;
margin:40px 0px 0px 60px;
}
まず、親ボックス（box-oya）の定義から。
問題で出している、欠けた市松模様の画像。
この１つの四角形の１辺は、
20pxです。
ということは、
横幅は、
180px。（ヨコに９個）
縦幅は、
100px、ということになります。（タテに５個）
ネストして配置する子ボックスの定義は、
タテヨコ幅は、それぞれ、20px。
まず、右上にある欠けた場所に、子ボックス（box-ko1）を配置します。
欠けてる場所は、左から、
120px。
ということは、
margin属性で、左からの間隔を定義してあげればいいので、
margin: 0px 0px 0px 120px
という、定義内容になります。
最後に、真ん中らへんにある、欠けた部分に、子ボックス（box-ko2）を配置します。
ここで、注意してほしいのが、
margin属性をつかって、上からの間隔をとる場合、60pxと判断しないこと。
すでに、子ボックス（box-ko1）が配置されてますので、
60pxというように間隔をとってしまうと、
欠けた部分に正しく配置することができません。
子ボックス（box-ko1）の縦幅20pxぶんずれてしまいますので、
子ボックス（box-ko2）の上からの間隔をとる場合は、
margin: 40px 0px 0px 60px
というふうにすると、正確に配置することができます。
これができるようになると、スタイルシートをつかったデザインには欠かすことができない、
背景画像にあわせて、ボックスを配置できるようになるので、
たくさん練習してくださいね。
