« BSDの知識がMacOSXで役立つ時 | メイン | Ｎｏｒａｈ Ｊｏｎｅｓ »
2004年03月03日
ＩＥ５系でカレンダーを「はみ出させない」検討
IE5 系での、カレンダーの「はみ出し」に対応してみたので、自分用メモ。
既に、Suketta さんと言う方が、IE5でもココログのカレンダーをはみ出させない方法 でカレンダーの幅を % で指定する方法を紹介されている。
説明も詳しいので、実際に試してみる方は、そちらを先に参照されたい。（他に、サイドバー自体の幅を広げる方法もある様である。）
さて、私の方は、狙いとして、直接、幅を168pxで指定してみた。
サイドバーの幅が 200px なので、 padding から計算すると170px で良いと思うが、フォントの関係からか、曜日ごとの横幅がまちまちになってしまったので、微調整した。
まず、私の選んだ「無地」のオリジナル css でのカレンダー関連部分は、
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}
#calendar th {
text-align: center;
font-weight: normal;
}
#calendar td {
text-align: center;
}
となっており、そのままだと、左図の様になる。
ここで、幅と、文字サイズが問題と考え以下の様にしてみる。（キャプションのデザインや、文字色は事前に変更済みとし、今回は説明しない。）
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 168px; /* 変更 */
}
#calendar th {
text-align: center;
font-weight: normal;
font-size: 10px; /* 追記 */
}
#calendar td {
text-align: center;
font-size: 10px; /* 追記 */
}
こうして文字が小さく、幅も収まる様になったのが左図。（ただ、「金曜日」の幅が小さい。）
しかし、これでも まだ、IE4 では、左図の様にキャプションがはみ出している。そこで、いろいろ検討し数字のみ多少大きくしたりして、
#calendar {
line-height: 140%;
color: #336633;
font-family: "Courier New", serif; /* 念の為 */
font-size: 10px;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}
#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 168px; /* 変更 */
}
#calendar th {
color: #00aa00;
text-align: center;
font-weight: normal;
font-size: 10px; /* 追記 */
font-family: "Courier New", serif; /* 追記 */
padding: 1px; /* 追記 */
margin: 2px 0px; /* 追記 */
}
#calendar td {
color: #669966;
text-align: center;
font-family: Tahoma, Geneva, Verdana, Arial, sans-serif; /* 追記 */
font-size: 12px; /* 追記 */
padding: 2px 1px; /* 追記 */
margin: 2px 0px; /* 追記 */
}
こんな感じで落ち着いた。フォントは好みの問題もあると思うが、等幅フォント系を指定する方が、曜日毎の幅の差が小さくなる。
あと、padding や margin は、妙に横長になってしまうのを回避したかったので追加してみた。
当然、文字色などは、背景色に合わせて調整しないと見づらくなるので、念の為。他に、リンク上にマウスポインタが来た時に背景色が変化する指定などを加えて（その説明は他の方も書かれているので省略）、最終的にこのページの左上の様になっている。
スタイルシートを二枚重ねにする事や、その方法の是非などは、既に色々な方のページで議論されているので、ここでは問題にしない。
更に、元々用意されているテンプレートなどで、文字サイズを大・中・小などとしているのは、老人の方などを考慮しての物である事も理解してはいるが、それでも「土曜日」が見えないと言うのでは、私は本末転倒だと思うし、マシンスペックの問題等からブラウザをすぐにアップグレード出来ない場合もあると思われるので、「IE5 系は切り捨てる」と言うのもナンセンスだと思っている事を付け加えておく。
投稿者 savabigi : 2004年03月03日 03:29 | [ ウェブログ・ココログ関連 ]
コメント
SavaBigiさん、はじめまして。
カレンダーの調整、参考にさせていただきました。
私の標準ブラウザはIEなのですが、確認のために他のブラウザでも見ております。
オペラ6.05 もカレンダーははみ出していたんです。カスタマイズ後、おかげさまではみ出さなくなりました。
古いブラウザで見てくださっている方もいるので、よかったです♪
自力ではできなかったので、このように記事に上げてくださって感謝です。
ありがとうございました。
投稿者 kuu : 2004年03月03日 05:02
コメント、どうもありがとう御座いました。ここの管理人です。
私よりもココログ歴の長い方に試して頂けるとは思ってもみなかったので、恐縮です。(^_^;)
「風茶房 日々雑記」さんの方でも、コメントさせて頂きましたが、素敵なブログですよね。
Opera は、試して無かったので、多少焦りましたが、カレンダーも、私のページよりも綺麗に仕上げてくださっていたので、ちょっと安心しました。(^-^)
また、時間がある時にでも、関連の別記事を書かせて頂くかも知れません。では。
投稿者 SavaBigi : 2004年03月04日 14:33