WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

photoshopでスライスした画像をグリッドレイアウトでコーディング

f:id:mmmmofu:20150630160446p:plain

http://efu.sakura.ne.jp/web/0630/

  1. スライスしたい画像を用意する。
  2. スライスしたいところにガイドを引く。(スナップしないので拡大して丁寧に引く)
  3. スライスツールを選択する。(切り抜きツール長押し)
  4. スライスしたい部分をドラッグする。(ガイドに沿ってスライスはしてはいけない。意図しない部分が分割されてしまう)
  5. 右クリック→スライスオプションを編集→名前を変更する。
  6. webおよびデバイス用に保存→保存
  7. 設定をその他にし、名前を任意の名前に変更する。
  8. スライスを全てのユーザー定義スライスにする。
  9. 保存したいフォルダに保存する。

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">
<div id="header">
<h1><img src="img/loft_logo.gif"></h1>
<div id="nav">
<ul>
<li><a href="#"><img src="img/loft_nav01.gif"></a></li>
<li><a href="#"><img src="img/loft_nav02.gif"></a></li>
<li><a href="#"><img src="img/loft_nav03.gif"></a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="wrapper">
<div id="content">
<ul>
<li><img src="img/loft_01.png"></li>
<li><img src="img/loft_02.png"></li>
<li><img src="img/loft_03.png"></li>
<li><img src="img/loft_04.png"></li>
<li><img src="img/loft_05.png"></li>
<li><img src="img/loft_06.png"></li>
<li><img src="img/loft_07.png"></li>
<li><img src="img/loft_08.png"></li>
<li><img src="img/loft_09.png"></li>
<li><img src="img/loft_10.png"></li>
<li><img src="img/loft_11.png"></li>
<li><img src="img/loft_12.png"></li>
<li><img src="img/loft_13.png"></li>
<li><img src="img/loft_14.png"></li>
<li><img src="img/loft_15.png"></li>
</ul>
</div><!-- /#content -->
<div id="sidebar">
<p id="top"><img src="img/loft_banner01.png"></p>
<p><img src="img/loft_banner02.png"></p>
<p><img src="img/loft_banner03.png"></p>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
<div id="footer">
<p><img src="img/loft_footer.gif"></p>
</div><!-- /#footer -->
</body>
</html>

CSS

@charset "utf-8";

html,body,div,h1,p,ul,li,img {
  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 {
  boder: none;
  vertical-align: bottom;
}
body {
  background: #efa246;
}
#container {
	background: #eb8b36;
	width: 960px;
	margin: 0 auto;
	margin-top: 12px;
	position: relative;
	overflow: hidden;
	margin-bottom: 50px;
}
#header {
	width: 120px;
	padding-top: 12px;
	float: left;
}
#nav {
	width: 120px;
	position: absolute;
	bottom: 0;
	left:0;
}
#wrapper {
	width: 828px;
  float: right;	
	overflow: hidden;
}
#content {
	width: 600px;
	float: right;
}
#content li {
	float: left;
	margin: 9px 12px;
}
#sidebar {
	width: 216px;
	float: left;
}
#sidebar p {
	margin-top: 18px;
}
#sidebar p#top {
	margin-top: 9px;
}
#footer {
	width: 100%;
	height: 26px;
	background: #000;
}
#footer p {
	text-align: right;
}