Q&A
2つの画像はそれぞれどういう意味なのか説明を入れてください。
現在、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;} の部分が反映されていないようです。
また、ブラウザの開発ツールよりそれぞれきちんと反映されているか確認してみましたか？ https://saruwakakun.com/html-css/basic/chrome-dev-tool
コード見た限り「sun」クラスはどこにもあてられていません。というかstyleどれも当たってないのでは？trのclassも正しく当たっていませんね。
インデントが全くないのでコードのスコープ、開始・終了が分かりづらくなっています。適切なインデントをつけてください。
どのように解決されたのでしょうか？ https://teratail.com/help/question-tips#questionTips4-2 > あなたがどのアドバイスを元に、どのように解決できたのかをお礼とともに伝えましょう。
回答2件
0
ベストアンサー
81行目、day_countと'date'の間、クラスがスペースで繋げられていないようです。
js
1txt+='<td id="d'+y+m_display+i_display+'"class="'+ day_en['d'+d]+day_count+' date'+i+'">'+i+'</td>';
投稿2018/05/15 05:20
編集2018/05/15 05:23
総合スコア3404
定義したCSSが当たるように作られていないので結構改修が必要そうですね。
と思って確認したらそうでもなかった。失礼しました。
0
解決したあとでなんですが、私がコメントで指摘した部分も修正は必要です（正しいコードになっていません）
js
1txt+='<tr class="week"+w+‘">';
↓
js
1txt+='<tr class="week"'+w+'">';
開始の'を追加、閉じの’を半角に。
質問は質問者さん自身のみ編集できるので、
今後指摘があったときにはなるべく対応してください。
回答に必要な情報が不足しているという指摘であることも多いです。
投稿2018/05/15 05:56
総合スコア80842
あなたの回答
tips
プレビュー
