CSS カレンダーをかわいく 6
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー16
/*■■ カレンダー１６ ■■*/
#calendar table {/*全体*/
color:#ffc0ff;/*文字色*/
font-weight:bold;/*太文字*/
font-size: 1.2em;/*文字サイズ*/
border: 2px #ff80ff solid;/*線の太さ 色 線種*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th{
color:#ffffff;/*文字色*/
}
#calendar table td{/*日にち*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
padding: 0;
}
#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 .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
カレンダー17
/*■■ カレンダー１７ ■■*/
#calendar table {/*全体*/
color:#ff00ff;/*文字色*/
font-weight:bold;/*太文字*/
font-size: 1.2em;/*文字サイズ*/
border: 2px #ff00ff dotted;/*線の太さ 色 線種*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#ff00ff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th{
color:#ffffff;/*文字色*/
border: 1px #ff00ff dotted;/*線の太さ 色 線種*/
}
#calendar table td{/*日にち*/
border: 1px #ff00ff dotted;/*線の太さ 色 線種*/
padding: 0;
}
#calendar table td a{/*記事のある日*/
color:#ffccff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
カレンダー18
/*■■ カレンダー１８ ■■*/
#calendar table {/*全体*/
color:#ffc0ff;/*文字色*/
font-weight:bold;/*太文字*/
font-size: 1.2em;/*文字サイズ*/
border-top: 1px #ff80ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-right: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color:#ff00ff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table caption{/*月*/
color:#ff00ff;/*文字色*/
border-top: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff00ff solid;/*線の太さ 色 線種*/
border-right: 1px #ff00ff solid;/*線の太さ 色 線種*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-bottom: 1px #ff80ff solid;/*線の太さ 色 線種*/
padding: 0;
}
#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 .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}