Javascript (カレンダー003_デザイン検討)

■カレンダーのデザインについて検討してみる。

見た目として分かりやすいだろうデザインから取りかかる。
前に作成イメージとして挙げた内容は下のもの。
・土曜が青、日曜が赤
・数字同士の間に仕切りがある。
・曜日はMon, Tueなどの英語の略語
・メモを入れた日付の背景色を変更する。
・携帯でも見やすいフォント、サイズになるようにする。
それで今のかたちがこれ。

サンプルのコードを見ていくと、htmlの<table>を使って作成していたので、tableの属性を付加していく。調べると、border, cellspacing, cellpadding, bordercolor, align, font colorなどなど設定できるので、コードに追加してみた。で、できたのが下のもの。

これのtable全体の設定は、width="300", style="font-size: 10pt", border="5", bordercolor="#ffcc66"。幅が均等になっていないので、もう少し検討するつもりだけど、色や区切りやフォントのサイズなど変えたいところはtableの属性でなんとか実現できそう。どんな感じがいいかいくつか試してみる。

cellspacing="0", cellpadding="10" style="font-size: 10pt" border="5", bordercolor="#ffcc66"
cellspacingは、各セル間の距離を示すよう。0にしたら、隣同士がくっついて1本の線みたいになった。

width="100%" border="10" cellspacing="10" cellpadding="5" bordercolor="#ffcc66"
widthを100％として設定すると、ブラウザのサイズに合わせてカレンダーのサイズも変更された。

width="100%" border="2" cellspacing="5" cellpadding="20" bordercolor="#00FFFF"
cellpaddingは、セル内のスペースを決めているよう。値を大きくしたら、余白が大きくなった。

width="300pt" style="table-layout: fixed;" border="3" cellspacing="0" cellpadding="5" bordercolor="#ffcc66"
列の幅をそろえる方法としてtable-layoutのセッティングがあった。
デザイン的なところは一端満足したので、今後これで進めていく。