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

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

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

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

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

JavaScript

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

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

CSS

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

Q&A

2回答

2013閲覧

カレンダーの背景の設定方法教えてください。

b1ackc0ffee

総合スコア267

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

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

JavaScript

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

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

CSS

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

0グッド

0クリップ

投稿2015/11/13 04:03

Xcodeで、

カレンダーを作成しています。
日曜日始まりの土曜日までで1行のテーブルにしたいです。
できるところから書いているので間違いいっぱいあるかと思うのですが、
日曜日の背景を赤、文字を黒
土曜日の背景を青、文字を白
にするにはどうしたらよいのでしょうか。
色々と省略していますが、
なくてはならない情報があれば教えてください。

1コマずつ作成していマス。

html

1<h3 id="thismonth" >0年00月</h3>

css

1div#main table thead tr th.sun, 2div#main table thead tr th.sat { 3 background-color: #929292; 4} 5 6div#main table tbody tr td { 7 background-color: #fff; 8 text-align: left; 9 border: none; 10 border-left: 1px solid #E3E3DD; 11 border-top: 1px solid #E3E3DD; 12 padding: 0.3em; 13 vertical-align: top; 14} 15

javascript

1 2 3//テーブルヘッダー 4var html = ""; 5 6 7html += nowyear + '年' + nowmonth + '月; 8 9 10$("#thismonth").html(html); 11 12 13html = ""; 14 15 16html +='<thead><tr><th class="sun">日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th class="sat">土</th></tr></thead>'; 17 18 html +='<tbody>' 19 20 21 22 23//1日の曜日までの空欄 24 25var blank = now.getDay(); 26var count = 0; 27for(var i = 0 ; i < blank ; i++) { 28 29 30 if(count % 7 == 0) { 31 32 html +='<tr>'; 33 34 } 35 36 37 html +='<td></td>'; 38 39 count++; 40 41 42} 43 44 45 46 47 48//日にち 49 50for(var i = 1 ; i <= days ; i++) { 51 52 53if(count % 7 == 0) { 54 55html +='<tr>'; 56 57 58} 59 60count++; 61 62 63if(count % 7 == 0) { 64 65html +='</tr>'; 66 67week++; 68 69} 70 71 72} 73 74 75 76// 最後の日から土曜までの空欄 77 78while(count % 7 != 0) { 79 80 81html +='<td></td>'; 82 83count++; 84 85if(count % 7 == 0) { 86 87html +='</tr>'; 88 89week++; 90 91} 92 93 94}

宜しくお願いいたします。

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

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

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

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

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

guest

回答2

0

必要最小限で書くとこんな感じですね。

html

1<!DOCTYPE HTML> 2<html lang="ja-JP"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 tr > th:first-child, 8 tr > td:first-child { 9 background-color: red; 10 color: black; 11 } 12 tr > th:last-child, 13 tr > td:last-child { 14 background-color: blue; 15 color: white; 16 } 17 </style> 18 </head> 19 <body> 20 <table> 21 <thead> 22 <tr> 23 <th></th> 24 <th></th> 25 <th></th> 26 <th></th> 27 <th></th> 28 <th></th> 29 <th></th> 30 </tr> 31 </thead> 32 <tbody> 33 <tr> 34 <td>1</td> 35 <td>2</td> 36 <td>3</td> 37 <td>4</td> 38 <td>5</td> 39 <td>6</td> 40 <td>7</td> 41 </tr> 42 <tr> 43 <td>8</td> 44 <td>9</td> 45 <td>10</td> 46 <td>11</td> 47 <td>12</td> 48 <td>13</td> 49 <td>14</td> 50 </tr> 51 <tr> 52 <td>15</td> 53 <td>16</td> 54 <td>17</td> 55 <td>18</td> 56 <td>19</td> 57 <td>20</td> 58 <td>21</td> 59 </tr> 60 <tr> 61 <td>22</td> 62 <td>23</td> 63 <td>24</td> 64 <td>25</td> 65 <td>26</td> 66 <td>27</td> 67 <td>28</td> 68 </tr> 69 <tr> 70 <td>29</td> 71 <td>30</td> 72 <td>31</td> 73 <td></td> 74 <td></td> 75 <td></td> 76 <td></td> 77 </tr> 78 </tbody> 79 </table> 80 </body> 81</html>

投稿2015/11/13 13:09

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

b1ackc0ffee

2015/11/17 04:43

