既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。
作業手順
1. 既存のサイトのキャプチャーを撮る
2. Photoshopで開き、各画像に沿ってガイドを引き、スライス
3. 見本を参考にコーディングしていく
http://yachin29.webcrow.jp/LOFT.zip
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>スライスとコーディング</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <h1>LOFT</h1> <nav class="gnav"> <ul> <li><a href="#"><img src="img/LOFT_nav01.gif" alt="sns一覧"></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 class="wrapper"> <div class="left"> <p><img src="img/LOFT_m1.jpg" alt=""></p> <p><img src="img/LOFT_m2.jpg" alt=""></p> <p><img src="img/LOFT_m3.jpg" alt=""></p> </div> <div class="right"> <ul> <li><img src="img/LOFT_L01.jpg" alt=""></li> <li><img src="img/LOFT_s01.jpg" alt=""></li> <li><img src="img/LOFT_s02.jpg" alt=""></li> <li><img src="img/LOFT_s03.jpg" alt=""></li> <li><img src="img/LOFT_s04.jpg" alt=""></li> <li><img src="img/LOFT_s05.jpg" alt=""></li> <li><img src="img/LOFT_s06.jpg" alt=""></li> <li><img src="img/LOFT_s07.jpg" alt=""></li> <li><img src="img/LOFT_s08.jpg" alt=""></li> <li><img src="img/LOFT_s09.jpg" alt=""></li> <li><img src="img/LOFT_s10.jpg" alt=""></li> <li><img src="img/LOFT_s11.jpg" alt=""></li> <li><img src="img/LOFT_s12.jpg" alt=""></li> <li><img src="img/LOFT_s13.jpg" alt=""></li> <li><img src="img/LOFT_s14.jpg" alt=""></li> </ul> </div> </div> </div> <footer><img src="img/LOFT_footer.jpg" alt=""></footer> </body> </html>
style.css
@charset "utf-8"; /* CSS Document */ html,body,h1,p,ul,li { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; } img { vertical-align:bottom; } body { background:#efa246; padding-top:9px; } .container { background:#eb8b36; width:960px; margin:0 auto 100px; overflow:hidden; position:relative; } header { width:120px; float:left; } h1 { width:120px; height:162px; background:url(img/LOFT_logo.gif) no-repeat; white-space:nowrap; text-indent:100%; overflow:hidden; } nav { width:120px; height:225px; position:absolute; bottom:0; left:0; } .wrapper { width:840px; float:right; overflow:hidden; } .left { width:240px; float:left; padding-top:9px; } .left p { margin:0 0 18px 12px; } .left p:last-child { margin-bottom:9px; } .right { width:600px; float:right; } .right ul { overflow:hidden; } .right li img { margin:9px 12px; float:left; } footer { width:100%; height:26px; background:#000000; text-align:right; }
サイト制作のワークフローの一例