現在、javascriptの学習のために、下記のサイトを参考にしてカレンダーを作っております。
http://www.allinthemind.biz/markup/javascript/calendar.html
形は完成したのですが、CSSで一部書いた色のコードが反映されません。
https://jigsaw.w3.org/css-validator/validator.html.ja
こちらのサイトでCSSの構文チェックをしたのですが、異常はないと出てしまいました。
他に原因があるのでしょうか。
コードは以下のものになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>2018年5月</title> <style type="text/css"> <!-- .month1 .date1,/* 元日 */ .month1 .mon2,/* 成人の日 */ .month2 .date11,/* 建国記念の日 */ .month4 .date29,/* 昭和の日 */ .month5 .date3,/* 憲法記念日 */ .month5 .date4,/* みどりの日 */ .month5 .date5,/* こども日 */ .month7 .mon3,/* 海の日 */ .month9 .mon3,/* 敬老の日 */ .month10 .mon2,/* 体育の日 */ .month11 .date3,/* 文化の日 */ .month11 .date23,/* 勤労感謝の日 */ .month12 .date23,/* 天皇誕生日 */ #d20110321,/* 春分の日(年によって異なる 20日 ? 21日) */ #d20110923,/* 秋分の日(年によって異なる 20日 ? 24日) */ .sun1, .sun2, .sun3, .sun4, .sun5{background:#F9C;color:#fff;} --> </style> </head> <body> <script type="text/javascript"> <!-- //取得したい年月の設定 var y =new Date().getFullYear(); var m =new Date().getMonth()+1; //初期設定 var feb_date = (y%4 == 0 && y%100 != 0)?29:28;/*閏年チェック*/ if(y%400 == 0){feb_date = 29}; var month_count = {1:31,2:feb_date,3:31,4:30,5:31,6:30,7:31,8:31,9:30,10:31,11:30,12:31}; var day_en={d0:"sun",d1:"mon",d2:"the",d3:"web",d4:"thu",d5:"fri",d6:"sat"};/*曜日の文字列設定*/ var m_display = (m<10)?"0"+String(m):m; /*月の0付き表示設定(例:1月であれば「01」*/ var last_day=new Date(y,m-1,month_count[m]).getDay(); /*その年月の最終日は何曜日かを設定 */ /*その年月の1日は何曜日か、第1週目で、1日であることを設定*/ var first_day=new Date(y,m-1,1).getDay(); var w=1; var d=first_day; // マークアップ生成 var txt=""; txt+='<h1>'+ y +'年'+ m_display +'月のカレンダー</h1>'; txt+= '<table summary="'+y+'年'+m_display+'月のカレンダー" class="calendar month'+m+'">'; txt+='<tr>'; txt+='<th>SUN</th>'; txt+='<th>MON</th>'; txt+='<th>TUE</th>'; txt+='<th>WED</th>'; txt+='<th>THU</th>'; txt+='<th>FRI</th>'; txt+='<th>SAT</th>'; txt+='</tr>'; txt+='<tr class="week1">'; /*その年月の1日がはじまる曜日までの空白セル生成*/ for(var j=0;j<first_day;j++){ txt+='<td> </td>'; } /*その年月の日数分ループ処理*/ for(var i=1;i<=month_count[m];i++){ /*土曜日と日曜日の間の処理*/ if(d !=0&&(first_day+i)%7==1){ w++; d=0; txt+='</tr>'; txt+='<tr class="week"+w+‘">'; } /*日の0付き表示設定(例:1日であれば「01」*/ var i_display=(i<10)?"0"+String(i):i; day_count=(i%7==0)?Math.floor(i/7):Math.floor(i/7)+1; txt+='<td id="d'+y+m_display+i_display+'"class="'+ day_en['d'+d]+day_count+'date'+i+'">'+i+'</td>'; /*表示例:<td id="d20110801" class="mon1 date1">1</td>*/ d++; } //その年月の最終日以降の空白セル生成 for(var j=0;j<(6-last_day);j++){ txt+='<td> </td>\n'; } txt+='</tr>'; txt+='</table>'; // 書き出し document.write(txt); --> </script> </body> </html>
このコードのうちの.sun5{background:#F9C;color:#fff;}
の部分が反映されていないようです。
2つの画像はそれぞれどういう意味なのか説明を入れてください。
また、ブラウザの開発ツールよりそれぞれきちんと反映されているか確認してみましたか? https://saruwakakun.com/html-css/basic/chrome-dev-tool
コード見た限り「sun」クラスはどこにもあてられていません。というかstyleどれも当たってないのでは?trのclassも正しく当たっていませんね。
インデントが全くないのでコードのスコープ、開始・終了が分かりづらくなっています。適切なインデントをつけてください。
どのように解決されたのでしょうか? https://teratail.com/help/question-tips#questionTips4-2 > あなたがどのアドバイスを元に、どのように解決できたのかをお礼とともに伝えましょう。
回答2件
あなたの回答
tips
プレビュー