facebookのTIMELINE(タイムライン)風のWEBデザインをつくりました。
素人なもんで、突っ込みどころ満載だと思いますが、あしからず。
自分のサイトで試験的にやってみた次第です。
本物は左右に分かれているところ、今回は右側だけでシンプルにしてみました。
(次回の予定は特にありません。。)
★HTMLはこちら
<div class="tl"><!-- これが背景 -->
<!-- ここから一つのかたまり -->
<div class="tl_top"><!-- これが上の部分 -->
<h2>タイトルをここに</h2>
<p>日付をここに</p></div>
<div class="tl_mid"><!-- これが真ん中の部分 -->
<p>本文をここに</p>
</div>
<div class="tl_btm"><!-- これが下の部分 -->
</div>
<!-- //ここまで一つのかたまり -->
</div>
★CSSはこちら
.tl{
width:800px;
background-repeat:repeat;
background-image:url(../images/tl.png);
background-position:center;
padding: 20px;
}
.tl_top{
width:725px;
padding-left:75px;
padding-top:5px;
height:64px;
background-image:url(../images/tl_top.png);
}
.tl_mid{
width:725px;
padding-left:75px;
padding-bottom:5px;
background-image:url(../images/tl_mid.png);
margin-top: -5px;
padding-top: 5px;
}
.tl_btm{
width:800px;
height:6px;
background-image:url(../images/tl_btm.png);
margin-bottom: 10px;
}
★素材はこちら
tl.png
tl_top.png
tl_mid.png
tl_btm.png
