WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

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

Photoshop HTML+CSS

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

作業手順

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

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>既存サイトのトレース</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>LOFT</h1>
<ul id="nav">
<li id="sns"><a href="#">SNS一覧</a></li>
<li id="shop"><a href="#">お店を探す</a></li>
<li id="menu"><a href="#">メニューを見る</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<ul id="banner_box">
<li class="size_L"><img src="img/loft_L01.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s1.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s2.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s3.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s4.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s5.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s6.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s7.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s8.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s9.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s10.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s11.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s12.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s13.png" alt="#"></li>
<li class="size_S"><img src="img/loft_s14.png" alt="#"></li>
</ul>
</div>
<div id="sidebar">
<p><img src="img/loft_M01.png" alt="#"></p>
<p><img src="img/loft_M02.png" alt="#"></p>
<p><img src="img/loft_M03.png" alt="#"></p>
</div><!--#sidebar-->
</div><!--#wrapper-->
</div><!--#container-->
<div id="footer">
<p><small><img src="img/loft_footer.gif" alt="#"></small></p>
</div><!--#footer-->
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
html,body,h1,ul,li,p,small {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  border:0;
  vertical-align:bottom;
}

/*レイアウト*/
body {
  background:#efa246;
  padding-top:9px;
}
#container {
  background:#eb8b36;
  width:960px;
  margin:0 auto;
  overflow:hidden;
  position:relative;
}
#header {
  width:120px;
  float:left;
}
h1 {
  width:120px;
  height:162px;
  background:url(img/loft_logo.gif) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#nav {
  position:absolute;
  bottom:0;
  left:0;
}
#nav li {
  width:120px;
}
#nav li a {
  display:block;
  width:100%;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
li#sns a {
  height:45px;
  background:url(img/loft_nav01.gif) no-repeat;
}
li#shop a {
  height:90px;
  background:url(img/loft_nav02.gif) no-repeat;
}
li#menu a {
  height:90px;
  background:url(img/loft_nav03.gif) no-repeat;
}
#wrapper {
  overflow:hidden;
  float:right;
}
#content {
  width:600px;
  float:right;
}
#banner_box {
  overflow:hidden;
}
#banner_box li {
  float:left;
  margin:9px 12px;
}
li.size_L {
  width:456px;
  height:342px;
}
li.size_S {
  width:96px;
  height:72px;
}

#sidebar {
  width:216px;
  float:left;
  margin-right:12px;
  padding-top:9px;
}
#sidebar p {
  margin-bottom:18px;
}
#sidebar p:last-child {
  margin-bottom:9px;
}
#footer {
  width:100%;
  height:26px;
  text-align:right;
  background:#000000;
  margin-top:60px;
}