初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML CSS positionを使ったレイアウト 実践編

先日記述したpositionを実際に使ってレイアウトしました。

positionの練習のため使わなくてもいいところまで使っていますが
練習ということでご了承ください。
素材も起きましたので実践してみたい方は是非練習してみてください。

f:id:bellsmarket:20150316192327j:plain

素材置き場

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>デザートレイアウト</title>
<link rel="stylesheet" href="cake.css">

</head>

<body>
<div id="container">
<div id="header">
<h1>pattisserie camella</h1>

<ul>
<li id="info"><a href="#">Information</a></li>
<li id="menu"><a href="#">menu</a></li>
<li id="access"><a href="#">access</a></li>
<li id="mail"><a href="#">mail</a></li>
</ul>
</div><!--/header-->

<div id="image-box">
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン"></li>
<li id="prin"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="cake"><img src="img/photo02.jpg" alt="ケーキ"></li>
<li id="waffle"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="coffee"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="pot"><img src="img/photo05.jpg" alt="pot"></li>
<li id="six"><img src="img/photo06.jpg" alt="six"></li>
<li id="seven"><img src="img/photo07.jpg" alt="seven"></li>
<li id="eight"><img src="img/photo08.jpg" alt="eight"></li>
<li id="nine"><img src="img/photo09.jpg" alt="nine"></li>
<li id="ten"><img src="img/photo10.jpg" alt="ten"></li>

</div><!--image-box-->
</div><!--/container-->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
/*reset*/

html, body, div, ul, li, img, a {
	padding: 0;
	margin: 0;
	line-height: 1.0;
	font-family:
	"Hiragino Kaku Gothic ProN",
	Meiryo,
	sans-serif;
}
ul,li {
	list-style: none;
}
a {
	text-decoration: none;  /*下線を消す*/
}

img {
	vertical-align: bottom;  /*画面の下の隙間をなくす*/
}

/*layout*/

body {
	background:#5B3E1C;
}
#container{
	background: #FFF url(img/shadow.gif) repeat-x left bottom;
	width:800px;
	height:410px;
	/*上下左右自動で真ん中に*/
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}


#header {
	width:300px;
	height:400px;
	position:absolute;
	top: 0;
	left: 0;
}

#header h1 {
	position: absolute;
	background: url(img/logo.gif) no-repeat ;
	width:267px;
	height:129px;
	left: 30px;
	top: 240px;
	/*隠し文字*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#header ul{
	width:94px;
	height:100px;
	left: 30px;
	top: 25px;
	position: absolute;
}
#header li a{
	display: block;
	width:94px;
	height:25px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#header li#info a{
	background: url(img/info.gif) no-repeat;	
}
#header li#info a:hover {
	background: url(img/info_h.gif) no-repeat;
}
#header li#menu a{
	background: url(img/menu.gif) no-repeat;	
}
#header li#menu a:hover {
	background: url(img/menu_h.gif) no-repeat;
}
#header li#access a{
	background: url(img/access.gif) no-repeat;	
}
#header li#access a:hover {
	background: url(img/access_h.gif) no-repeat;
}
#header li#mail a{
	background: url(img/mail.gif) no-repeat;	
}
#header li#mail a:hover {
	background: url(img/mail_h.gif) no-repeat;
}

#image-box {
	width:480px;
	height:400px;
	position: absolute;
	top: 0;
	right: 0;
		
}
#image-box li {
	position:absolute;
	
}
li#camp {
	width:170px;
	height:100px;
	top:-23px;
	right:-15px;
}
li#prin {
	width:160px;
	height:160px;
	bottom: 160px;;
	right: 0px;
}
li#cake {
	width:160px;
	height:160px;
	bottom: 0;
	left: 80px;
}

li#waffle {
	width:160px;
	height:160px;
	top:0;
	left: 0;
}
li#coffee {
	width:80px;
	height:80px;
	top:160px;
	left: 0;
}

li#pot {
	width:80px;
	height:80px;
	top: 0px;
	left: 160px;
}
li#six {
	width:80px;
	height:80px;
	top: 160px;
	left: 160px;
}
li#six {
	width:80px;
	height:80px;
	top: 160px;
	left: 160px;
}
li#seven {
	width:80px;
	height:80px;
	top: 80px;
	left: 240px;
}
li#eight {
	width:80px;
	height:80px;
	top: 240px;
	left: 240px;
}
li#nine {
	width:80px;
	height:80px;
	bottom: 0;
	right: 80px;
}

li#ten {
	width:80px;
	height:80px;
	bottom: 80px;
	right: 0;
}
topへ戻る