質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • CSS

    5577questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3875questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSSが反映されません。エラーチェックを利用しても異常がないとなります。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 111

yuunagi3523

score 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>&nbsp;</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>&nbsp;</td>\n';
}
txt+='</tr>';
txt+='</table>';

// 書き出し
document.write(txt);
-->
</script>
  </body>
</html>


このコードのうちの.sun5{background:#F9C;color:#fff;} の部分が反映されていないようです。
私が作成したものです
本来はこちらの表示になります

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/15 14:20 編集

    コード見た限り「sun」クラスはどこにもあてられていません。というかstyleどれも当たってないのでは?trのclassも正しく当たっていませんね。

    キャンセル

  • mts10806

    2018/05/15 14:24

    インデントが全くないのでコードのスコープ、開始・終了が分かりづらくなっています。適切なインデントをつけてください。

    キャンセル

  • mts10806

    2018/05/15 16:06

    どのように解決されたのでしょうか? https://teratail.com/help/question-tips#questionTips4-2 > あなたがどのアドバイスを元に、どのように解決できたのかをお礼とともに伝えましょう。

    キャンセル

回答 2

checkベストアンサー

+3

81行目、day_count'date'の間、クラスがスペースで繋げられていないようです。

txt+='<td id="d'+y+m_display+i_display+'"class="'+ day_en['d'+d]+day_count+' date'+i+'">'+i+'</td>';

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/15 14:27

    定義したCSSが当たるように作られていないので結構改修が必要そうですね。

    キャンセル

  • 2018/05/15 14:33 編集

    と思って確認したらそうでもなかった。失礼しました。

    キャンセル

+1

解決したあとでなんですが、私がコメントで指摘した部分も修正は必要です(正しいコードになっていません)

txt+='<tr class="week"+w+‘">';

txt+='<tr class="week"'+w+'">';


開始の'を追加、閉じの’を半角に。

質問は質問者さん自身のみ編集できるので、
今後指摘があったときにはなるべく対応してください。
回答に必要な情報が不足しているという指摘であることも多いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5577questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3875questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。