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

<style type="text/css">
    div#sampleCalender {
        height:100%;
    }
    div#sampleCalender .the_date {
        float:left;
        display:block;
        width:79px; height:80px;
        margin:0 10px; padding:0;
        overflow:hidden;
        text-align:center;
    }
    div#sampleCalender .blue {
        background:transparent url(/content/img/topic/web20icons/blue.png) no-repeat top left;
    }
    div#sampleCalender .bluegray {
        background:transparent url(/content/img/topic/web20icons/bluegray.png) no-repeat top left;
    }
    div#sampleCalender .date_m {
        display:block;
        margin:0; padding:2px 0 0 0;
        color:#fff;
        font-weight:bold;
        font-size:1.2em;
        text-align:center;
    }
    div#sampleCalender .date_d {
        display:block;
        margin:0 auto; padding:1em 0 0 0;
        font-size:1.5em;
        font-weight:bold;
        text-align:center;
        color:navy;
    }
</style>

<div id="sampleCalender">
    <div class="the_date blue">
        <div class="date_m">April</div>
        <div class="date_d">13th</div>
    </div>
    <div class="the_date bluegray">
        <div class="date_m">June</div>
        <div class="date_d">13th</div>
    </div>
</div>
<br clear="all" />