positionを使ったレイアウト演習
positionを使ったレイアウト
下記の画像と同じカンプを作成せよ。素材は与えられたものを使用すること。
方針
- 大画像 160px × 160px
- 小画像 80px × 80px 大画像の4分の1
- position:absoluteで配置する。親要素はstatic以外であること。
- #containerは横 160 ×5＝800px、縦（160*2）+80＝400px、さらにカンプの底辺の影に10px(shadow.gif 100*10px)。
ｈｔｍｌ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UｔF-8">
<title>Patisserie camellia</title>
<link href="style.cｓs" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>
<img src="img/logo.gｉf" alt="Patisserie camellia" width="267" height="129">
</h1>
<ul>
<li>
<a href="#">
<img src="img/m_info.gｉf" alt="Information">
</a>
</li>
<li>
<a href="#">
<img src="img/m_menu.gｉf" alt="Menu">
</a>
</li>
<li>
<a href="#">
<img src="img/m_accｅss.gｉf" alt="Accｅss">
</a>
</li>
<li>
<a href="#">
<img src="img/m_mail.gｉf" alt="Maｉl">
</a>
</li>
</ul>
<div id="imageph">
<img src="img/photo01.jpg" alt="プリン" id="ph01">
<img src="img/photo02.jpg" alt="ショートケーキ" id="ph02">
<img src="img/photo03.jpg" alt="ワッフル" id="ph03">
<img src="img/photo04.jpg" alt="コーヒー" id="ph04">
<img src="img/photo05.jpg" alt="キャンドル" id="ph05">
<img src="img/photo06.jpg" alt="イチゴプリン" id="ph06">
<img src="img/photo07.jpg" alt="イチゴスムージー" id="ph07">
<img src="img/photo08.jpg" alt="ヨーグルト" id="ph08">
<img src="img/photo09.jpg" alt="ライト" id="ph09">
<img src="img/photo10.jpg" alt="コーヒー" id="ph10">
</div>
<!-- #imageph -->
</div>
<!-- #container -->
<div id="campaign">
<a href="#">
<img src="img/campaign.gｉf" alt="キャンペーン情報">
</a>
</div>
<!-- #campaign -->
</body>
</html>
ｃｓｓなしでの表示
ｃｓｓ
@charset "UｔF-8";
body,
div,
h1,
ul,
li {
margin: 0;
padding: 0;
}
body { background: #5B3E1C }
img {
border: none;
vertical-align: bottom;
}
a { text-decoration: none }
ul {list-style-type: none}
#container {
background: #FFF url(img/shadow.gｉf) repeat-x left bottom;/*カンプ底辺の影*/
height: 410px;
width: 800px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -205px;
}
#container h1 {
position: absolute;
left: 30px;
top: 240px;
}
#container ul {
position: absolute;
left: 30px;
top: 25px;
}
#container li { height: 30px }
#container li img {
height: 25px;
width: 94px;
}
#imageph img {
position: absolute;
height: 80px;
width: 80px;
}
img#ph01 {
left: 640px;
top: 80px;
height: 160px;
width: 160px;
}
img#ph02 {
left: 400px;
top: 240px;
height: 160px;
width: 160px;
}
img#ph03 {
left: 320px;
top: 0px;
height: 160px;
width: 160px;
}
img#ph04 {
left: 320px;
top: 160px;
}
img#ph05 {
left: 480px;
top: 0px;
}
img#ph06 {
left: 480px;
top: 160px;
}
img#ph07 {
left: 560px;
top: 80px;
}
img#ph08 {
left: 560px;
top: 240px;
}
img#ph09 {
left: 640px;
top: 320px;
}
img#ph10 {
left: 720px;
top: 240px;
}
#campaign {
width: 170px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: 245px;
margin-top: -228px;
}#campaign img {
width: 170px;
height: 100px;
}
