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

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

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

CSS 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">
<ul>
<li id="top"><img src="img/LOFT_m01.png"></li>
<li><img src="img/LOFT_m02.png"></li>
<li><img src="img/LOFT_m03.png"></li>
</ul>
</div>
</div>  <!--/wrapper-->
</div> <!--/container-->
<div id="footer">
<p><small><img src="img/LOFT_footer.gif" alt=""></small></p>
</div>
</body>
</html>