読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

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

Photoshop HTML+CSS

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

作業手順

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





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><a href="#">LOFT</a></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><img src="img/LOFT_l01.png" alt="#"></li>
<li><img src="img/LOFT_s01.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>
</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>
</div>
</div><!--/#container-->

<footer>
<p><small><img src="img/LOFT_footer.gif" alt="#"></small></p>
</footer>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,ul,li,p,small {
margin:0;
padding:0;
line-height:1.0;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
vertical-align:bottom;
}

body {
background:#efa246;
padding-top:9px;
}
#container {
width:960px;
background:#eb8b36;
margin:0 auto;
overflow:hidden;
position:relative;
}
header {
width:120px;
float:left;
}
h1 {
background:url(../img/LOFT_logo.gif) no-repeat;
width:120px;
height:162px;
}
h1 a {
display:block;
width:120px;
height:162px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
nav {
position:absolute;
left:0;
bottom:0;
}
nav li#sns {
background: url(../img/LOFT_nav01.gif) no-repeat;
}
nav li#sns a {
display:block;
width:120px;
height:45px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
nav li#shop {
background: url(../img/LOFT_nav02.gif) no-repeat;
}
nav li#shop a {
display:block;
width:120px;
height:90px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
nav li#menu {
background: url(../img/LOFT_nav03.gif) no-repeat;
}
nav li#menu a {
display:block;
width:120px;
height:90px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
nav li a:hover {
background:#FFFFFF;
opacity:0.3;
}
#wrapper {
float:right;
overflow:hidden;
}
#content {
width:600px;
float:right;
}
#content li {
float:left;
margin:9px 12px;
}
#sidebar {
width:240px;
float:left;
}
#sidebar p {
margin-left:12px;
margin-bottom:18px;
}
#sidebar p:last-child {
margin-bottom:0;
}
#sidebar p:first-child {
margin-top:9px;
}
footer {
width:100%;
background:#000;
height:26px;
position:absolute;
bottom:0;
left:0;
}
footer p {
text-align:right;
line-height:26px;
}