http://loco.yahoo.co.jp/osaka/event/?date=20130312
このサイトの左側にカレンダーありますよね。
僕も見習って、参考に作ってみました。
テーブルタグを使って、枠組みはできるのですが、
背景白の、黒文字だけの殺風景なカレンダーになってしまいます。
こういうふうに色づけて、きれいなカレンダーにするにはどのようなテクニックが必要なのでしょうか?
No.2ベストアンサー
- 回答日時:
>質問に書かせていただいた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
など
こんなものがあるんですね!知らなかったです。
しかも、僕の理想とするものが含まれていました。このJAVAを少し改良して自分のWEBにあうように
していきたいと思います。
大変ありがとうございました!!
No.3
- 回答日時:
>翌月表示や前月表示もできてますよね。
これって、どうやるのでしょうか?これは、ページ自体が動的に作成されているのです。実際にどの技術が使われているかは、利用者からはわかりませんが、PHPなりCGI、あるいは、それを利用してつくられたカレンダーをincludeしているだけかもしれません。
このように当月の行事や数ヶ月先のカレンダーも表示できるものは、動的に作成されていると考えて良いでしょう。
カレンダーの上の矢印でカレンダーを移動してもページのURLは変わりませんが、カレンダーの上の「2013年4月」とかだと、URLが変わりますが、カレンダー自体はまったく変化しません。ページ自体はQUERY_STRINGSを判断してページを作成していますが実際には内容は変わっていません。?date=201301とかにしてみるとわかります。
これから推測できるのは、ページ自体はPHPなりCGIを利用してはいますが、それはページの大部分を占める部分をいちいち書かなくて済む程度にしか利用していません。行事内容だけ入力する仕組みになったいるのでしょう。カレンダーも固定コンテンツに含まれているようです。
そのうえで、それをスタイルシートでひと月分しか見えないようにしています。ブラウザの[表示メニュー]から「スタイルシート無し」にすると3か月分表示されます。
これなら、同じようなフォーマットで、複数のカレンダーを作成し、毎月3ヶ月分のファイルを作成します。
それをinclude--ご利用のサーバーがSSIを許可していれば、簡単なコマンドをHTML内に書くだけです。
<!--#include virtual="/calendar.htm" -->
とか
SSIが許可されていれば、拡張子をshtmlにして・・
なお、ページの拡張子は関係ありません。htmlをSSIとして動作させることも出来ます。
なお、javascriptでカレンダーを設置するのか簡単かもしれません。ただし、これはユーザーの環境に依存します。個人のサイトならそれでも良いでしょう。
んー。。。何かややこしそうですね。
僕はCSSとHTMLしかかじってなくて、JAVAとかPHPはまったくの素人ですので、もっとお勉強して出直してきます。
今回の件でJAVAとは何かPHPとは何かということが大雑把にわかったのは、よい収穫でした。
ありがとうございました
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">
<!--
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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
この回答への補足
大変ありがとうございます!すごく見栄えのいいものを作ることができました。
質問に書かせていただいたURLのカレンダーって、翌月表示や前月表示もできてますよね。
これって、どうやるのでしょうか?ページそのものを移動させるのではなく、カレンダーの月だけを移動させることができたら、完璧に理想のものになるのですが。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
値が0なら非表示にしたい
-
ホームページ 表の上の余白を...
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
テーブルの装飾
-
文字の中央そろえを一括で指定...
-
テーブルの表示がずれます
-
テーブルのヘッダとボディの幅...
-
テーブルの行の背景色をマウス...
-
htmlのtable内に画像
-
[CSS] tableの行の間隔をあける
-
テーブルのセルに画像をピッタ...
-
safariで特定条件下でデーブル...
-
Htmlのtd要素の中で半角の空...
-
divの中にtableを入れています...
-
ホームページビルダ14で、表の1...
-
テーブルの枠自体を折り曲げる
-
表の中の列の順番を入れ替える...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報