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

<style type="text/css">
    div#sampleCalender2 {
        height:100%;
    }
    div#sampleCalender2 .the_date {
        float:left;
        display:block;
        width:6em;
        margin:0 10px; padding:0;
        text-align:center;
        overflow:hidden;
    }
    div#sampleCalender2 .blue {
        background-color:#4096ee;
    }
    div#sampleCalender2 .pink {
        background-color:#ff0084;
    }
    div#sampleCalender2 .date_m {
        display:block;
        margin:3px 0; padding:0;
        color:#fff;
        font-weight:bold;
        text-align:center;
    }
    div#sampleCalender2 .date_d {
        display:block;
        margin:5px; padding:5px 0;
        background-color:#fff;
        font-size:1.3em;
        font-weight:bold;
        text-align:center;
        color:#666;
    }
</style>

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