読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

Positionを使ったレイアウト

HTML+CSS

見本
f:id:yachin29:20150206105158j:plain


素材のダウンロード先
http://yachin29.com/photoshop/position.zip

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Patisserie camellia</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1>Patisserie camellia</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>
</header>
<div id="content">
<ul>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン情報"></li>
<li id="ph01"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="ph02"><img src="img/photo02.jpg" alt="ショートケーキ"></li>
<li id="ph03"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="ph04"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="ph05"><img src="img/photo05.jpg" alt="キャンドル"></li>
<li id="ph06"><img src="img/photo06.jpg" alt="イチゴプリン"></li>
<li id="ph07"><img src="img/photo07.jpg" alt="イチゴスムージー"></li>
<li id="ph08"><img src="img/photo08.jpg" alt="ヨーグルト"></li>
<li id="ph09"><img src="img/photo09.jpg" alt="ライト"></li>
<li id="ph10"><img src="img/photo10.jpg" alt="コーヒー"></li>
</ul>
</div>
</div>  <!--/container-->
</body>
</html>


スタイルシート

/*   -リセット-  */
html, body, div, h1,p,ul, ol, li, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}

/*レイアウト*/
body {
  background: #5B3E1C;
}
#container {
  background:#FFFFFF url(img/shadow.gif) repeat-x left bottom;
  width: 800px;
  height:410px;
  margin: 100px auto 0;
}
header {
  width:320px;
  height:400px;
  float:left;
  position:relative;
}
#content {
  width:480px;
  height:400px;
  float:right;
  position:relative;
}
h1 {
  width:267px;
  height:129px;
  background:url(img/logo.gif) no-repeat;
  text-indent:100%;/*隠しテキストの処理*/
  white-space:nowrap;/*隠しテキストの処理*/
  overflow:hidden;/*隠しテキストの処理*/
  position:absolute;
  bottom:20px;
  left:20px;
}
header ul {
  width:94px;
  height:100px;
  position:absolute;
  top:40px;
  left:20px;
}
header li {
  width:94px;
  height:25px;
}
header li a {
  display:block;
  width:100%;
  height:25px;
  text-indent:100%;/*隠しテキストの処理*/
  white-space:nowrap;/*隠しテキストの処理*/
  overflow:hidden;/*隠しテキストの処理*/
}
li#info a {
  background:url(img/info.gif) no-repeat;
}
li#menu a{
	background: url(img/menu.gif) no-repeat;
}
li#access a {
	background: url(img/access.gif) no-repeat;
}
li#mail a {
	background: url(img/mail.gif) no-repeat;
}

li#info a:hover {
  background:url(img/info_h.gif) no-repeat;
}
li#menu a:hover {
	background: url(img/menu_h.gif) no-repeat;
}
li#access a:hover {
	background: url(img/access_h.gif) no-repeat;
}
li#mail a:hover {
	background: url(img/mail_h.gif) no-repeat;
}

/*ギャラリー部分*/
#content li {
  position:absolute;
}
li#camp {
  top:-23px;
  right:-15px;
}
li#ph01 {
top:0;
left:0;
}
li#ph02 {
  top:160px;
  left:80px;
}
li#ph03 {
  bottom:0;
  right:0;
}
li#ph04 {
  top:320px;
  left:0;
}
li#ph05 {
  top:320px;
  left:160px;
}
li#ph06 {
  top:240px;
  left:240px;
}
li#ph07 {
  top:160px;
  left:320px;
}
li#ph08 {
  top:80px;
  left:240px;
}
li#ph09 {
  top:0;
  left:160px;
}
li#ph10 {
  top:80px;
  right:0;
}