HTMLに詳しい方に質問です。。

質問

http://lab.synck.com/Cal3.0/

このページを改変したいのですが、質問がございます。

カレンダーの「2014年5月」部分を真ん中にし、「>prev」を左端、「<next」を右端という位置にしたいです。
「-」部分は削除します。

この方法が分かりません。ＣＳＳとjsどちらをいじるのでしょうか？

jsのコードの
calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='&lt; prev' />";

という部分からが、該当のソースだということは分かっています。

この問題についておわかりの方いらっしゃいましたらお願いします。

回答No.3

kao03 · ベストアンサー

ホームページ拝見致しました。
修正箇所はいくつかありますので、順を追って書かせていただきます。

■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='&lt; prev' />";
calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />";
calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next &gt;' />";
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='&lt; prev' />";
calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />";
calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next &gt;' />";
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='&lt; 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 &gt;' />";
calHTML += "</div>";
calHTML += "</th>";
－－－－－－－－－－－－－

以上です。

やったことは、
Javascriptの書き出しを
<th>prev</th>
<th colspan='5'>年月日</th>
<th>next</th>
に書き換えて、CSSで指定されていたfloatを無効化。

といった具合です。

ご参考までに。

お礼

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

回答No.2

tumekiri0507

jsを下記のように書き換えて、後はCSSでスタイルを整えましょう。

calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='&lt; prev' />";
calHTML += "<input type='button' onclick='cal_move("+calId+",null);' value='-' />";
calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next &gt;' />";
calHTML += "</div>";
calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p></th></tr>";

↓

calHTML += "<input type='button' onclick='cal_move("+calId+",-1);' value='&lt; prev' />";
calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p>";
calHTML += "<input type='button' onclick='cal_move("+calId+",1);' value='next &gt;' />";
calHTML += "</div>";
calHTML += "</th></tr>";

お礼

jsの詳細、ありがとうございました！！

回答No.1

めとろいと（@naktak）

jsです。
それぞれのブロックなどにidも降られてませんし、HTMLの構造上、
cssでは制御できません。

お礼

ご回答ありがとうございました。