既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。
作業手順
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="css/style.css"> </head> <body> <div class="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 class="main"> <div class="content"> <ul> <li><img src="img/LOFT_01.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 class="sidebar"> <p><img src="img/LOFT_m01.jpg" alt=""></p> <p><img src="img/LOFT_m02.jpg" alt=""></p> <p><img src="img/LOFT_m03.jpg" alt=""></p> </div> </div><!--/.main--> </div><!--/.container--> <footer><img src="img/LOFT_footer.gif" alt=""></footer> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,p,ul,li { margin:0; padding:0; line-height:1.0; } ul { list-style:none; } a { text-decoration:none; color:#222; } img { vertical-align:bottom; } body { background:#efa246; padding-top:9px; } .container { width:960px; margin:0 auto 40px; background:#eb8b36; 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; left:0; bottom:0; } nav li { width:120px; height:45px; } nav li:nth-child(2) { height:90px; } nav li:nth-child(3) { height:90px; } nav li a { display:block; white-space:nowrap; text-indent:100%; overflow:hidden; height:45px; background:url(../img/LOFT_nav01.gif) no-repeat; } nav li:nth-child(2) a { height:90px; background:url(../img/LOFT_nav02.gif) no-repeat; } nav li:nth-child(3) a { height:90px; background:url(../img/LOFT_nav03.gif) no-repeat; } nav li a:hover { opacity:0.8; } .main { width:840px; float:right; overflow:hidden; } .content { width:600px; float:right; } .content ul { overflow:hidden; } .content li { float:left; margin:9px 12px; } .sidebar { width:216px; float:left; padding-top:9px; margin-left:12px; } .sidebar p { margin-bottom:18px; } .sidebar p:last-child { margin-bottom:9px; } footer { width:100%; height:26px; background:#000; text-align:right; }