WEBサイト制作の勉強

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

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

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

作業手順

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


http://yachin29.webcrow.jp/LOFT.zip


f:id:yachin29:20150212084927p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>既存サイトのスライスとコーディング</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header>
<h1>LOFTのロゴ</h1>
<nav>
<ul>
<li id="sns"><a href="#">sns一覧</a></li>
<li id="shop"><a href="#">お店を探す</a></li>
<li id="menu"><a href="#">メニューを見る</a></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<ul>
<li id="l-size"><img src="img/LOFT_l01.jpg" alt=""></li>
<li><img src="img/LOFT_s01.gif" alt=""></li>
<li><img src="img/LOFT_s02.jpg" alt=""></li>
<li><img src="img/LOFT_s03.gif" 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.gif" 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 id="sidebar">
<ul>
<li><img src="img/LOFT_m01.jpg" alt=""></li>
<li><img src="img/LOFT_m02.jpg" alt=""></li>
<li class="last"><img src="img/LOFT_m03.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<footer><img src="img/LOFT_footer.gif" alt=""></footer>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,div,header,nav,footer,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  border:none;
  vertical-align:bottom;
}

body {
  background:#efa246;
}
#container {
  background:#eb8b36;
  overflow:hidden;
  width:960px;
  margin: 0 auto 100px;
  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#sns a {
  display:block;
  width:120px;
  height:45px;
  background:url(img/LOFT_nav01.gif) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav li#shop a{
  display:block;
  width:120px;
  height:90px;
  background:url(img/LOFT_nav02.gif) no-repeat;
   text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav li#menu a {
  display:block;
  width:120px;
  height:90px;
  background:url(img/LOFT_nav03.gif) no-repeat;
   text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#wrapper {
  float:right;
  overflow:hidden;
}
#content {
  width:600px;
  background:#C08283;
  float:right;
}
#content ul {
  width:600px;
  overflow:hidden;
}
#content li {
  float:left;
  margin:9px 12px;
  width:96px;
  height:72px;
}
#content li#l-size {
  width:456px;
  height:342px;
}
#sidebar {
  width:240px;
  float:left;
}
#sidebar li {
  width:216px;
  height:162px;
  margin: 9px 12px 18px 12px;
}
#sidebar li.last {
  margin-bottom:9px;
}
footer {
  width:100%;
  height:26px;
  background:#000000;
  text-align:right;
}

サイト制作のワークフローの一例
f:id:yachin29:20161020200618p:plain