CSS カレンダーをかわいく 3
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color:#999999;/*文字色*/
}
#calendar table caption{/*月*/
color:#666666;/*文字色*/
font-weight:bold;/*太文字*/
}
#calendar table caption a{/*前月翌月*/
color:#666666;/*文字色*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #666666 solid;/*線の太さ 色 線種*/
border-bottom: 2px #666666 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
background-color:#e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff0000;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#999999 ;/*文字色*/
}
#calendar table caption a{/* <<と>> */
color:#666666;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#666666;/*文字色*/
border-bottom: 1px #666666 dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#666666;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #666666 solid;/*線の太さ 色 線種*/
border-bottom: 1px #666666 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
background-color:#e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #999999;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ffffff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #000000;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
font-weight: normal;
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color:#ff33ff;/*文字色*/
}
#calendar table caption{/*月*/
color:#ff33ff;/*文字色*/
font-weight:bold;/*太文字*/
}
#calendar table caption a{/*前月翌月*/
color:#ff33ff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 2px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff0000;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#ff33ff ;/*文字色*/
}
#calendar table caption a{/* <<と>> */
color:#ff33ff;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#ff33ff;/*文字色*/
border-bottom: 1px #ff33ff dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#ff33ff;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color: #ff00cc; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ff00cc;/*文字色*/
background-color: #ffff66; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #ff33ff;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color: #ff33ff;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color:#ffffcc;/*文字色*/
}
#calendar table caption{/*月*/
color:#ff33ff;/*文字色*/
font-weight:bold;/*太文字*/
}
#calendar table caption a{/*前月翌月*/
color:#ff33ff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 2px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff1493;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#ffffff ;/*文字色*/
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
border-bottom: 1px #ff33ff dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#ffffff;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff99ff;/*文字色*/
background-color: #ff00cc; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ff00cc;/*文字色*/
background-color: #ffff66; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #ffffcc;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color: #ffffcc;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color: #666666;/*全体の文字色*/
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #666666;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #999999 solid;/*線の太さ 色 線種*/
border-bottom: 1px #999999 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #999999;/*文字色*/
background-color: #333333; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
padding:3px 0px;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff1493;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#add8e6 ;/*文字色*/
}
#calendar table caption a{/*<< と >>*/
color:#add8e6;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#add8e6;/*文字色*/
border-bottom: 1px #b0e0e6 dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#add8e6;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #4169e1 solid;/*線の太さ 色 線種*/
border-bottom: 1px #4169e1 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#0000cd;/*文字色*/
background-color: #b0e0e6; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #9999cc; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #999999;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ffffff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #000000;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
font-weight: normal;
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}