ご回答ありがとうございます。 cssの方で名前を付けることもできるんですね!! 知りませんでした。 先頭と末に空白セルを入れたりしたいのと、 htmlをシンプルにして、プログラムの方で表示できるようにしたいと思っています。 宜しく願いいたします。
guest

0

Xcodeと書いてありますが、内容から察するに、HTMLとCSSとJavaScriptの話だと思いますので、その前提で回答させていただきます。

土曜、日曜、平日でそれぞれ異なるスタイルを適用してあげれば良いと思います。

やり方はいくつかあるとは思いますが、以下サンプルコードでは、
0. テーブルとスタイルをあらかじめ用意しておき、中身は空っぽにしておく
0. JavaScriptで1日から末日までデータを埋めていく
という流れで作成してあります。

ご参考になれば。

【サンプルコード】

html

1<html> 2<head> 3<style> 4.sunday { 5 color: black; 6 background-color: red; 7} 8 9.saturday { 10 color: white; 11 background-color: blue; 12} 13</style> 14</head> 15<body> 16<table id="calendar"> 17 <tr><th class="sunday">SUN</th><th>MON</th><th>TUE</th><th>WED</th><th>THU</th><th>FRIE</th><th class="saturday">SAT</th></tr> 18 <tr><td class="sunday"></td><td></td><td></td><td></td><td></td><td></td><td class="saturday"></td></tr> 19 <tr><td class="sunday"></td><td></td><td></td><td></td><td></td><td></td><td class="saturday"></td></tr> 20 <tr><td class="sunday"></td><td></td><td></td><td></td><td></td><td></td><td class="saturday"></td></tr> 21 <tr><td class="sunday"></td><td></td><td></td><td></td><td></td><td></td><td class="saturday"></td></tr> 22 <tr><td class="sunday"></td><td></td><td></td><td></td><td></td><td></td><td class="saturday"></td></tr> 23</table> 24 25<script> 26// 現在日を取得 27var now = new Date(); 28 29// 今月の1日の年月日を指定 30var first = new Date(now.getFullYear(), now.getMonth(), 1); 31 32// 1日の曜日を判定 33var weekOfFirst = first.getDay(); 34 35// 今月の末日を判定 36var monthOfNow = now.getMonth(); 37var monthOfNext = now.getMonth() + 1; // 来月 38 39if (monthOfNext == 12) { // 来月が13月になってしまったら、 40 monthOfNext = 0; // 1月とする 41} 42 43// 来月の0日を調べると、今月の末日がわかる 44var lastDay = new Date(now.getFullYear(), monthOfNext, 0).getDate(); 45 46// 日付を1から開始 47var i = 1; 48 49// 1行目から5行目までループ 50for (var row = 1; 5 >= row; ++ row) { 51 // 1列目から7列目までループ 52 for (var col = 0; 7 > col; ++ col) { 53 // 1行目だけ、1日の曜日になるまで空打ち 54 if (row == 1 && weekOfFirst > col) { 55 continue; 56 } 57 58 // 最後の日に達したら、それ以降すべて空打ち 59 else if (i > lastDay) { 60 continue; 61 } 62 63 document.getElementById("calendar").rows[row].cells[col].innerHTML = i; 64 ++ i; 65 } 66} 67</script> 68</body> 69</html>

投稿2015/11/13 12:59

pizza

総合スコア27

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

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

b1ackc0ffee

2015/11/17 03:15

分かりやすい変数名で、丁寧に教えていただき、本当にありがとうございます。 理解しやすかったです。 --- 質問なんですが、 // 現在日を取得 var now = new Date(); してからでないと、 // 来月の0日を調べると、今月の末日がわかる var lastDay = new Date(now.getFullYear(), monthOfNext, 0).getDate(); できない理由がわかりません。 nowはすでにnewされたものなのに、再度newしないといけないのでしょうか。 getHogehogeはnewされたオブジェクトに対して使えるものでしょうか? var lastDay = new Date(now.getFullYear(), monthOfNext, 0).getDate(); の部分で、new Dateをとるか、nowをとるか、どっちもとるかできますか? 論理的思考が苦手で、余計なことを思いついてしまう悪い癖があります。 --- できたら、プログラムでhtmlに<td>を追加していきたいのですが、 styleなどつけなくていいので、単純に日を出すには、 どこを直せばよいでしょうか。 【html】 <table> <thead class="thead"> <th class="sun">日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th class="sat">土</th> </thead> <tbody class="tbody"> </tbody> </table> 【css】 th.sun{ background-color:red; color:white; } th.sat{ background-color:blue; color:white; } 【JS】 //今月のカレンダーを出すプログラム //色々お試しなので使えない変数や関数あり //一か月の日数 今月の0日目で先月の最後が何日か取得できる //本日のデータをすべて取得 var DateInfo = new Date(); console.log(DateInfo); //今日が何日か取得 var today_date = DateInfo.getDate(); console.log(today_date); //今月の0日目が何日化を最短で取得 var lastMonth_lastDay = getDate(2015/11/17,1).getDate(); console.log(lastMonth_lastDay); //今月の0日目が何日化を最短で取得 var lastMonth_lastDay02 = new Date((getYear(),getMonth(),0)).getDate; console.log(lastMonth_lastDay2); //今月の0日目が何日化を最短で取得 var lastMonth_lastDay02 = new Date(DateInfo.getYear(),getMonth(),0).getDate(); console.log(lastMonth_lastDay3); var html; $(function(){ //一週間の処理 for(days = 1; days < 30 ; days ++){ html += "<td>"; } }); console.log(html); $(table.tbody).html(html); --- 以上 宜しくお願いいたします。
pizza

