webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

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

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

作業手順

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


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


f:id:yachin29:20150212084927p:plain


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライスとコーディングの練習</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header>
<h1><img src="img/LOFT_logo.gif" alt="#"></h1>
<nav>
<ul>
<li><a href="#"><img src="img/LOFT_nav01.gif" alt="#"></a></li>
<li><a href="#"><img src="img/LOFT_nav02.gif" alt="#"></a></li>
<li><a href="#"><img src="img/LOFT_nav03.gif" alt="#"></a></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<ul>
<li><img src="img/LOFT_01.png" alt=""></li>
<li><img src="img/LOFT_s02.png" alt=""></li>
<li><img src="img/LOFT_s03.png" alt=""></li>
<li><img src="img/LOFT_s04.png" alt=""></li>
<li><img src="img/LOFT_s05.png" alt=""></li>
<li><img src="img/LOFT_s06.png" alt=""></li>
<li><img src="img/LOFT_s07.png" alt=""></li>
<li><img src="img/LOFT_s08.png" alt=""></li>
<li><img src="img/LOFT_s09.png" alt=""></li>
<li><img src="img/LOFT_s10.png" alt=""></li>
<li><img src="img/LOFT_s11.png" alt=""></li>
<li><img src="img/LOFT_s12.png" alt=""></li>
<li><img src="img/LOFT_s13.png" alt=""></li>
<li><img src="img/LOFT_s14.png" alt=""></li>
<li><img src="img/LOFT_s15.png" alt=""></li>
</ul>
</div>
<div id="sidebar">
<p id="top"><img src="img/LOFT_m01.png"></p>
<p><img src="img/LOFT_m02.png"></p>
<p><img src="img/LOFT_m03.png"></p>
</div>
</div>  <!--/wrapper-->
</div> <!--/container-->
<div id="footer">
<p><small><img src="img/LOFT_footer.gif" alt=""></small></p>
</div>
</body>
</html>


スタイルシート

@charset "UTF-8";

/* reset */
html,body,div,h1,p,ul,li,small {
  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: #EFA246;
  padding-top: 9px;
}
#container {
  width: 960px;
  margin: 0 auto;
  background: #EB8B36;
  overflow: hidden;
  position: relative;
}
header {
  float: left;
  width: 120px;
}
h1{
  margin-top: 9px;
}
nav {
  position: absolute;
  bottom: 0;
  left:0;
}
#wrapper {
  float: right;
  overflow: hidden;
}
#content {
  float: right;
  width: 600px;
  overflow: hidden;
}
#content li {
  float: left;
  margin: 9px 12px;
}
#sidebar {
  float: left;
  width: 216px;
  margin-right: 12px;
}
#sidebar p {
  margin-top: 18px;
}
#sidebar p#top {
  margin-top: 9px;
}

#footer {
  width: 100%;
  height:25px;
  background: #000;
  position: fixed;
  bottom:0;
  left:0;
}
#footer p {
  text-align: right;
line-height:25px;
}


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