このページはBlog | hamashun.comの記事、PSDをXHTMLとCSSにしてくれるサービス、PSD2CSS Onlineを試してみたのサンプルページ2です。
サンプルソース
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- This file was originally generated at http://psd2cssonline.com on April 19, 2008, 6:26 am -->
<style type="text/css">
<!--
/* You named this layer label: レイヤ―[ 1 */
.Layer-1 {
position: absolute;
left: +0px;
top: +0px;
width: 800px;
height: 600px;
z-index: 1;
}
/* You named this layer label: レイヤ―[ 3 */
.Layer-2 {
position: absolute;
left: +101px;
top: +0px;
width: 611px;
height: 600px;
z-index: 2;
}
/* You named this layer label: レイヤ―[ 2 */
.Layer-3 {
position: absolute;
left: +102px;
top: +0px;
width: 609px;
height: 600px;
z-index: 3;
}
/* You named this layer label: レイヤ―[ 7 */
.Layer-4 {
position: absolute;
left: +102px;
top: +85px;
width: 217px;
height: 515px;
z-index: 4;
}
/* You named this layer label: レイヤ―[ 5 */
.Layer-5 {
position: absolute;
left: +306px;
top: +96px;
width: 405px;
height: 504px;
z-index: 5;
}
/* You named this layer label: レイヤ―[ 6 */
.Layer-6 {
position: absolute;
left: +102px;
top: +0px;
width: 609px;
height: 229px;
z-index: 6;
}
/* You named this layer label: Sample Site */
.Layer-7 {
position: absolute;
left: 11px;
top: 12px;
width: 212px;
height: 30px;
z-index: 7;
}
/* You named this layer label: Nav */
.Layer-8 {
position: absolute;
left: 29px;
top: 127px;
width: 63px;
height: 25px;
z-index: 8;
}
/* You named this layer label: 別にサンプルを作るのが面貼|にな */
.Layer-9 {
position: absolute;
left: 224px;
top: 140px;
width: 331px;
height: 50px;
z-index: 9;
}
-->
</style>
</head>
<body>
<div class="Layer-1">
<img src="layer-1.png">
</div>
<div class="Layer-2">
<img src="layer-2.png">
</div>
<div class="Layer-3">
<img src="layer-3.png">
</div>
<div class="Layer-4">
<img src="layer-4.png">
</div>
<div class="Layer-5">
<img src="layer-5.png">
</div>
<div class="Layer-6">
<img src="layer-6.png">
<div class="Layer-9">
<img src="layer-9.png">
</div>
<div class="Layer-8">
<img src="layer-8.png">
</div>
<div class="Layer-7">
<img src="layer-7.png">
</div>
</div>
</body>
</html>
PSD2CSSに読み込ませたPSDデータ
