平成
24 年度 卒業論文
東広島
Event Maps
～サイトデザイン～
目次
1 研究の目的と背景...3 1.1 概要...3 1.1.1 東広島市民活動情報サイトとは...3 1.1.2 元気 365 とは...3 1.1.3ICT とは...4 1.2 目的と問題点...4 2 インターネットブラウザの市場占有率(シェア)について...8 2.1 ブラウザ別市場占有率...8 2.1.1 日本...9 2.1.2 米国...10 2.1.3 世界...11 2.1.4 特徴...11 2.2 ブラウザバージョン別市場占有率...12 3 開発環境と目的...12 3.1TeraPad...12 3.2GitHub...13 4 主な担当...14 5 市役所の担当者とのミーティングで出た意見・議論...14 6 今後の課題...18 7 謝辞...19 8 文献...19 8.1 引用資料...19 8.2 参考資料...20 9 付録(ソースコード)...21 9.1index.html...21 9.2hmap.css...261
研究の目的と背景1.1
概要1.1.1
東広島市民活動情報サイトとは 東広島市民活動情報サイト(図 1.1)(1)は，テンプスタッフ・ライフサポート株式会社(2)(平成 24 年 11 月 1 日に， 旭化成ライフサポート株式会社とテンプスタッフ・メディカル株式会社が合併し，テンプスタッフ・ライフサポート株 式会社に変更(3)．以下，当論文では"テンプスタッフ・ライフサポート株式会社"とする．)が作成しているサイトの 一つで，政府からの助成金で作られている．当サイトは，平成22 年 3 月に行政運営サイトとしてオープンしたも の(4)で，東広島市民がイベントを検索するのに役に立つ検索方法の一つである．1.1.2
元気365 とは 東広島市民活動情報サイトを運営・作成している"元気 365"(4)について説明する．これは，『行政と市民、市民 と市民のつながり・ふれあい・協働をかたちにする市民活動支援サービス』[1]である．企業，行政，民間など7 つ に分かれており(行政と民間の協働運営サイトを含む)，ほぼ全国で利用されている．広島県では，東広島市の ほかに，広島，廿日市，三原の各市と北広島町が"元気 365"を利用している． 図 1 東広島市民活動情報サイトのトップページ1.1.3
ICT とは"Information and Communication Technology"の略称で，日本語では"情報通信技術"と訳される(5)．かつては
IT ("Information Technology"の略称で，日本語では"情報技術"と訳される)という単語が使われたが，コンピュー タ技術だけでなくコミュニケーション能力も重要となったためICT が使われるようになった(6)． また，我が国ではIT が一般的だが，国際的には ICT が定着している．実際に，総務省の"IT 政策大綱"は， 平成16 年度に"ICT 政策大綱"にタイトルが改称されており，ICT という呼称が定着しつつある(6)．
1.2
目的と問題点 東広島市企画振興部地域政策課の管理する市民活動情報サイトにおける市民の利便性の向上を図る．この Web サイトは，東広島市の市民団体が各々のお知らせやイベントの告知・報告を行うために用いられている． しかしながら，市民活動情報サイトの利用者には幅広い年齢層のユーザが存在しており，必ずしもその全員が コンピュータ，ひいてはインターネットに精通している訳ではない． また，このWeb システム自体は，テンプスタッフ・ライフサポート株式会社がシステム構築を行っており，東広島 市企画振興部地域政策課が直接システムに手を加える事は出来ない．そこで，別ドメインに設けたWeb サイトを 通して利用者にとって利用しやすいシステムを提供する． そのために，ユーザが要求する情報を簡単にかつ時間をかけずに情報を提供できるようなページのレイアウト を考えている． 現在，東広島市民活動情報サイトでは，簡略化された東広島市の全体図の中から情報が欲しい地域をクリック すると，これからその地域においてイベントを開催する団体の一覧が表示される(図 1.2～図 1.4 に，高屋地区を 選択した場合の例を示す)．このページでは，イベントの内容や開催する時刻・場所について直接確認する事が 出来ず，開催内容の詳細を見るにはそこから各団体が作成したページに飛ぶ必要がある．図1.5 のボタンをクリックすると，図 1.6 のようにイベントがカレンダー形式で 1 ヶ月ごとに表示される．イベント名 をクリックしたときの特徴は，次の通りである． ① 会場と地図が掲載されており，タイトルに団体名も含まれている(図 1.7) ② 会場は記載されているが，地図が掲載されていない(図 1.8) ③ 突然，実施内容が記載されている(例として，図 1.6 の四角の枠) さらに，東広島市全域で行われるイベントの情報が全て記載されているため，イベントに初めて参加する市民 にとっては，会場が分からずに参加できなかった，ということも起こり得る．また，詳しい場所は各々のイベント情 報のページに移動しなければ確認することが出来ない． 図 2 地域名をクリックする(図 1.1 より) 図 3 高屋地区を選択したときの検索結果 図 4 団体の例(高美が丘地域センター)
図 5 このボタンをクリックする(図 1.1 より)
図 7 地図の掲載が有るイベントの例(川上地域センターの活動発表会)
この問題を解消するために，Google Maps とイベントを連動させ，ユーザが求める情報の検索を行った結果， 表示を視覚的に補助できるものと考えている． 図1.9 は，卒業研究当初に考えていたレイアウトである．しかし，このレイアウトでは，Google Maps の領域が狭 いため，5 章の図 5.2 から図 5.9 のように全面を利用して作成した． また，Twitter の検索システムと連動させることで，ユーザがページを移動することなくリアルタイムな情報を得る ことが出来る．
2
インターネットブラウザの市場占有率(シェア)について2.1
ブラウザ別市場占有率 図2.1 から図 2.3 までは，平成 25 年 2 月 1 日現在の，過去 1 年間のブラウザ別の市場占有率の変化を表した グラフである．また，表2.1 から表 2.3 までは，3 ヶ月ごとのブラウザ別の市場占有率を数値で表した．なお，2.1.1 から2.1.3 まで，日本，米国，世界の状況をそれぞれ紹介し，2.1.4 でこれらの特徴を説明する． 図 9 当初のレイアウト(平成 24 年 5 月 9 日の第 1 回進捗報告会より)2.1.1
日本 表2.1 我が国の各ブラウザの市場占有率の変化(7) ブラウザ 市場占有率(単位：%) 平成24 年 2 月 1 日 平成24 年 5 月 1 日 平成24 年 8 月 1 日 平成24 年 11 月 1 日 平成25 年 2 月 1 日 Internet Explorer 52.48 52.80 51.73 53.90 53.99 Google Chrome 18.17 17.53 19.55 19.81 20.58 Firefox 18.63 19.50 17.92 14.95 14.35 Safari 7.56 7.13 7.36 8.30 8.27 Opera 1.48 1.50 1.43 1.29 0.98 合計 98.32 98.46 97.99 98.25 98.17 図 10 我が国の過去 1 年間のブラウザ別の市場占有率[2]2.1.2 米国
Internet Explorer を開発したマイクロソフト，Google Chrome を開発したグーグル，Mozilla Firefox を開発した 非営利組織のモジラファウンデーションの各社が米国にあるため，米国の市場占有率を調べた． 表2.2 米国の各ブラウザの市場占有率の変化(8) ブラウザ 市場占有率(単位：%) 平成24 年 2 月 1 日 平成24 年 5 月 1 日 平成24 年 8 月 1 日 平成24 年 11 月 1 日 平成25 年 2 月 1 日 Internet Explorer 47.07 40.81 47.90 42.17 43.16 Google Chrome 19.35 22.43 21.50 24.35 24.66 Firefox 20.09 21.48 17.19 18.33 16.20 Safari 12.11 13.29 11.51 13.28 13.85 Opera 0.55 0.71 0.48 0.43 0.28 合計 99.17 98.72 98.58 98.56 98.15 図 11 米国の過去 1 年間のブラウザ別の市場占有率[3]
2.1.3 世界 表2.3 世界の各ブラウザの市場占有率の変化(9) ブラウザ 市場占有率(単位：%) 平成24 年 2 月 1 日 平成24 年 5 月 1 日 平成24 年 8 月 1 日 平成24 年 11 月 1 日 平成25 年 2 月 1 日 Internet Explorer 37.70 33.29 34.61 32.13 31.89 Google Chrome 28.64 31.70 32.67 35.23 35.99 Firefox 24.47 24.86 22.65 22.37 21.25 Safari 6.55 7.45 6.90 7.26 7.91 Opera 1.91 1.69 1.57 1.63 1.16 合計 99.27 98.99 98.40 98.62 98.20 2.1.4 特徴
日本の約半数がInternet Explorer を利用していることが図 2.1 から分かる．要因として，『Windows 7 だけでな
くWindows Vista や XP などの旧 WindowsOS にも対応したこと』[5]，バージョン9 や 10 の成長が挙げられる(10)．
図2.3 より，世界では Google Chrome がトップになっている．この要因として，速度や拡張性が挙げられており，
Google Chrome が優位ではないかと考えられる(11)．
2.2
ブラウザバージョン別市場占有率 我が国の場合，図2.4 のように，Internet Explorer は，バージョン 8 と 9 を合算して，約半数が利用している．3
開発環境と目的 3.1 TeraPad TeraPad は，寺尾進氏が平成 11 年 4 月に設計したソフトウェアである．図 3.1 のように，ファイルの種類に応じ て，色分けや外部ツールの呼び出しが可能である(13)．今回の研究では，HTML や CSS の編集を目的として利 用した．図3.1 に編集の例を示す． 図 13 我が国の過去 1 年間のブラウザバージョン別の市場占有率(12)3.2 GitHub
GitHub は，『GitHub.com により運営されているGit ホスティングサイトである』[6]．TeraPad で更新したソースファ
イルをコミットして同期するために用いる．用いる理由は業界標準だからである(デファクトスタンダード：ラテン語
で「事実上の」という意味(14)で，『市場競争を勝ち抜くことによってその業界の標準と見なされている規格』[7]であ
る)．
GitHub を用いて，更新後のサイトを見る場合は，以下の作業を行う．
①
ソースコードの内容に変更が発生した場合，図3.2 の枠中にある，"SHOW"ボタンをクリックする．図 14 TeraPad での編集の例(上図は，東広島 Event Maps のソースコードの冒頭部分)
②
図3.3 の四角い枠中(黄色い背景の部分)にある入力スペースに更新情報を入れ，"COMMIT"ボタン(四角 い枠中の左下の部分)と"sync"ボタン(丸い枠中の部分，"COMMIT"ボタンをクリックする前は"in sync"と表示さ れる)をクリックする．③
更新後のサイトを見ることが出来ない場合は，図3.3 の"sync"ボタンよりシンクする．4
主な担当 ここでは，私が担当した内容を紹介する．サイトを構成する基本となる，全体HTML，CSS の定義･デザイン 設計． 5 市役所の担当者とのミーティングで出た意見・議論 平成24 年 11 月 16 日，東広島市役所企画振興部地域政策課の職員 2 名と研究メンバー 4 名の計 6 名で， 近畿大学工学部情報システム工学科の情報物理研究室(G352)にてミーティングを行った．このミーティングで， 次の内容に関して意見や要望が出た． • 高齢者のユーザが多い ユーザの割合が不明で，調査に手が回らないのが現状である． 一般市民の場合，会員登録が不要なため，アンケートを取ることが出来る．個人会員は約100 人だが， データが無い．また，メールマガジンもあるが，発行には至っていない． • アクセス数について 無料でGoogle のアカウントを取得したところ，アクセス数が昨年度より伸びた． • サイト上部のバーについて かつて，東広島市の市章(図 5.1)の背景と同じ緑色を使用していた(図 5.2～図 5.5)．しかし，この色では濃い 図 16 コミットとシンク(同期)の画面図 17 東広島市の市章[8]
図5.2 から図 5.5 までは，グラデーションを設定する前に，Internet Explorer，Google Chrome，Firefox で得られ
たトップページである(平成 24 年 11 月 20 日現在)．図 5.5 は，Google Chrome，Firefox においても同様の結果 が得られたので割愛する．
図5.6 から図 5.9 までは，グラデーションを設定した後に，Internet Explorer，Google Chrome，Firefox で得られ たトップページである(平成 25 年 2 月 10 日現在)．図 5.7 から図 5.9 までの文字は、地域センターや団体名を表
図 20 Firefox での地図表示
図 22 Internet Explorer での地図表示
図 25 グラデーションを設定した後の FireFox での地図表示(2 月 8 日現在)
7
謝辞 当研究にあたり，指導教員である徐丙鉄准教授，東広島市役所企画振興部地域政策課の方々，研究 生の皆様の指導に深く感謝いたします．8
文献8.1
引用資料 [1] http://www.genki365.com/example/index.html (旭化成ライフサポート株式会社，元気 365，実例のご紹介) [2] http://gs.statcounter.com/#browser-JP-daily-20120201-20130201(StatCounter Global Stats，Top 5 Browsers in Japan from 1 Feb 2012 to 1 Feb 2013) [3] http://gs.statcounter.com/#browser-US-daily-20120201-20130201
(StatCounter Global Stats，Top 5 Browsers in the United States from 1 Feb 2012 to 1 Feb 2013) [4] http://gs.statcounter.com/#browser-ww-daily-20120201-20130201
(StatCounter Global Stats，Top 5 Browsers from 1 Feb 2012 to 1 Feb 2013) [5] http://news.livedoor.com/article/detail/7291794/
(livedoor ニュース，IE 8 が 3 年連続で 1 位に - 12 月デスクトップブラウザシェア) [6] http://www.weblio.jp/content/GitHub
(辞典・百科事典の検索サービス - Weblio 辞書，GitHub とは) [7] http://dic.yahoo.co.jp/dsearch/0/0na/12766550/
(Yahoo!辞書，｢デファクト‐スタンダード【de facto standard】 の意味とは｣) [8] http://www.city.higashihiroshima.hiroshima.jp/soshiki/1/sishou.html
8.2
参考資料 (1) http://higashihiroshima.genki365.net/ (東広島市役所，ひがしひろしまし市民協働のまちづくり 市民活動情報サイト) (2) http://genki365.net/gnkx/pub/sheet.php?id=601 (テンプスタッフ・ライフサポート株式会社，元気 365，実例のご紹介) (3) http://www.temp-ls.co.jp/ (テンプスタッフ・ライフサポート株式会社) (4) http://www.genki365.com/example/index.html (旭化成ライフサポート株式会社，元気 365，実例のご紹介) (5) http://www.sophia-it.com/content/ICT(IT 用語辞典バイナリ BINARY : パソコン・インターネットの用語辞典，ICT とは) (6) http://rasti.jp/ict_outline/index.html
(情報活用力診断テスト Rasti，ICT の重要性) (7) http://gs.statcounter.com/#browser-JP-daily-20120201-20130201
(StatCounter Global Stats，Top 5 Browsers in Japan from 1 Feb 2012 to 1 Feb 2013) (8) http://gs.statcounter.com/#browser-US-daily-20120201-20130201
(StatCounter Global Stats，Top 5 Browsers in the United States from 1 Feb 2012 to 1 Feb 2013) (9) http://gs.statcounter.com/#browser-ww-daily-20120201-20130201
(StatCounter Global Stats，Top 5 Browsers from 1 Feb 2012 to 1 Feb 2013) (10) http://news.livedoor.com/article/detail/7291794/ (livedoor ニュース，IE 8 が 3 年連続で 1 位に - 12 月デスクトップブラウザシェア) (11) http://blogos.com/article/53692/ (BLOGOS（ブロゴス）- 意見をつなぐ、日本が変わる。，ブラウザ戦争。Chrome が世界ではトップに、日本は IE 王国) (12) http://gs.statcounter.com/#browser_version-JP-monthly-201202-201302-bar
(StatCounter Global Stats，Top 12 Browser Versions in Japan from Feb 2012 to Feb 2013) (13) http://ja.wikipedia.org/wiki/TeraPad
(Wikipedia，TeraPad) (14) http://dic.yahoo.co.jp/dsearch/0/0na/12766550/
9
付録(ソースコード)9.1
index.html <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"><meta name="keywords" content="東広島,広島,西条,八本松,高屋,白市,"> <title>東広島 EventMap</title>
<!-- CSS -->
<link rel="stylesheet" href="css/hmap.css"> <!-- GoogleMaps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <!-- jQueryXDomainAJAX -->
<script type="text/javascript" src="js/jquery.xdomainajax.js"></script> <!-- MainScript -->
<script type="text/javascript" src="js/Data.js"></script> <script type="text/javascript" src="js/Utility.js"></script> <script type="text/javascript" src="js/Sort.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">//あとで分離 $(function(){
$('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs div:first div').show();
$('#tabs ul .tabmenu:first').addClass('active'); $('.tabmenu a').click(function(){
$('.tabmenu').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); $(currentTab).find("div").show(); return false; }); $('#informationContainer .close').click(function(event){ $('#informationContainer').hide("fast"); }) $('.showInformationButton').click(function(event) { $('#informationContainer').show("fast"); })
}); </script> <script type="text/javascript"> </script> </head> <body> <header> <!-- デバッグボタン -->
<!--<button id="debugEventObjectArrayTrace">EventObjectArray を出力</button>--> <!-- <div id="bachelor"><h1>卒業研究</h1></div> --> <!-- デバッグボタンここまで --> <div id="bar"><!-- 上端の見出し --> <div id="title"> <ul id="topbar"> <!-- <li>
<button id="debug">debug button</button> </li>
--><!-- コメントアウトすると消えてしまう --> <li class="cen">
<a><!-- <div class="cen"> -->地域センター▼<!-- </div> --></a> <ul>
<!-- mapCanvas に対して指定した座標で panTo に移動させる, '#'：同じファイル内の特 定位置にジャンプ(http://www.tohoho-web.com/html/a.htm より) -->
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.4267515, 132.7437521));"><a href="#" target="_blank">西条地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.4479755, 132.7878226));"><a href="#" target="_blank">高屋地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.4992208, 132.6602356));"><a href="#" target="_blank">志和地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.4407862, 132.6921863));"><a href="#" target="_blank">八本松地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.47223, 132.8883641));"><a href="#" target="_blank">河内地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.5361797, 132.7781991));"><a href="#" target="_blank">福富地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.5633558, 132.8248603));"><a href="#" target="_blank">豊栄地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.3247474, 132.6762842));"><a href="#" target="_blank">黒瀬地区</a></li>
<li class="cen" onClick="javascript:gMap.panTo(new google.maps.LatLng(34.3196117, 132.8136826));"><a href="#" target="_blank">安芸津地区</a></li>
<li class="cen"><a href="http://www.city.higashihiroshima.hiroshima.jp/" target="_blank">東広島市役所</a></li>
<li class="cen"><a href="http://www.hiro.kindai.ac.jp/index.html" target="_blank">近畿 大学工学部</a></li>
<li class="cen"><a href="http://www.hiroshima-u.ac.jp/index-j.html" target="_blank">広 島大学</a></li>
<li class="cen"><a href="http://www.hirokoku-u.ac.jp/" target="_blank">広島国際大学 </a></li>
</ul><!-- "ICT 加盟大学一覧▼" の ul タグここまで --> </li><!-- "ICT 加盟大学一覧▼" の li タグここまで -->
<li class="cen"><a class="showInformationButton" href="#">このサイトについて</a></li> </ul><!-- ul id="topbar" ここまで -->
</div><!-- div id="title" ここまで --> </div><!-- div id="bar" ここまで --> </header>
<div id="output"></div>
<div id="mapCanvas"><!-- aiu(表示される本文) --></div> <!-- <div id="rightBar">リスト</div> -->
<div id="tabs">
<ul id="tabArea">
<li class="tabmenu"><a class="listSelect" href="#listArea" typeID="11">イベント</a></li> <li class="tabmenu"><a class="listSelect" href="#listArea" typeID="31">募集情報</a></li> <li class="tabmenu"><a class="listSelect" href="#listArea" typeID="51">お知らせ</a></li> <li class="tabmenu"><a href="#twit"><img src="img/twitter.png"></a></li>
</ul><!-- tabArea ここまで --> <div id="listArea" style="display: block;"> <div id="btnArea" style="display: block;">
<select id="sectorSelect" class="searchSelect"> <option value="" selected>分野</option>
<option value="1">まちづくり・住民自治協議会</option> <option value="2">環境・eco</option> <option value="3">防災・防犯</option> <option value="4">保健福祉</option> <option value="5">こども</option> <option value="6">男女共同参画</option> <option value="7">CSR・企業の社会貢献</option> <option value="8">行政</option> <option value="9">生涯学習・地域センター</option> <option value="10">音楽</option> <option value="11">文化・芸術</option> <option value="12">スポーツ</option> <option value="13">国際交流</option> <option value="14">教育</option>
<option value="15">ICT 学生支援隊</option> <option value="16">その他</option>
</select>
<select id="placeSelect" class="searchSelect"> <option value="" selected>地域</option>
<option value="2">西条</option> <option value="3">八本松</option> <option value="4">志和</option> <option value="5">高屋</option> <option value="6">福富</option> <option value="7">豊栄</option> <option value="8">河内</option> <option value="9">黒瀬</option> <option value="10">安芸津</option> </select> <ul id="buttonArea"> <li id="orderSort">新しい</li> <li id="dateSort">日付順</li> <li id="areaSort">地区別</li> </ul><!-- #buttonArea --> </div><!-- #btnArea -->
<div id="boxArea" style="display: block;"><div id="box" style="display: block;"></div><!-- #boxArea --> </div><!-- てすと -->
</div><!-- #listArea -->
<div id="twit" style="display: none;">
<a class="twitter-timeline" href="https://twitter.com/search?q=%E6%9D%B1%E5%BA %83%E5%B3%B6+OR++OR+%E8%A5%BF%E9%AB%98%E5%B1%8B+OR+%E7%99%BD %E5%B8%82+OR+%E5%85%AB%E6%9C%AC%E6%9D%BE+OR+%E5%AE%89%E8%8A %B8%E6%B4%A5+OR+%28%E5%BA%83%E5%B3%B6+AND+%28%E8%A5%BF%E6%9D%A1+OR+ %E9%BB%92%E7%80%AC+OR+%E6%B2%B3%E5%86%85+OR+%E5%85%A5%E9%87%8E %29%29+OR+%E9%85%92%E7%A5%AD%E3%82%8A+OR+%E9%85%92%E3%81%BE %E3%81%A4%E3%82%8A" data-widget-id="277432419341189121">東広島 OR OR 西高屋 OR 白市 OR 八本松 OR 安芸津 OR (広島 AND (西条 OR 黒瀬 OR 河内 OR 入野)) OR 酒祭り OR 酒まつり に関するツ イート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs");</script> </div><!-- #twit --> </div><!-- #tabs --> <div id="informationContainer"> <div id="informationWindow"> <div class="windowBar">
<button type="button" class="close simpleButton">×</button> </div>
<div id="informationArea">
<h1>東広島イベントマップ</h1> <p>このサイトは､
<a href="http://higashihiroshima.genki365.net/" title="東広島市民活動情報サイト">東広島市民活 動情報サイト</a>
<button type="button" class="close simpleButton">閉じる</button></div> </div> </div> </body> </html> 9.2 hmap.css 基本設定 ---*/ html { width: 100%; height: 100%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシッ ク", "MS PGothic", sans-serif; /* 文字のフォントを指定 */ color: #000000; /* 文字の色を指定 */ user-select: none; /* 反転禁止 */ -moz-user-select: none; -webkit-user-select: none; } body { margin: 0px; padding: 0px; overflow-y: hidden; overflow-x: hidden; } ul { margin: 0; padding: 0; } トップバー ---*/ ul > .cen { /* カンマは複数の記述を表すので、内包される意味で'>'を用いる */ width: 180px ; 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;*/ /* グラデーション http://www.css-lecture.com/log/css3/css3-gradient.html("CSS Lecture") より引用 */ /* Firefox 用(左から順に、方向・開始色・終了色) */
background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221));
/* Safari,Google Chrome 用(左から順に、線形で開始位置・終了位置・開始色・終了色) */
background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); /* 次の行 http://webtips-blog.com/2011/04/27/css/("Web Tips Blog") より引用 */
border-color: 5px solid #000; padding-bottom: 5px; color: #2F4F4F; z-index: 9999; /* 最前面に表示 */ } #topbar { top: 0; left: 0; width: 100%; height: 50px; /* グラデーション http://www.css-lecture.com/log/css3/css3-gradient.html("CSS Lecture") より引用 */ /* Firefox 用(左から順に、方向・開始色・終了色) */
background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221));
/* Safari,Google Chrome 用(左から順に、線形で開始位置・終了位置・開始色・終了色) */
background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); /* http://lets-it.jp/memorandum/2013/01/28/ie10opera12%E3%81%A7css%E3%81%AE
%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC
%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA %E3%81%84%E4%BB%B6/ を参照 */
background: -ms-linear-gradient(left, rgb(180,209,192), rgb(229,255,221)); /* IE10, opera12 */ padding-bottom: 5px; padding-top: 5px; box-shadow: 1px 1px 5px rgb(170, 170, 170); z-index: 9999; /* 最前面に表示 */ } 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: 20px; /*width: 250px;*/
color: red; /* オンマウス時の文字の色 */
/* グラデーション http://www.css-lecture.com/log/css3/css3-gradient.html("CSS Lecture") より引用 */ /* Firefox 用(左から順に、方向・開始色・終了色) */
background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221));
/* Safari,Google Chrome 用(左から順に、線形で開始位置・終了位置・開始色・終了色) */
background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); /* http://lets-it.jp/memorandum/2013/01/28/ie10opera12%E3%81%A7css%E3%81%AE
%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC
%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA %E3%81%84%E4%BB%B6/ を参照 */
background: -ms-linear-gradient(left, rgb(180,209,192), rgb(229,255,221)); /* IE10, opera12 */ } .cen { /*width: 150px;*/ padding-left: 10px; padding-right: 10px; /* height < line-height のとき、文字が各メニューの下に寄る */ /* height > line-height のとき、文字が各メニューの上に寄る */ height: 45px; /* バーの高さ */ line-height: 45px; /* 行間の高さ */ } #mapCanvas {
position: absolute; /* "debug button"の直下 */ width: 100%; height: 100%; } #mapCanvas h1{ font-size: 14px; } #mapCanvas p{ font-size: 12px; } #mapCanvas a{ color: #336699; text-decoration: none;
border-bottom: 1px dashed #2a9c3b; } #mapCanvas .icon{ width:12px; float:left; } #mapCanvas .thumbnail{ max-height: 200px; max-width: 2080px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
#mapCanvas .center{ text-align: center; } #mapCanvas .place{ text-align: right; text-shadow: 1px 0 0 #999; } #bachelor { text-align: center; } #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 90deg, rgb(180,209,192), rgb(229,255,221));
/* Safari,Google Chrome 用(左から順に、線形で開始位置・終了位置・開始色・終了色) */
background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); /* http://lets-it.jp/memorandum/2013/01/28/ie10opera12%E3%81%A7css%E3%81%AE
%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC
%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA %E3%81%84%E4%BB%B6/ を参照 */
background: -ms-linear-gradient(left, rgb(180,209,192), rgb(229,255,221)); /* IE10, opera12 */ padding-bottom: 5px;
padding-top: 5px;
/* 次の行 http://webtips-blog.com/2011/04/27/css/("Web Tips Blog") より引用 */
box-shadow: 1px 1px 5px #aaa; /* 左から、横方向のずれ、下方向のずれ、ぼかし具合、シャドウの色 */ }
height: calc(100% - 120px); /* IE10, opera12 対策 */ height: -moz-calc(100% - 120px); /* 縦:100% - 120px */ height: -webkit-calc(100% - 120px); /* webkit 対策 */ width: 300px; /* 横：300px */ position: absolute; /* 絶対位置 */ bottom: 10px; /* 下から 10px の位置 */ right: 50px; /* 右から 50px の位置 */ writing-mode: tb-rl; /* 横書き */ border-top-left-radius: 5px; /* 左上の角丸：5px */ border-bottom-left-radius: 5px; /* 左下の角丸：5px */ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); user-select: none; /* 反転禁止 */ -moz-user-select: none; -webkit-user-select: none; } buttonArea 部分 ---*/ #btnArea { width: 270px; height: 50px; margin: 10px 0 10px 30px; writing-mode: lr-tb; /* 横書き */ user-select: none; /* 反転禁止 */ -moz-user-select: none; -webkit-user-select: none; } #buttonArea { 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; /* 角丸 */ font-weight: bold; /* 文字を太字 */ /* グラデーション http://www.css-lecture.com/log/css3/css3-gradient.html("CSS Lecture") より引用 */ /* Firefox 用(左から順に、方向・開始色・終了色) */
background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221));
/* Safari,Google Chrome 用(左から順に、線形で開始位置・終了位置・開始色・終了色) */
background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); /* http://lets-it.jp/memorandum/2013/01/28/ie10opera12%E3%81%A7css%E3%81%AE
%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC
%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA %E3%81%84%E4%BB%B6/ を参照 */
/* 次の行 http://webtips-blog.com/2011/04/27/css/("Web Tips Blog") より引用 */ box-shadow: 1px 1px 5px #aaa; /* 左から、横方向のずれ、下方向のずれ、ぼかし具合、シャドウの色 */ border-color: 5px solid #000; } #orderSort:active { position:relative; top:1px; } #dateSort:active { position:relative; top:1px; } #areaSort:active { position:relative; top:1px; } #boxArea { width: 300px;
height: -ms-calc(100% - 80px); /* IE10, opera12 対策 */ height: -webkit-calc(100% - 80px); /* webkit 対策 */ height: -moz-calc(100% - 80px); /* FireFox 対策 */
overflow-y: scroll; /* はみ出したらスクロールバーを表示 */ writing-mode: lr-tb; /* 横書き */ } .wrapBox { /* イベント box */ height: 60px; width: 270px; margin-bottom: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); } .dateBox { /* 日付 box */ position: relative; font-weight: bold; /* 文字を太字 */ height: 50px; width: 50px; margin: 0 0 10px 10px; padding: 5px; /*color: rgb(50,50,50) ; 文字色：灰色 */ color: rgb(240,240,240); border-radius: 3px; /* 角丸 */
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: 0 3px 3px 0; /* 角丸 */ cursor: default; /* マウスカーソルを常にデフォルト */ float: left;
border-left: 5px solid rgba(0,51,204,0.4); -o-text-overflow: ellipsis; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); } .eventBox:hover { /* 上記アクティブ時 */ background-color: rgba(0,0,255,0.3); color: rgb(0,0,0); /* 文字色：黒色 */ } .sponsorBox { /* スポンサー名 */ position: absolute; top: 40px; right: 5px; color: rgb(100,100,100); /* 文字色：灰色 */ border-bottom: 3px solid rgba(0,51,204,0.4); text-shadow: 1px 0 0 #999; } .month { /* 月 */ font-size: 1.2em; top: 3px; left: 3px; position: absolute; } .split { /* 斜線 */ font-size: 2.5em; line-height: 50px; text-align: center; position: static; } .date { /* 日にち */ font-size: 1.2em; bottom: 3px; right: 3px; position: absolute; } .sun { /* 日曜日 */ background-color: red;
.sat { /* 土曜日 */ background-color: rgba(0,68,204,0.8); } .ordinary { /* 平日 */ background-color: rgba(0,0,255,0.1); color: rgb(50,50,50); /* 文字色：灰色 */ } twit 部分 ---*/ /* #twit { /* background-color: white ; /* 背景色:白 */ /* border-radius: 5px ; /* 角丸 */ /* opacity: 0.8 ; /* 透過度:80% */ /* height: calc(100% - 200px) ; /* 縦:100% - 120px */ /* height: -webkit-calc(100% - 200px) ; /* webkit 対策 */ /* width: 300px ; /* 横：300px */ /* position: absolute ; /* 絶対位置 */ /* bottom: 10px ; /* 下から 10px の位置 */ /* right: 50px ; /* 右から 10px の位置 */ /* overflow: auto ; /* はみ出したらスクロールバーを表示 */ /* writing-mode: tb-rl ; /* 縦書き */ /* border-top-left-radius: 5px ; /* 左上の角丸：5px */ /* border-bottom-left-radius: 5px ; /* 左下の角丸：5px */ /*}*/ .twitter-timeline { background-color: #ffffff; /* 背景色:白 */ width: 300px; position: absolute; right: 50px; bottom: 10px; } #tabArea { /* 右側タブ部分全体 */ top: 100px;
height: -ms-calc(150px); /* IE10, opera12 対策 */ height: -moz-calc(150px);
height: -webkit-calc(150px); width: 30px;
/*margin-right: 0; 左に横長で寄ってしまう */ right: 0px;
padding: 0; width: 30px; /*height: 150px ;*/ list-style: none; /* リストの先頭のマークを非表示に */ border-top-left-radius: 5px; /* 左上の角丸：5px */ border-bottom-left-radius: 5px; /* 左下の角丸：5px */ } .tabmenu a { /* タブメニュー内リンク */ display: inline-block; /* インライン-ブロック要素に変換 */ /* background-color: #C9F ; /* 背景：lightGray */ color: black; /* 文字色：黒 */ text-decoration: none; /* リンクの下線：非表示 */ text-align: center; /* 中央寄せ */ /*line-height: 150px ; 縦方向の中央寄せ height と同じ値を指定すると縦方向の中央寄せになる */ border-top-left-radius: 5px; /* 左上の角丸：5px */ border-bottom-left-radius: 5px; /* 左下の角丸：5px */ /* グラデーション http://www.css-lecture.com/log/css3/css3-gradient.html("CSS Lecture") より引用 */ /* Firefox 用(左から順に、方向・開始色・終了色) */
background: -moz-linear-gradient(left 90deg, rgb(180,209,192), rgb(229,255,221));
/* Safari,Google Chrome 用(左から順に、線形で開始位置・終了位置・開始色・終了色) */
background: -webkit-gradient(linear, left bottom, left top, from(rgb(180,209,192)), to(rgb(229,255,221))); /* http://lets-it.jp/memorandum/2013/01/28/ie10opera12%E3%81%A7css%E3%81%AE
%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC
%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA %E3%81%84%E4%BB%B6/ を参照 */
background: -ms-linear-gradient(left, rgb(180,209,192), rgb(229,255,221)); /* IE10, opera12 */ /* 次の行 http://webtips-blog.com/2011/04/27/css/("Web Tips Blog") より引用 */
box-shadow: 1px 1px 5px #aaa; /* 左から、横方向のずれ、下方向のずれ、ぼかし具合、シャドウの色 */ border-color: 5px solid #000; } .active a { /* 上記アクティブ時 */ background-color: #000000; /* 背景：黒 */ color: white; /* 文字色：白 */ font-weight: bold; /* 太文字 */ background: #000;
/* 次の行 http://webtips-blog.com/2011/04/27/css/("Web Tips Blog") より引用 */
box-shadow: 1px 1px 5px #aaa; /* 左から、横方向のずれ、下方向のずれ、ぼかし具合、シャドウの色 */ border-color: 5px solid #000; } /* インフォメーションページの CSS 設定 */ /*informationWindow の影*/ #informationWindow{ box-shadow: 0px 0px 20px #aaa; } /* 外枠の設定 */ #informationContainer{ /* 最初はかくしておく */ display: none; position: absolute;
width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } #informationContainer #informationWindow{ width: 800px; margin: 20px auto; } /* メインエリアの設定 */ #informationContainer #informationArea { padding: 20px; background-color: rgba(0,0,0,0.5); color: #FFF; } /* a タグの設定 */ #informationContainer #informationArea a { color: #99CCFF; } /* ボタンの色設定 */ .simpleButton { background-color: rgba(255,255,255,0); color: #FFF; } /* バーの設定 */ .windowBar{ background-color: rgba(0,0,0,0.5); text-align: right; } /* インフォメーションページの設定ここまで */ /* 検索切り替え用ボックスのサイズ調整 */ .searchSelect{ width: 40%; }
