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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1250閲覧

カレンダー作成での質問

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/14 11:17

前提・実現したいこと

HTMLとJavascriptを使用してカレンダー表を作成しているのですが、
うまくカレンダー内に以下のコードだと添付ファイルのようにはみ出して
カレンダーが表示されてしまいます。
原因と対処方法(修正コード)を教えて欲しいです。
イメージ説明

該当のソースコード

<script>

    const weeks = ['日', '月', '火', '水', '木', '金', '土'];
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth()+1;
const start = new Date(year, month-1,1); //月初めの取得
const end = new Date(year, month,0); //月終わりを取得
const startDay = start.getDay(); // 月の最初の日の曜日を取得
let dayCount = 1; // 日にちのカウント
const endDayCount = end.getDate(); // 月の末日
//Header作成
function calendarHeading(year, month){
year.text(year);
month.text(month + 1);
}

    // 曜日の行を作成     for (var j = 0; j < weeks.length; j++) { document.write("<th>",weeks[j],"</th>"); } for (var w = 0; w < 5; w++) { document.write("</tr>"); for (let d = 0; d < 7; d++) { if (w == 0 && d < startDay) { document.write("<td><td>") }else if (dayCount > endDayCount) { document.write("<td><td>"); } else { document.write("<td>",dayCount,"</td>"); dayCount=dayCount+1; } } document.write("</tr>"); } </script>
ソースコード

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/06/14 11:30

コードはマークダウンのcode機能を利用してご提示ください。 また、document.write()による出力は基本的に推奨されない実装なので、参考先かえたほうが良いかと。
guest

回答1

0

ベストアンサー

空のセルを表示するのに document.write("<td><td>") としているので、td 要素が 2 つできます。
後ろを </td> にしましょう。

また、w < 5 だと月によっては入りきらない場合がありますね。今年の 8 月とか。

投稿2020/06/14 11:32

hoshi-takanori

総合スコア7893

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/06/14 11:54

tdの方/tdに変更して修正できました。ご回答ありがとうござます。w<6としてしまいますと、月末の下に28,29,30の余白のができてしまいますが、ここはどのようにして削除すればよろしいでしょうか?
Daregada

2020/06/14 13:08

wが5の週を必要とする条件を考えればいいかと。wが1から4の週の28日間に収まらず、wが5の週にはみ出るのは、wが0の週の何曜日スタートなのか、小の月と大の月で図にでもしてみればいい。
Daregada

2020/06/14 16:47 編集

あと、tr で囲んで1行分のデータを作るはずの処理で、開始タグにも /tr と書いてある点と、th で作る曜日を tr で囲んでいない点が気になります。
hoshi-takanori

2020/06/14 19:42

ループの条件を「表示すべき日が残ってるか」にすればいいので、w < 5 の代わりに dayCount <= endDayCount にするとか。なお、2 月はたまに 4 行で収まることになります。2015 年とか 2026 年とか。 また、よく見たら tr は開始タグがないですね。</tr> をテーブルの行を終了させるための独立したタグだと思ってませんか? HTML はタグを省略することもできてしまいますが、バグのもとなので、基本的に開始タグと終了タグをバランスさせるように心がけることをお勧めします。
退会済みユーザー

退会済みユーザー

2020/06/18 01:00

ご返信遅れて申し訳ありません。頂いたコメントをもとに修正できました。 /trについては記載ミスでした。コメントいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問