ベストアンサー

ホームページにカレンダーを設置するには

2013/03/12 14:43

http://loco.yahoo.co.jp/osaka/event/?date=20130312 このサイトの左側にカレンダーありますよね。僕も見習って、参考に作ってみました。テーブルタグを使って、枠組みはできるのですが、背景白の、黒文字だけの殺風景なカレンダーになってしまいます。こういうふうに色づけて、きれいなカレンダーにするにはどのようなテクニックが必要なのでしょうか？

t-pop-corn-t
お礼率32% (102/311)

CSS
回答数3
ありがとう数2

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

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

ベストアンサー

noname#187595

2013/03/13 15:58 回答No.2

>質問に書かせていただいたURLのカレンダーって、翌月表示や前月表示もできてますよね。これは単純にtableなどで組むだけではできません。 javascriptやphpなどを用いるか、ブログパーツなどのカレンダー機能のレンタルが必要になります。一番カンタンなのはカレンダー機能のレンタルですが、デザインを独自のものにしたいなら、javascriptやphpなどを用いるのがよいでしょう。ただしある程度のプログラムの知識が必要になります。お使いのサーバによってはphpが使えない場合もあるでしょうから、条件に合わせて選択してください。【javascriptの場合】 http://www.synck.com/contents/download/javascript/cal2.1.html http://user1.matsumoto.ne.jp/~goma/js/calendar2.html など【phpの場合】 http://shanabrian.com/web/php_calendar.php http://rasukaru55.sitemix.jp/calendar_setumei.php など【カレンダー機能のレンタルの場合】 http://www.bparts.jp/calendar/calendar01.php ブログパーツカレンダー - Google 検索 http://goo.gl/bQHG9 など

質問者

お礼 2013/03/14 12:43

こんなものがあるんですね！知らなかったです。しかも、僕の理想とするものが含まれていました。このJAVAを少し改良して自分のWEBにあうようにしていきたいと思います。大変ありがとうございました！！

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/03/13 17:12 回答No.3

＞翌月表示や前月表示もできてますよね。これって、どうやるのでしょうか？　これは、ページ自体が動的に作成されているのです。実際にどの技術が使われているかは、利用者からはわかりませんが、PHPなりCGI、あるいは、それを利用してつくられたカレンダーをincludeしているだけかもしれません。　このように当月の行事や数ヶ月先のカレンダーも表示できるものは、動的に作成されていると考えて良いでしょう。　カレンダーの上の矢印でカレンダーを移動してもページのURLは変わりませんが、カレンダーの上の「2013年4月」とかだと、URLが変わりますが、カレンダー自体はまったく変化しません。ページ自体はQUERY_STRINGSを判断してページを作成していますが実際には内容は変わっていません。?date=201301とかにしてみるとわかります。　これから推測できるのは、ページ自体はPHPなりCGIを利用してはいますが、それはページの大部分を占める部分をいちいち書かなくて済む程度にしか利用していません。行事内容だけ入力する仕組みになったいるのでしょう。カレンダーも固定コンテンツに含まれているようです。　そのうえで、それをスタイルシートでひと月分しか見えないようにしています。ブラウザの[表示メニュー]から「スタイルシート無し」にすると3か月分表示されます。　これなら、同じようなフォーマットで、複数のカレンダーを作成し、毎月３ヶ月分のファイルを作成します。　それをinclude--ご利用のサーバーがSSIを許可していれば、簡単なコマンドをHTML内に書くだけです。  とか　SSIが許可されていれば、拡張子をshtmlにして・・　なお、ページの拡張子は関係ありません。htmlをSSIとして動作させることも出来ます。　なお、javascriptでカレンダーを設置するのか簡単かもしれません。ただし、これはユーザーの環境に依存します。個人のサイトならそれでも良いでしょう。

質問者

お礼 2013/03/14 12:41

