このページはBlog | hamashun.comの記事、PSDをXHTMLとCSSにしてくれるサービス、PSD2CSS Onlineを試してみたのサンプルページ1です。
サンプルソース
<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:14 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: +75px;
top: +0px;
width: 653px;
height: 600px;
z-index: 2;
}
/* You named this layer label: レイヤ―[ 2 */
.Layer-3 {
position: absolute;
left: +85px;
top: +0px;
width: 633px;
height: 600px;
z-index: 3;
}
/* You named this layer label: レイヤ―[ 4 */
.Layer-4 {
position: absolute;
left: +83px;
top: +0px;
width: 637px;
height: 31px;
z-index: 4;
}
/* You named this layer label: レイヤ―[ 5 */
.Layer-5 {
position: absolute;
left: +234px;
top: +222px;
width: 485px;
height: 380px;
z-index: 5;
}
/* You named this layer label: レイヤ―[ 6 */
.Layer-6 {
position: absolute;
left: +83px;
top: +0px;
width: 325px;
height: 289px;
z-index: 6;
}
/* You named this layer label: Sample Site */
.Layer-7 {
position: absolute;
left: 55px;
top: 56px;
width: 344px;
height: 55px;
z-index: 7;
}
/* You named this layer label: レイヤ―[ 12 */
.Layer-8 {
position: absolute;
left: 212px;
top: 183px;
width: 62px;
height: 11px;
z-index: 8;
}
/* You named this layer label: なんかPSDを読み込ませるとCSSとX */
.Layer-9 {
position: absolute;
left: 69px;
top: 166px;
width: 291px;
height: 46px;
z-index: 9;
}
/* You named this layer label: いつか出るとは思ってたけど、思 */
.Layer-10 {
position: absolute;
left: 69px;
top: 244px;
width: 252px;
height: 81px;
z-index: 10;
}
/* You named this layer label: ところで僕は、ソ^イヤキはしっぽ */
.Layer-11 {
position: absolute;
left: 69px;
top: 363px;
width: 326px;
height: 46px;
z-index: 11;
}
/* You named this layer label: レイヤ―[ 7 */
.Layer-12 {
position: absolute;
left: 184px;
top: 11px;
width: 111px;
height: 111px;
z-index: 12;
}
/* You named this layer label: レイヤ―[ 8 */
.Layer-13 {
position: absolute;
left: 3px;
top: 3px;
width: 105px;
height: 105px;
z-index: 13;
}
/* You named this layer label: レイヤ―[ 9 */
.Layer-14 {
position: absolute;
left: 3px;
top: 3px;
width: 105px;
height: 105px;
z-index: 14;
}
/* You named this layer label: sample nav */
.Layer-15 {
position: absolute;
left: 482px;
top: 145px;
width: 65px;
height: 12px;
z-index: 15;
}
/* You named this layer label: レイヤ―[ 10 */
.Layer-16 {
position: absolute;
left: 474px;
top: 143px;
width: 3px;
height: 15px;
z-index: 16;
}
/* You named this layer label: Taiyaki */
.Layer-17 {
position: absolute;
left: 492px;
top: 168px;
width: 40px;
height: 11px;
z-index: 17;
}
/* You named this layer label: Nikuman */
.Layer-18 {
position: absolute;
left: 491px;
top: 184px;
width: 49px;
height: 9px;
z-index: 18;
}
/* You named this layer label: Croissant */
.Layer-19 {
position: absolute;
left: 492px;
top: 199px;
width: 51px;
height: 9px;
z-index: 19;
}
/* You named this layer label: レイヤ―[ 11 */
.Layer-20 {
position: absolute;
left: 484px;
top: 171px;
width: 2px;
height: 2px;
z-index: 20;
}
/* You named this layer label: レイヤ―[ 11 のコピ―[ */
.Layer-21 {
position: absolute;
left: 484px;
top: 187px;
width: 2px;
height: 2px;
z-index: 21;
}
/* You named this layer label: レイヤ―[ 11 のコピ―[ 2 */
.Layer-22 {
position: absolute;
left: 484px;
top: 202px;
width: 2px;
height: 2px;
z-index: 22;
}
/* You named this layer label: 抹茶スイ―[ツオフしたい */
.Layer-23 {
position: absolute;
left: 7px;
top: 586px;
width: 120px;
height: 9px;
z-index: 23;
}
-->
</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 class="Layer-23">
<img src="layer-23.png">
</div>
<div class="Layer-22">
<img src="layer-22.png">
</div>
<div class="Layer-21">
<img src="layer-21.png">
</div>
<div class="Layer-20">
<img src="layer-20.png">
</div>
<div class="Layer-19">
<img src="layer-19.png">
</div>
<div class="Layer-18">
<img src="layer-18.png">
</div>
<div class="Layer-17">
<img src="layer-17.png">
</div>
<div class="Layer-16">
<img src="layer-16.png">
</div>
<div class="Layer-15">
<img src="layer-15.png">
</div>
<div class="Layer-11">
<img src="layer-11.png">
</div>
<div class="Layer-10">
<img src="layer-10.png">
</div>
<div class="Layer-9">
<img src="layer-9.png">
</div>
<div class="Layer-7">
<img src="layer-7.png">
</div>
</div>
<div class="Layer-4">
<img src="layer-4.png">
</div>
<div class="Layer-5">
<img src="layer-5.png">
<div class="Layer-12">
<img src="layer-12.png">
<div class="Layer-14">
<img src="layer-14.png">
</div>
<div class="Layer-13">
<img src="layer-13.png">
</div>
</div>
</div>
<div class="Layer-6">
<img src="layer-6.png">
<div class="Layer-8">
<img src="layer-8.png">
</div>
</div>
</body>
</html>
PSD2CSSに読み込ませたデータ
