webサイト制作の勉強|2017月7月クラスブログ

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>ロゴ</h1>
<nav>
<ul>
<li><a href="#">SNS一覧</a></li>
<li><a href="#">お店を探す</a></li>
<li><a href="#">メニューを見る</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<div id="content">
<ul>
<li><img src="img/LOFT_L01.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s01.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s02.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s03.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s04.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s05.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_06.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s07.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s08.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s09.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s10.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s11.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s12.jpg" alt=""></li>
<li class="size-s"><img src="img/LOFT_s13.jpg" alt=""></li>
<li class="size-s"><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><img src="img/LOFT_M03.jpg" alt=""></li>
</ul>
</div>
</div><!--/#wrapper-->
</div><!--/#container-->
<footer><img src="img/LOFT_footer.jpg" alt=""></footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
html,body,header,nav,div,footer,h1,p,ul,li,a {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
img {
	border:none;
	vertical-align:bottom;
}

/*ページレイアウトのスタイル*/
body {
	background:#efa246;
}
#container {
	width:960px;
	background:#eb8b36;
	margin:9px auto 0;
	overflow:hidden;
	position:relative;
}
header {
	width:120px;
	float:left;
}
h1 {
	width:120px;
	height:163px;
	background:url(img/LOFT_logo.gif) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
nav {
	width:120px;
	position:absolute;
	bottom:0;
	left:0;
}
header li {
	width:120px;
	height:45px;
}
header li:nth-child(2), header li:nth-child(3) {
	width:120px;
	height:90px;
}
header li a {
	display:block;
	width:100%;
	height:45px;
	background:url(img/LOFT_nav01.gif) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
header li a:hover {
	opacity:0.8;
}
header li:nth-child(2) a {
	height:90px;
	background:url(img/LOFT_nav02.gif) no-repeat;
}
header li:nth-child(3) a {
	height:90px;
	background:url(img/LOFT_nav03.gif) no-repeat;
}

#wrapper {
	width:840px;
	float:right;
	overflow:hidden;
}
#content {
	width:600px;
	float:right;
}
#content ul {
	width:600px;
	overflow:hidden;
}
#content li {
	float:left;
	margin:9px 12px;
	width:456px;
	height:342px;
}
#content li.size-s {
	width:96px;
	height:72px;
}
#sidebar {
	width:240px;
	float:left;
}
#sidebar li {
	float:left;
	margin:9px 12px;
}
footer {
	width:100%;
	height:26px;
	background:#000;
	text-align:right;
	position:fixed;
	bottom:0;
	left:0;
}


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