読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

シンプルなカレンダー(表側だけ)を作りました

制作 CSS

どうも!chuckです。

 

昨日は家計簿アプリを作成し始めましたが、今日はカレンダーを作り始めました。

 

chuckwebtips.hatenablog.com

 

 

まず見た目はこんな感じ。

f:id:chuck0523:20150531110612p:plain

 

○なぜ作ろうと思ったのか

自己管理の必要性をひしひしと感じていて、主に時間とお金を管理するツールを作りたかったため。そのための土台としての自作カレンダー。

 

○参考にしたサイト様

www.red.oit-net.jp

いや、参考というか、ほぼ丸パクリです。。(´Д⊂

コードを全体的にJavaScriptからjQueryに書き換えました。

 

○カレンダーの今後

今日作ったカレンダーはまだ表側だけ、つまり見た目だけです。

この中にプログラミングの勉強予定や、昨日作り始めた家計簿アプリのデータを挿入したいと思ってます。

 

○次やること

  • 予定追加機能をつける
  • 「前の月へ」「次の月へ」機能をつける

 

乞うご期待!

 

今回お世話になったサイト様↓↓

w3g.jp

カレンダー内のセルを均等幅にするのに役立ちました。

というか、Tableタグ内のtd要素だからそもそも均等でしたね(*´Д`)

 

 

tableタグで出来るセル間の隙間をcellspacing="0", cellpadding="0"を使わずCSSで消す方法 - Eiji

border-collapseのスペルが分からず救われました。

 

www.htmq.com

セル内の日付を上寄せするのに役立ちました。

思えばvertical-align:middleしか使ったことなかったかも。。

上寄せはvertical-align:topなんですね!

 

 

○書いたコード

といってもほぼコピペなんですけど(´;ω;`)

gist.github.com

 

gist.github.com