CSSデザインカレンダー・日付
カレンダー風日付表示
unknown
ブログの日付表示をカレンダー風にするサンプルです。
カレンダー風日付表示（画像＋CSS）
カレンダーアイコン入手先: Download: Web 2.0 Date Icons For Your Blog
カレンダー風日付表示（画像＋CSS）サンプルを見る
<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" />
April
13th
June
13th
カレンダー風日付表示（CSSのみ）
カレンダー風日付表示（CSSのみ）サンプルを見る
<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" />
April
13th
June
13th