んー。。。何かややこしそうですね。僕はCSSとHTMLしかかじってなくて、JAVAとかPHPはまったくの素人ですので、もっとお勉強して出直してきます。今回の件でJAVAとは何かPHPとは何かということが大雑把にわかったのは、よい収穫でした。ありがとうございました

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/03/12 18:21 回答No.1

単純にtableでカレンダーを書くことは出来たのですから、あとはスタイルシートでデザインしていきます。　良いデザインを見つけたら、自分で試してみること。 ★タブは＿に置換してあるので戻して ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strict + CSS3です。　古いブラウザにも対応させるなら背景はlinear-gradientではなく、background-imageを利用したほうが良いでしょう。　 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここは本文エリア</p> ＿＿<p>ウインドウ幅は480px～幅広まで</p> ＿＿<div class="aside"> ＿＿＿<table summary="2013年3月のカレンダー" class="calendar"> ＿＿＿＿<thead> ＿＿＿＿＿<tr class="day"> ＿＿＿＿＿＿<td><span class="h">日</span></td> ＿＿＿＿＿＿<td>月</td> ＿＿＿＿＿＿<td>火</td> ＿＿＿＿＿＿<td>水</td> ＿＿＿＿＿＿<td>木</td> ＿＿＿＿＿＿<td>金</td> ＿＿＿＿＿＿<td><span class="d">土</span></td> ＿＿＿＿＿</tr> ＿＿＿＿</thead> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td class="e">24</td> ＿＿＿＿＿＿<td class="e">25</td> ＿＿＿＿＿＿<td class="e">26</td> ＿＿＿＿＿＿<td class="e">27</td> ＿＿＿＿＿＿<td class="e">28</td> ＿＿＿＿＿＿<td>1</td> ＿＿＿＿＿＿<td class="d">2</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td class="h">3</td> ＿＿＿＿＿＿<td>4</td> ＿＿＿＿＿＿<td>5</td> ＿＿＿＿＿＿<td>6</td> ＿＿＿＿＿＿<td>7</td> ＿＿＿＿＿＿<td>8</td> ＿＿＿＿＿＿<td class="d">9</td> ＿＿＿＿＿</tr> ＿＿＿＿＿＿<tr> ＿＿＿＿＿＿<td class="h">10</td> ＿＿＿＿＿＿<td>11</td> ＿＿＿＿＿＿<td class="c">12</td> ＿＿＿＿＿＿<td>13</td> ＿＿＿＿＿＿<td>14</td> ＿＿＿＿＿＿<td>15</td> ＿＿＿＿＿＿<td class="d">16</td> ＿＿＿＿＿</tr> ＿＿＿＿＿＿<tr> ＿＿＿＿＿＿<td class="h">17</td> ＿＿＿＿＿＿<td>18</td> ＿＿＿＿＿＿<td>19</td> ＿＿＿＿＿＿<td class="h">20</td> ＿＿＿＿＿＿<td>21</td> ＿＿＿＿＿＿<td>22</td> ＿＿＿＿＿＿<td class="d">23</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td class="h">24</td> ＿＿＿＿＿＿<td>25</td> ＿＿＿＿＿＿<td>26</td> ＿＿＿＿＿＿<td>27</td> ＿＿＿＿＿＿<td>28</td> ＿＿＿＿＿＿<td>29</td> ＿＿＿＿＿＿<td class="d">30</td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td class="h">31</td> ＿＿＿＿＿＿<td class="e">1</td> ＿＿＿＿＿＿<td class="e">2</td> ＿＿＿＿＿＿<td class="e">3</td> ＿＿＿＿＿＿<td class="e">4</td> ＿＿＿＿＿＿<td class="e">5</td> ＿＿＿＿＿＿<td class="e">6</td> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-12</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

補足 2013/03/13 11:27

大変ありがとうございます！すごく見栄えのいいものを作ることができました。質問に書かせていただいたURLのカレンダーって、翌月表示や前月表示もできてますよね。これって、どうやるのでしょうか？ページそのものを移動させるのではなく、カレンダーの月だけを移動させることができたら、完璧に理想のものになるのですが。。