2015/11/17 05:17

まず最初の質問「現在日を取得してからでないと今月の末尾がわからない理由」について回答します。 これは、目的としては、閏年になるべく単純に対応するためにそのように記述しました。 他、11月は30日までですが、12月は31日まで、というように、その月が何日まであるかを調べるのに、JavaScriptでは、Dateオブジェクトをnewするときの3番目の引数(日付)に0を指定することによって、その前の月の末日を表すDateインスタンスを生成できるという仕様を利用しました。 > nowはすでにnewされたものなのに、再度newしないといけないのでしょうか。 > getHogehogeはnewされたオブジェクトに対して使えるものでしょうか? > var lastDay = new Date(now.getFullYear(), monthOfNext, 0).getDate(); > の部分で、new Dateをとるか、nowをとるか、どっちもとるかできますか? > 論理的思考が苦手で、余計なことを思いついてしまう悪い癖があります。 細かく説明すると長くなりそうなので、先にポイントだけ書きますが、now と new Date(year, month, day) は、別々のオブジェクトです。 ・new Date() のように、引数なしで Date を生成した場合は、現在日時を表す Date オブジェクトが生成されます。 ・new Date(year, month, day) のように、年月日を指定した場合は、その日付を表す Date オブジェクトが生成されます。 そして、ここが一番重要ですが、 > getHogehogeはnewされたオブジェクトに対して使えるものでしょうか? まさにその通りです。 getHogehogeはメソッドであり、newされたオブジェクトに対して使える命令です。 この辺り、論理的思考もそうですが、オブジェクト指向というものを学習されると、理解しやすいかと思います。 上記コードを詳しく解説すると、 ・now と lastDay は別のインスタンスです。 ・now は現在日時を記憶しているDateクラスのインスタンスです。 ・それとは別に、lastDay という末日を表す整数クラスのインスタンスを生成しています。 ・lastDay を取得するために、一時的に、 new Date(now.getFullYear(), monthOfNext, 0) という今月の末日を表すDateインスタンスを生成して、そこから日付だけを整数値として取り出しているのがgetDateメソッドにあたります。 --- > できたら、プログラムでhtmlに<td>を追加していきたいのですが、 > styleなどつけなくていいので、単純に日を出すには、 > どこを直せばよいでしょうか。 JavaScriptでは、tdエレメントを「セル」として扱います。 「指定した行にセルを追加する」という手順を踏む必要があるので、まずはセルを追加する先の「行」が必要です。 【事前準備(HTML)】 ・テーブルにidをつけておく 【JavaScriptで行を追加する手順】 ・getElementById でテーブルを参照する ・テーブルに対して insertRow メソッドを呼び出して、行を追加する ・insertRow した戻り値が新規に追加された行オブジェクトである 【新規行に対してセル(td)を追加する手順】 ・insertRow の結果の行オブジェクトに対して、insertCell メソッドを呼び出す ・その戻り値がセルオブジェクトである 【既存の行に対してセル(td)を追加する手順】 ・getElementById でテーブルを参照する ・テーブルに対して rows[行番号整数] として、行オブジェクトを参照する ・その行オブジェクトに insertCell メソッドを呼び出す insertCell の結果(戻り値)がセルオブジェクトですので、そのセルに対して表示用のテキストノードを追加してやればうまくいくと思います。 実際のコードはこの辺を参考にしてみてください。 https://developer.mozilla.org/ja/docs/Web/API/HTMLTableElement/insertRow
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問