PHP & JavaScript Room :: 設置サンプル

実行結果

グレー系
  • menu1
  • menu2

more »

ブルー系
  • menu1
  • menu2

more »

ピンク系
  • menu1
  • menu2

more »

ソース

<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 &raquo;</a></p>
</div>
<div class="mbox bgBlue">
    <div>ブルー系</div>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
    </ul>
    <p><a href="javascript:void(0)">more &raquo;</a></p>
</div>
<div class="mbox bgPink">
    <div>ピンク系</div>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
    </ul>
    <p><a href="javascript:void(0)">more &raquo;</a></p>
</div>

polarized women