このページはBlog | hamashun.comの記事、PSDをXHTMLとCSSにしてくれるサービス、PSD2CSS Onlineを試してみたのサンプルページ3です。
サンプルソース
<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:36 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: レイヤ―[ 2 */
.Layer-2 {
position: absolute;
left: 132px;
top: 8px;
width: 520px;
height: 90px;
z-index: 2;
}
/* You named this layer label: レイヤ―[ 2 のコピ―[ */
.Layer-3 {
position: absolute;
left: 132px;
top: 561px;
width: 520px;
height: 30px;
z-index: 3;
}
/* You named this layer label: レイヤ―[ 3 */
.Layer-4 {
position: absolute;
left: 132px;
top: 102px;
width: 349px;
height: 454px;
z-index: 4;
}
/* You named this layer label: レイヤ―[ 4 */
.Layer-5 {
position: absolute;
left: 486px;
top: 102px;
width: 166px;
height: 454px;
z-index: 5;
}
-->
</style>
</head>
<body>
<div class="Layer-1">
<img src="layer-1.png">
<div class="Layer-5">
<img src="layer-5.png">
</div>
<div class="Layer-4">
<img src="layer-4.png">
</div>
<div class="Layer-3">
<img src="layer-3.png">
</div>
<div class="Layer-2">
<img src="layer-2.png">
</div>
</div>
</body>
</html>
PSD2CSSに読み込ませたPSDデータ
