プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：t-pop-corn-t
  • 質問日時：
  • 回答数：3件

http://loco.yahoo.co.jp/osaka/event/?date=20130312

このサイトの左側にカレンダーありますよね。

僕も見習って、参考に作ってみました。
テーブルタグを使って、枠組みはできるのですが、
背景白の、黒文字だけの殺風景なカレンダーになってしまいます。

こういうふうに色づけて、きれいなカレンダーにするにはどのようなテクニックが必要なのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： wo_moon
  • 回答日時：

>質問に書かせていただいたURLのカレンダーって、翌月表示や前月表示もできてますよね。


これは単純にtableなどで組むだけではできません。


javascriptやphpなどを用いるか、ブログパーツなどのカレンダー機能のレンタルが必要になります。

一番カンタンなのはカレンダー機能のレンタルですが、
デザインを独自のものにしたいなら、javascriptやphpなどを用いるのがよいでしょう。
ただしある程度のプログラムの知識が必要になります。

お使いのサーバによってはphpが使えない場合もあるでしょうから、条件に合わせて選択してください。

【javascriptの場合】
http://www.synck.com/contents/download/javascrip …
http://user1.matsumoto.ne.jp/~goma/js/calendar2. …
など

【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

など
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

大変ありがとうございました！！

通報する
お礼日時：2013/03/14 12:43

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞翌月表示や前月表示もできてますよね。

これって、どうやるのでしょうか？

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

　なお、javascriptでカレンダーを設置するのか簡単かもしれません。ただし、これはユーザーの環境に依存します。個人のサイトならそれでも良いでしょう。
　
    • good
    • 0
    • 件
通報する
この回答へのお礼

んー。。。何かややこしそうですね。
僕はCSSとHTMLしかかじってなくて、JAVAとかPHPはまったくの素人ですので、もっとお勉強して出直してきます。

今回の件でJAVAとは何かPHPとは何かということが大雑把にわかったのは、よい収穫でした。
ありがとうございました

通報する
お礼日時：2013/03/14 12:41

No.1

  • 回答者： ORUKA1951
  • 回答日時：

　単純に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">
<!--
html,body{margin:0;padding:0;background-color:rgb(225,225,200)}
div.header,div.section,div.footer{width:100%;max-width:900px;min-width:480px;margin:0 auto;background-color:white;}
h1,h2,h3,h4,p{margin:0;line-height:1.8em;}
div.header{background-color:rgb(200,200,255)}
div.section{background-color:rgb(200,255,200)}
div.footer{background-color:rgb(255,200,200)}
div.header h1,div.header p{margin: 0 20px;}
div.section{position:relative;min-height:400px;}
div.section h2,div.section p{margin-left:200px;}
div.section div.aside{width:180px;height:100%;background-color:yellow;position:absolute;top:0;left:0;}
/* ここからカレンダー */
table.calendar{width:90%;margin:10px auto;border-collapse:collapse;border:solid 2px black;font-size:0.8em;line-height:1.6em;box-shadow:5px 5px 5px rgba(0,0,0,0.4); }
table.calendar td{padding:0 3px;background: linear-gradient(white,silver);}
table.calendar tbody td{border:solid 1px gray;padding:0 2px;}
table.calendar tbody td{text-align:right;}
table.calendar td.e{background: linear-gradient(gray,gray);border-color:white;border-width:0 1px;}
table.calendar tbody td.h{color:red;}
table.calendar tbody td.d{color:blue;}
table.calendar tbody td.c{background: linear-gradient(yellow,rgb(255,180,0));}
table.calendar tbody td:hover{font-weight:bold;padding:0;}
-->
＿</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

この回答への補足

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

補足日時：2013/03/13 11:27
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報