<script type="text/javascript"> $(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs div:first div').show(); $('

index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title> 東広島 EventMap</title> <link rel="stylesheet" href="css/hmap.css"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="https://raw.github.com/padolsey/jquery-plugins/master/cross-domain-ajax/jquery.x domainajax.js"></script> <script type="text/javascript" src="js/data.js"></script> <script type="text/javascript" src="js/utility.js"></script> <script type="text/javascript" src="js/gmap.js"></script> <script type="text/javascript" src="js/sidelist.js"></script>  <script type="text/javascript" src="js/higashieventdata.js"></script> <script type="text/javascript" src="js/main.js"></script>  <script type="text/javascript"> var mapcanvas; var currentinfowindow = null; window.onload = function() { </script> 1 / 13

google.maps.latlng(34.4479755, 132.7878226));"><a href="#"> 高屋地区 </a></li> google.maps.latlng(34.4992208, 132.6602356));"><a href="#"> 志和地区 </a></li> google.maps.latlng(34.4407862, 132.6921863));"><a href="#"> 八本松地区 </a></li> google.maps.latlng(34.47223, 132.8883641));"><a href="#"> 河内地区 </a></li> google.maps.latlng(34.5361797, 132.7781991));"><a href="#"> 福富地区 </a></li> google.maps.latlng(34.5633558, 132.8248603));"><a href="#"> 豊栄地区 </a></li> google.maps.latlng(34.3247474, 132.6762842));"><a href="#"> 黒瀬地区 </a></li> google.maps.latlng(34.3196117, 132.8136826));"><a href="#"> 安芸津地区 </a></li> </ul> </li>  <li class="cen"><a href="http://higashihiroshima.genki365.net/"> 市民活動情報サイト</a></li> <li class="cen"><a href="http://www.city.higashihiroshima.hiroshima.jp/"> 東広島市役所 </a> </li> <li class="cen"> <a>ict 加盟大学一覧 </a> <ul> <li class="cen"><a href="http://www.hiro.kindai.ac.jp/index.html"> 近畿大学工学部 </a></li> <li class="cen"><a href="http://www.hiroshima-u.ac.jp/index-j.html"> 広島大学 </a></li> <li class="cen"><a href="http://www.hirokoku-u.ac.jp/"> 広島国際大学 </a></li> </ul> </li> </ul> </div> 3 / 13

</div> </header> <div id="output"></div> <div id="mapcanvas"></div>  <div id="tabs"> <ul id=tabarea> <li class="tabmenu"><a href="#listarea">リスト</a></li> <li class="tabmenu"><a href="#information">お知らせ</a></li> <li class="tabmenu"><a href="#twit"> ツイッター <img src="http://buturi.heteml.jp/student/2012/higashihiroshima/twitthis_ico.gif"></a></li> </ul> <div id="listarea"> <ul id="buttonarea"> <li id="datesort"> 日付順 </li> <li id="areasort"> 地区別 </li> <li id="weeksort">テスト</li> </ul>  <div id="box"></div> </div>  <div id="information"></div>  <div id="twit"> <a class="twitter-timeline" href="https://twitter.com/search?q=%e6%9d%b1%e5%ba%83%e5%b3%b6" data-widget-id="277432419341189121"> 東広島に関するツイート</a>  </div>  </div>  </body> </html> 4 / 13

hmap.css html, body, header { font-family: " MS ゴシック ", "MS Gothic", "Osaka - 等幅 ", Osaka-mono, monospace ; /* 文字のフォントを指定 */ color: #000000; /* 文字の色を指定 */ html { width: 100%; height: 100%; body { margin: 0px; padding: 0px; overflow-y: hidden; overflow-x: hidden; ul { margin: 0; padding: 0; ul >.cen { /* カンマは複数の記述を表すので内包される意味で'>'を用いる */ width: 150px; position: relative; display: inline-block; list-style-type: none; /* 次の行 http://homepage3.nifty.com/sho-nan/mokei.files/sonota.files/color.html( スタイル : "background: #555;") */ background: #555; padding-bottom: 5px; color: white; 5 / 13

ul ul { position: relative; display: none; background-color: #999; ul.cen:hover > ul { display: inline-block; position: absolute; top: 100%; left: 0px; z-index: 9999; /* 最前面に表示 */ /* バーの見出し */ ul a{ display: block; font-size: 16px; color: white; /* 通常時の文字の色 */ text-decoration: none; /* 下線なし */ cursor: pointer; /* マウスの形をポインター */ outline: none; ul a:hover >.cen { color: red; /* オンマウス時の文字の色 */ background-color: #272727;.cen { width: 150px; /* height < line-height のとき文字が各メニューの下に寄る */ /* height > line-height のとき文字が各メニューの上に寄る */ height: 45px; /* バーの高さ */ line-height: 45px; /* 行間の高さ */ 6 / 13

#mapcanvas { position: absolute; /* "debug button"の直下 */ width: 100%; height: 100%; #bar { background-color: #ffffff; width: 100%; z-index: 9999; /* 最前面に表示 */ #title { line-height: 20px; text-align: center; color: #ffffff; background-color: #6F9; /* 上端のバーの色 */ #topbar { width: 100%; height: 50px; /* グラデーション http://www.css-lecture.com/log/css3/css3-gradient.html("css Lecture") より引用 */ /* Firefox 用 ( 左から順に方向開始色終了色 ) */ background: -moz-linear-gradient(left top, rgb(229,255,221), rgb(180,209,192)); /* Safari,Google Chrome 用 ( 左から順に線形で開始位置終了位置開始色終了色 ) */ background: -webkit-gradient(linear, left top, left bottom, from(rgb(229,255,221)), to(rgb(180,209,192))); padding-bottom: 5px; padding-top: 5px; /* 次の行 http://webtips-blog.com/2011/04/27/css/("web Tips Blog") より引用 */ 7 / 13

box-shadow: 1px 1px 5px #aaa; /* 左から横方向のずれ下方向のずれぼかし具合シャドウの色 */ /*------------------------------------------------------------------------- listarea 部分 -------------------------------------------------------------------------*/ #listarea { background-color: white; /* 背景色 : 白 */ border-radius: 5px; /* 角丸 */ opacity: 0.8; /* 透過度 :80% */ height: calc(100% - 120px); /* 縦 :100% - 120px */ height: -webkit-calc(100% - 120px); /* webkit 対策 */ width: 300px; /* 横 :300px */ position: absolute; /* 絶対位置 */ bottom: 10px; /* 下から 10px の位置 */ right: 50px; /* 右から 10px の位置 */ overflow: auto; /* はみ出したらスクロールバーを表示 */ #buttonarea { position: fixed; width: 215px; margin: 10px 0 10px 30px; cursor: pointer; /* マウスカーソルを常にデフォルト */ #buttonarea li { width: 60px; height: 30px; text-align: center; line-height: 30px; margin-right: 5px; display: inline-block; background-color: #26E8F2; border-radius: 5px; /* 角丸 */ 8 / 13

font-weight: bold; /* 文字を太字 */ #box { margin-top: 50px;.wrapBox { height: 60px; width: 270px; margin-bottom: 10px;.dateBox { position: relative; font-weight: bold; /* 文字を太字 */ height: 50px; width: 50px; margin: 0 0 10px 5px; padding: 5px; color: rgb(50,50,50); /* 文字色 : 灰色 */ border-radius: 3px; /* 角丸 */ cursor: default; /* マウスカーソルを常にデフォルト */ float: left;.eventbox { position: relative; font-weight: bold; /* 文字を太字 */ height: 50px; width: 190px; margin: 0 0 10px 5px; padding: 5px; background-color: rgba(0,0,255,0.1); /* 背景色指定 */ color: rgb(50,50,50); /* 文字色 : 灰色 */ border-radius: 3px; /* 角丸 */ 9 / 13

cursor: default; /* マウスカーソルを常にデフォルト */ float: right; -o-text-overflow: ellipsis;.eventbox:hover { background-color: rgba(0,0,255,0.3); color: rgb(0,0,0); /* 文字色 : 黒色 */.sponsorbox { text-align: right; color: rgb(100,100,100); /* 文字色 : 灰色 */.month { top 5px; left: 5px; position: absolute;.split { font-size: 3em; line-height: 50px; text-align: center; position: static;.date { bottom: 5px; right: 5px; position: absolute;.sun { background-color: red; 10 / 13

.sat { background-color: rgb(0,68,204);.ordinary { background-color: rgba(0,0,255,0.1); /* 背景色指定 */ /*------------------------------------------------------------------------- information 部分 -------------------------------------------------------------------------*/ #information { background-color: white; /* 背景色 : 白 */ border-radius: 5px; /* 角丸 */ opacity: 0.8; /* 透過度 :80% */ height: calc(100% - 120px); /* 縦 :100% - 120px */ height: -webkit-calc(100% - 120px); /* webkit 対策 */ width: 300px; /* 横 :300px */ position: absolute; /* 絶対位置 */ bottom: 10px; /* 下から 10px の位置 */ right: 50px; /* 右から 10px の位置 */ overflow: auto; /* はみ出したらスクロールバーを表示 */ /*------------------------------------------------------------------------- twit 部分 -------------------------------------------------------------------------*/ #twit { background-color: white; /* 背景色 : 白 */ border-radius: 5px; /* 角丸 */ opacity: 0.8; /* 透過度 :80% */ height: calc(100% - 120px); /* 縦 :100% - 120px */ height: -webkit-calc(100% - 120px); /* webkit 対策 */ 11 / 13

width: 300px; /* 横 :300px */ position: absolute; /* 絶対位置 */ bottom: 10px; /* 下から 10px の位置 */ right: 50px; /* 右から 10px の位置 */ overflow: auto; /* はみ出したらスクロールバーを表示 */ #tabarea { top: 200px; right: 0; position: absolute; /* 絶対位置 */.tabmenu { margin: 0 0 1px 0; padding: 0; width: 30px; height: 20%; list-style:none; /* リストの先頭のマークを非表示に */.tabmenu a { display: inline-block; /* インライン-ブロック要素に変換 */ color: black; /* 文字色 : 黒 */ background-color: #CCCCCC; /* 背景 :lightgray */ text-decoration: none; /* リンクの下線 : 非表示 */ text-align: center; /* 中央寄せ */ line-height: 30px; /* 縦方向の中央寄せ */ /* height と同じ値を指定すると縦方向の中央寄せになる */ border-top-left-radius: 5px; /* 左上の角丸 :5px */ border-bottom-left-radius: 5px; /* 左下の角丸 :5px */.active a { background-color: #000000; /* 背景 : 黒 */ 12 / 13

color: white; /* 文字色 : 白 */ font-weight: bold; /* 太文字 */ border-top-left-radius: 5px; /* 左上の角丸 :5px */ border-bottom-left-radius: 5px; /* 左下の角丸 :5px */ 13 / 13

<script type="text/javascript"> $(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs div:first div').show(); $('

<script type="text/javascript"> $(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs div:first div').show(); $('