カレンダープログラミングコンテストその5

その1、その2、その3、その4の続き。
こんなのはどうだろう？

HTML+CSS+Javascript版

<!DOCTYPE html> <html lang="ja"> <head><title>calendar</title></head> <body> <p id="cal" style="font-family: monospace; width: 10em; background: white; color: black;">  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <span id="d29">29</span> <span id="d30">30</span> <span id="d31">31</span> </p> <script type="text/javascript"> var t = new Date(); var count = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate(); var offset = new Date(t.getFullYear(), t.getMonth(), 1).getDay(); var d1 = document.getElementById('d29'); var d2 = document.getElementById('d30'); var d3 = document.getElementById('d31'); var c = document.getElementById('cal'); if( count < 29 ){ d1.style.display = 'none'; } if( count < 30 ){ d2.style.display = 'none'; } if( count < 31 ){ d3.style.display = 'none'; } c.style.textIndent = 3*0.5*offset + "em"; </script> </body> </html>
カレンダーを出力するブロック要素のフォントをmonospaceにして7日分の幅に固定し、text-indent で1日より前の空白を作っている。中身は1〜31の数字を流し込んでいるだけで、29日から31日は、その日付が存在しない場合は display を none にして消している。
※ インライン要素にも display が使えたみたいだったので、最初は色を背景と同じにしていたのを修正した。