HTMLのカレンダーを改変する方法

2014/05/12 17:17

このQ&Aのポイント

HTMLのカレンダーのデザインを変更する方法について質問です。
特定の部分を中央に表示し、他の部分を左右に配置したいです。
具体的には、カレンダーの「2014年5月」を中央に配置し、「<prev」を左端、「next>」を右端にしたいです。

noname#203427

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kao03
ベストアンサー率87% (7/8)

2014/05/12 18:23 回答No.3

ホームページ拝見致しました。修正箇所はいくつかありますので、順を追って書かせていただきます。 ■CSS (cal.css) －－－－－－－－－－－－－ #36行目 div.cal_wrapper table.cal tr th p { float: left; padding: 5px; margin: 0px; color: #666; font-size: 12px; } ↓以下のように修正します。 div.cal_wrapper table.cal tr th p { /* float: left; */ text-align:center; padding: 5px; margin: 0px; color: #666; font-size: 12px; } ※floatをコメントアウトして、中央揃えのtext-align:centerを入れいます。－－－－－－－－－－－－－ #46行目 div.cal_wrapper table.cal tr th div.cal_ui { float: right; } ↓以下のように修正します。 div.cal_wrapper table.cal tr th div.cal_ui { /*float: right;*/ } ※floatをコメントアウト－－－－－－－－－－－－－ ■JS(cal.js) 145行目 var calHTML = "<table border='0' cellspacing='0' cellpadding='0' class='cal'>"; calHTML += "<tr><th colspan='7'>"; calHTML += "<div class='cal_ui'>"; calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='< prev' />"; calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />"; calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next >' />"; calHTML += "</div>"; calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p></th></tr>"; ↓この部分をまるまる修正しました。まず既存のものはコメントアウト化 /* var calHTML = "<table border='0' cellspacing='0' cellpadding='0' class='cal'>"; calHTML += "<tr><th colspan='7'>"; calHTML += "<div class='cal_ui'>"; calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='< prev' />"; calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />"; calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next >' />"; calHTML += "</div>"; calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p></th></tr>"; */ /* 以下に書き換えました。 */ var calHTML = "<table border='0' cellspacing='0' cellpadding='0' class='cal'>"; calHTML += "<tr>"; calHTML += "<th>"; calHTML += "<div class='cal_ui'>"; calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='< prev' />"; calHTML += "</div>"; calHTML += "</th>"; calHTML += "<th colspan='5'>"; calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p>"; calHTML += "</th>"; calHTML += "<th>"; calHTML += "<div class='cal_ui'>"; calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next >' />"; calHTML += "</div>"; calHTML += "</th>"; －－－－－－－－－－－－－以上です。やったことは、 Javascriptの書き出しを <th>prev</th> <th colspan='5'>年月日</th> <th>next</th> に書き換えて、CSSで指定されていたfloatを無効化。といった具合です。ご参考までに。

質問者

お礼 2014/05/12 18:49

大変詳しくご説明いただき、ありがとうございました。助かりました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

tumekiri0507
ベストアンサー率0% (0/1)

2014/05/12 17:58 回答No.2

jsを下記のように書き換えて、後はCSSでスタイルを整えましょう。 calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='< prev' />"; calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />"; calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next >' />"; calHTML += "</div>"; calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p></th></tr>"; ↓ calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='< prev' />"; calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p>"; calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next >' />"; calHTML += "</div>"; calHTML += "</th></tr>";

質問者