Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。

作業手順

1. 既存のサイトのキャプチャーを撮る
2. Photoshopで開き、各画像に沿ってガイドを引き、スライス
3. 見本を参考にコーディングしていく

http://felica29.starfree.jp/LOFT.zip

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>既存サイトのトレース</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="container">
<header>
<h1>ロゴ</h1>
<nav>
<ul>
<li><a href="#">SNS一覧</a></li>
<li><a href="#">お店を探す</a></li>
<li><a href="#">メニューを見る</a></li>
</ul>
</nav>
</header>
<div class="main">
<div class="content">
<ul>
<li><img src="img/LOFT_01.jpg" alt=""></li>
<li><img src="img/LOFT_s01.jpg" alt=""></li>
<li><img src="img/LOFT_s02.jpg" alt=""></li>
<li><img src="img/LOFT_s03.jpg" alt=""></li>
<li><img src="img/LOFT_s04.jpg" alt=""></li>
<li><img src="img/LOFT_s05.jpg" alt=""></li>
<li><img src="img/LOFT_s06.jpg" alt=""></li>
<li><img src="img/LOFT_s07.jpg" alt=""></li>
<li><img src="img/LOFT_s08.jpg" alt=""></li>
<li><img src="img/LOFT_s09.jpg" alt=""></li>
<li><img src="img/LOFT_s10.jpg" alt=""></li>
<li><img src="img/LOFT_s11.jpg" alt=""></li>
<li><img src="img/LOFT_s12.jpg" alt=""></li>
<li><img src="img/LOFT_s13.jpg" alt=""></li>
<li><img src="img/LOFT_s14.jpg" alt=""></li>
</ul>
</div>
<div class="sidebar">
<p><img src="img/LOFT_m01.jpg" alt=""></p>
<p><img src="img/LOFT_m02.jpg" alt=""></p>
<p><img src="img/LOFT_m03.jpg" alt=""></p>
</div>
</div><!--/.main-->
</div><!--/.container-->
<footer><img src="img/LOFT_footer.gif" alt=""></footer>
</body>
</html>

スタイルシート

@charset "utf-8";

html,body,h1,ul,li,p{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
vertical-align: bottom;
}

body{
background-color: #efa246;
padding-top: 9px;
}
.container{
width: 960px;
margin: 0 auto 50px;
background-color: #eb8b36;
overflow: hidden;
position: relative;
}
header{
width: 120px;
float: left;
}
.g-nav{
width: 120px;
height: 225px;
position: absolute;
bottom: 0;
left: 0;
}
.g-nav a{
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.g-nav a:hover{
opacity: 0.7;/*1が不透明、0が透明*/
}
.sns{
width: 120px;
height: 45px;
}
.sns>a{
display: block;
height: 45px;
background: url(../img/LOFT_nav1.gif)no-repeat;
}
.shop{
width: 120px;
height: 90px;
}
.shop>a{
display: block;
height: 90px;
background: url(../img/LOFT_nav2.gif)no-repeat;
}
.menu{
width: 120px;
height: 90px;
}
.menu>a{
display: block;
height: 90px;
background: url(../img/LOFT_nav3.gif)no-repeat;
}
.wrapper{
width: 840px;
float: right;
overflow: hidden;
}
.main{
width: 600px;
float: right;
}
.sub{
width: 240px;
float: left;
}
.wrapper li{
float: left;
margin: 9px 12px;
}
footer{
width: 100%;
height: 26px;
background: #000 url(../img/LOFT_footer.jpg)no-repeat right 0;
}