<style type="text/css">
/* ボックスに共通 */
.mbox, .mbox * {
margin:0; padding:0;
}
.mbox {
margin:5px 0; padding:5px;
width:200px;
border:1px solid #999;
}
.mbox div {
padding:0 5px;
border-width:1px;
border-style:solid;
border-color:#fff #ccc #ccc #fff;
background-color:inherit;
}
.mbox ul {
margin-left:20px;
list-style:square;
}
.mbox p {
text-align:right;
}
/* ボックスの背景色・文字色 */
.bgGray { /* グレー系 */
background-color:#eee;
color:gray;
}
.bgBlue { /* ブルー系 */
background-color:#e0f7f4;
color:navy;
}
.bgPink { /* ピンク系 */
background-color:#f7e2f4;
color:purple;
}
</style>
<div class="mbox bgGray">
<div>グレー系</div>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<p><a href="javascript:void(0)">more »</a></p>
</div>
<div class="mbox bgBlue">
<div>ブルー系</div>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<p><a href="javascript:void(0)">more »</a></p>
</div>
<div class="mbox bgPink">
<div>ピンク系</div>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<p><a href="javascript:void(0)">more »</a></p>
</div>