イメージレイアウト 07

レポート用紙をモチーフにしたテンプレートです。

写真はサンプルです。(75×75)
好きな写真に差し替えてご利用ください。

色はベージュ、グレイ、セピア、ブルー、グリーンの5色です。

タイトル

サブタイトル

--- HTML ---
<div id="report">
 <div class="title">
 <img src="img/title.jpg" alt=""><h2>タイトル></h2>
 <p>サブタイトル</p>
 </div>
 <ul>
 <li>テキスト</li>
 </ul>
 <div><img src="img/yellow2.gif" alt=""></div>
</div>

--- CSS ---
#report ul {
 width:526px;
 margin:0;
 padding:10px 0;
 background:url(img/yellow.gif) repeat-y;
 list-style-type:none;
}

#report li {
 margin:5px 20px 0 20px;
 padding:0;
 color:#666633;
 font-size:80%;
 text-align:justify;
 text-justify:distribute;
 line-height:1.32em;
}

#report h2 {
 margin:0;
 color:#666633;
 font-size:120%;
 line-height:1em;
}

#report .title {
 width:526px;
 min-height:78px;
 height:auto !important;
 height:78px;
 padding:15px 10px 0 20px;
 background:url(img/yellow1.gif) no-repeat;
}

#report .title img {
 margin-right:20px;
 padding:3px;
 background:#fff;
 border:1px solid #ccc;
 float:left;
}

#report .title p {
 margin:10px 0 0;
 font-size:80%;
 color:#666;
}