カレンダー内の数字を左上に配置したい。

質問

http://phpjp.com/sample/g0qDjIOTg1+BWw.htm
上記のサイトを参考に、スケジューラーを作ろうとしています。

カレンダー内の数字を左上にもっていきたいんですけど、前回の質問http://okwave.jp/qa/q8354900.htmlでは解決できなかったので教えてください。

回答No.2

kabudaisuu · ベストアンサー

こんにちわ。

前回、回答したものです。　

前回の回答で、解決しないということなので、追加の回答を、かきました。

もしかしたら、　もしかしたら～～

自分の環境で、やってみたら、変化、ありませんでした。。。。
が、、、よくみたら、各セルが１文字分のサイズしかないので、ちゃんと、できてるはずなのに、
表示が変化してないだけ。でした。

つまり、セルのサイズを、大きくしたら、ちゃんと、できていました。

ちなみに、下記の修正で、テーブル全体を、大きくしてみると、ちゃんと、できてることが、わかります。

　■１５行目を、下記に、修正してみると、いいと、おもう。

　■　echo '<TABLE cellpadding="4" cellspacing="1" style="background-color : #aaaaaa;text-align :

　　↓↓↓　これを、下記に修正してみると、いいと思う。　　↓↓↓

　■　echo '<TABLE width="70%" height="50%" cellpadding="4" cellspacing="1" style="background-color : #aaaaaa;text-align :

　■注意■
　　この間の、修正箇所も、修正したうえで、上記の修正をする、といいかも。

　以上です。

お礼

回答ありがとうございます！

１５行目に
echo '<TABLE width="70%" height="50%" cellpadding="4" cellspacing="1" style="background-color : #aaaaaa;text-align :
の追加で左上になりました！

回答ありがとうございました！

回答No.1

ORUKA1951

御存知のように、HTML要素の属性での指定は詳細度が0として扱われます。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
ユーザーエージェントは、HTMLソースドキュメントの体裁用の属性を尊重してよい。その場合、これらの属性は0に等しい詳細度と対応するCSS規則に変換され、それらは著者スタイルシートの先頭に挿入されたかのように扱われる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#preshint )］より
algn="left" は詳細度0です!!

　一方、要素にstyle属性で指定した場合は詳細度は [1,0,0,0]になります。
　⇒6.4.3 セレクタの詳細度の計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#specificity )
　すなわち、style="text-align:left"は詳細度[1,0,0,0]ですから、スタイルシートでどのように指定しても上書きできません。
　⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
　⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
は、CSS(カスケーディングスタイルシート)の命といえる部分です。だから、仕様書でもプロパティより先に書いてある。
　まず、しっかりと理解しましょう。

PHPからは、style属性やHTMLの属性などの出力は一切せずに!!
<table id="calender">
　<caption>
　　・・・【中略】・・・
　</caption>
　<tbody>
　　<tr>
　　　<td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td>
　　</tr>
　　<tr>
　　　<td>　</td><td>　</td><td>　</td><td>　</td><td>　</td><td>1</td><td>2</td>
　　</tr>
　　<tr>
　　　<td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
　　</tr>
　　<tr>
　　　<td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
　　</tr>
　　<tr>
　　　<td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td id="today">22</td><td>23</td>
　　</tr>
　　<tr>
　　　<td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
　　</tr>
　</tbody>
</table>
のように出力させて、スタイルシートで
table#calender{
font-size:0.9em;
border-collapse:collapse;
border:gray 1px solid;
}
table#calender td#today{
background-color:yellow;
}

table#calender tr td{
border:gray 1px solid;
text-align:left;
height:2em;width:3em;
vertical-align:top;
background-color:silver;
color:red;
}
table#calender tr+tr td{
background-color:white;
}
table#calender tr td+td{
color:black;
}
table#calender tr td+td+td+td+td+td+td{
color:blue;
}
だけでよいですよ。!!