目次 1 研究の目的と背景 概要 東広島市民活動情報サイトとは 元気 365 とは ICT とは 目的と問題点 インターネットブラウザの市場占有率(シェア)について ブラウザ別市場占

Size: px
Start display at page:

Download "目次 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 ブラウザ別市場占"

Transcription

1 平成 24 年度 卒業論文 東広島 Event Maps サイトデザイン 近畿大学工学部 情報システム工学科 4 年 情報物理研究室 情報メディアコース 小林 佑真 1

2 目次 1 研究の目的と背景 概要 東広島市民活動情報サイトとは 元気 365 とは ICT とは 目的と問題点 インターネットブラウザの市場占有率(シェア)について ブラウザ別市場占有率 日本 米国 世界 特徴 ブラウザバージョン別市場占有率 開発環境と目的 TeraPad GitHub 主な担当 市役所の担当者とのミーティングで出た意見 議論 今後の課題 謝辞 文献 引用資料 参考資料 付録(ソースコード) index.html hmap.css

3 1 研究の目的と背景 概要 東広島市民活動情報サイトとは 東広島市民活動情報サイト(図 1.1)(1)は テンプスタッフ ライフサポート株式会社(2)(平成 24 年 11 月 1 日に 旭化成ライフサポート株式会社とテンプスタッフ メディカル株式会社が合併し テンプスタッフ ライフサポート株 式会社に変更(3) 以下 当論文では"テンプスタッフ ライフサポート株式会社"とする )が作成しているサイトの 一つで 政府からの助成金で作られている 当サイトは 平成 22 年 3 月に行政運営サイトとしてオープンしたも の(4)で 東広島市民がイベントを検索するのに役に立つ検索方法の一つである 図 1 東広島市民活動情報サイトのトップページ 元気 365 とは 東広島市民活動情報サイトを運営 作成している"元気 365"(4)について説明する これは 行政と市民 市民 と市民のつながり ふれあい 協働をかたちにする市民活動支援サービス [1]である 企業 行政 民間など 7 つ に分かれており(行政と民間の協働運営サイトを含む) ほぼ全国で利用されている 広島県では 東広島市の ほかに 広島 廿日市 三原の各市と北広島町が"元気 365"を利用している 3

4 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 に 高屋地区を 選択した場合の例を示す) このページでは イベントの内容や開催する時刻 場所について直接確認する事が 出来ず 開催内容の詳細を見るにはそこから各団体が作成したページに飛ぶ必要がある 4

5 図 3 高屋地区を選択したときの検索結果 図 2 地域名をクリックする(図 1.1 より) 図 4 団体の例(高美が丘地域センター) 図 1.5 のボタンをクリックすると 図 1.6 のようにイベントがカレンダー形式で 1 ヶ月ごとに表示される イベント名 をクリックしたときの特徴は 次の通りである ① 会場と地図が掲載されており タイトルに団体名も含まれている(図 1.7) ② 会場は記載されているが 地図が掲載されていない(図 1.8) ③ 突然 実施内容が記載されている(例として 図 1.6 の四角の枠) さらに 東広島市全域で行われるイベントの情報が全て記載されているため イベントに初めて参加する市民 にとっては 会場が分からずに参加できなかった ということも起こり得る また 詳しい場所は各々のイベント情 報のページに移動しなければ確認することが出来ない 5

6 図 5 このボタンをクリックする(図 1.1 より) 図 年 2 月のイベントカレンダー(2 月 17 日現在) 6

7 図 7 地図の掲載が有るイベントの例(川上地域センターの活動発表会) 図 8 地図の掲載が無いイベントの例(久芳地域センターの異文化交流講座) 7

8 この問題を解消するために Google Maps とイベントを連動させ ユーザが求める情報の検索を行った結果 表示を視覚的に補助できるものと考えている 図 1.9 は 卒業研究当初に考えていたレイアウトである しかし このレイアウトでは Google Maps の領域が狭 いため 5 章の図 5.2 から図 5.9 のように全面を利用して作成した 図 9 当初のレイアウト(平成 24 年 5 月 9 日の第 1 回進捗報告会より) また Twitter の検索システムと連動させることで ユーザがページを移動することなくリアルタイムな情報を得る ことが出来る インターネットブラウザの市場占有率(シェア)について ブラウザ別市場占有率 図 2.1 から図 2.3 までは 平成 25 年 2 月 1 日現在の 過去 1 年間のブラウザ別の市場占有率の変化を表した グラフである また 表 2.1 から表 2.3 までは 3 ヶ月ごとのブラウザ別の市場占有率を数値で表した なお から まで 日本 米国 世界の状況をそれぞれ紹介し でこれらの特徴を説明する 8

9 2.1.1 日本 図 10 我が国の過去 1 年間のブラウザ別の市場占有率[2] 表 2.1 我が国の各ブラウザの市場占有率の変化(7) ブラウザ 市場占有率(単位 %) 平成 24 年 2月1日 平成 24 年 5月1日 平成 24 年 8月1日 平成 24 年 11 月 1 日 平成 25 年 2月1日 Internet Explorer Google Chrome Firefox Safari Opera 合計 9

10 2.1.2 米国 Internet Explorer を開発したマイクロソフト Google Chrome を開発したグーグル Mozilla Firefox を開発した 非営利組織のモジラファウンデーションの各社が米国にあるため 米国の市場占有率を調べた 図 11 米国の過去 1 年間のブラウザ別の市場占有率[3] 表 2.2 米国の各ブラウザの市場占有率の変化(8) ブラウザ 市場占有率(単位 %) 平成 24 年 2月1日 平成 24 年 5月1日 平成 24 年 8月1日 平成 24 年 11 月 1 日 平成 25 年 2月1日 Internet Explorer Google Chrome Firefox Safari Opera 合計 10

11 2.1.3 世界 図 12 世界の過去 1 年間のブラウザ別の市場占有率[4] 表 2.3 世界の各ブラウザの市場占有率の変化(9) ブラウザ 市場占有率(単位 %) 平成 24 年 2月1日 平成 24 年 5月1日 平成 24 年 8月1日 平成 24 年 11 月 1 日 平成 25 年 2月1日 Internet Explorer Google Chrome Firefox Safari Opera 合計 特徴 日本の約半数が Internet Explorer を利用していることが図 2.1 から分かる 要因として Windows 7 だけでな く Windows Vista や XP などの旧 WindowsOS にも対応したこと [5] バージョン 9 や 10 の成長が挙げられる(10) 図 2.3 より 世界では Google Chrome がトップになっている この要因として 速度や拡張性が挙げられており Google Chrome が優位ではないかと考えられる(11) 11

12 2.2 ブラウザバージョン別市場占有率 我が国の場合 図 2.4 のように Internet Explorer は バージョン 8 と 9 を合算して 約半数が利用している 図 13 我が国の過去 1 年間のブラウザバージョン別の市場占有率(12) 開発環境と目的 TeraPad TeraPad は 寺尾進氏が平成 11 年 4 月に設計したソフトウェアである 図 3.1 のように ファイルの種類に応じ て 色分けや外部ツールの呼び出しが可能である(13) 今回の研究では HTML や CSS の編集を目的として利 用した 図 3.1 に編集の例を示す 12

13 図 14 TeraPad での編集の例(上図は 東広島 Event Maps のソースコードの冒頭部分) 3.2 GitHub GitHub は GitHub.com により運営されている Git ホスティングサイトである [6] TeraPad で更新したソースファ イルをコミットして同期するために用いる 用いる理由は業界標準だからである(デファクトスタンダード ラテン語 で 事実上の という意味(14)で 市場競争を勝ち抜くことによってその業界の標準と見なされている規格 [7]であ る) GitHub を用いて 更新後のサイトを見る場合は 以下の作業を行う ① ソースコードの内容に変更が発生した場合 図 3.2 の枠中にある "SHOW"ボタンをクリックする 図 15 コミットを行う前に "SHOW"ボタンの左側に"uncommitted changes"と表示される 13

14 ② 図 3.3 の四角い枠中(黄色い背景の部分)にある入力スペースに更新情報を入れ "COMMIT"ボタン(四角 い枠中の左下の部分)と"sync"ボタン(丸い枠中の部分 "COMMIT"ボタンをクリックする前は"in sync"と表示さ れる)をクリックする 図 16 コミットとシンク(同期)の画面 ③ 4 更新後のサイトを見ることが出来ない場合は 図 3.3 の"sync"ボタンよりシンクする 主な担当 ここでは 私が担当した内容を紹介する サイトを構成する基本となる 全体 HTML CSS の定義 デザイン 設計 5 市役所の担当者とのミーティングで出た意見 議論 平成 24 年 11 月 16 日 東広島市役所企画振興部地域政策課の職員 2 名と研究メンバー 4 名の計 6 名で 近畿大学工学部情報システム工学科の情報物理研究室(G352)にてミーティングを行った このミーティングで 次の内容に関して意見や要望が出た 高齢者のユーザが多い ユーザの割合が不明で 調査に手が回らないのが現状である 一般市民の場合 会員登録が不要なため アンケートを取ることが出来る 個人会員は約 100 人だが データが無い また メールマガジンもあるが 発行には至っていない アクセス数について 無料で Google のアカウントを取得したところ アクセス数が昨年度より伸びた サイト上部のバーについて かつて 東広島市の市章(図 5.1)の背景と同じ緑色を使用していた(図 5.2 図 5.5) しかし この色では濃い ため ユーザビリティが低下する(ほかに 蛍光色 赤 緑 青 黄など基本となる色が挙げられる) これを受けて 見栄えを良くしたり 視認性を高めたりするために 図 5.6 から図 5.8 までのように グラデーションを用いることに した デザインについて 以前の 1.5 倍の高さに設定し 文字を大きくして欲しい とアドバイスを受けた 14

15 図 17 東広島市の市章[8] 図 5.2 から図 5.5 までは グラデーションを設定する前に Internet Explorer Google Chrome Firefox で得られ たトップページである(平成 24 年 11 月 20 日現在) 図 5.5 は Google Chrome Firefox においても同様の結果 が得られたので割愛する 図 図19 Internet 18 Google Chrome Explorerでの地図表示 での地図表示 15

16 図 20 Firefox での地図表示 図 21 マウスオーバーしたときの例(Internet Explorer) 図 5.6 から図 5.9 までは グラデーションを設定した後に Internet Explorer Google Chrome Firefox で得られ たトップページである(平成 25 年 2 月 10 日現在) 図 5.7 から図 5.9 までの文字は 地域センターや団体名を表 す 16

17 図 22 Internet Explorer での地図表示 図 23 Google Chrome での地図表示 17

18 図 24 FireFox での地図表示 図 25 グラデーションを設定した後の FireFox での地図表示(2 月 8 日現在) 6 今後の課題 Internet Explorer において 図 5.6 のように グラデーションで表示されなかったり 配置が悪かったりした そ のため Internet Explorer 向けのグラデーションを実現出来る記述方法を探したり 考えたりする必要がある 18

19 7 謝辞 当研究にあたり 指導教員である徐丙鉄准教授 東広島市役所企画振興部地域政策課の方々 研究 生の皆様の指導に深く感謝いたします 文献 引用資料 [1] (旭化成ライフサポート株式会社 元気 365 実例のご紹介) [2] (StatCounter Global Stats Top 5 Browsers in Japan from 1 Feb 2012 to 1 Feb 2013) [3] (StatCounter Global Stats Top 5 Browsers in the United States from 1 Feb 2012 to 1 Feb 2013) [4] (StatCounter Global Stats Top 5 Browsers from 1 Feb 2012 to 1 Feb 2013) [5] (livedoor ニュース IE 8 が 3 年連続で 1 位に - 12 月デスクトップブラウザシェア) [6] (辞典 百科事典の検索サービス - Weblio 辞書 GitHub とは) [7] (Yahoo!辞書 デファクト スタンダード de facto standard の意味とは ) [8] (東広島市公式ホームページ 東広島市の市章) 19

20 8.2 参考資料 (1) (東広島市役所 ひがしひろしまし市民協働のまちづくり 市民活動情報サイト) (2) (テンプスタッフ ライフサポート株式会社 元気 365 実例のご紹介) (3) (テンプスタッフ ライフサポート株式会社) (4) (旭化成ライフサポート株式会社 元気 365 実例のご紹介) (5) (IT 用語辞典バイナリ BINARY : パソコン インターネットの用語辞典 ICT とは) (6) (情報活用力診断テスト Rasti ICT の重要性) (7) (StatCounter Global Stats Top 5 Browsers in Japan from 1 Feb 2012 to 1 Feb 2013) (8) (StatCounter Global Stats Top 5 Browsers in the United States from 1 Feb 2012 to 1 Feb 2013) (9) (StatCounter Global Stats Top 5 Browsers from 1 Feb 2012 to 1 Feb 2013) (10) (livedoor ニュース IE 8 が 3 年連続で 1 位に - 12 月デスクトップブラウザシェア) (11) (BLOGOS ブロゴス - 意見をつなぐ 日本が変わる ブラウザ戦争 Chrome が世界ではトップに 日本は IE 王国) (12) (StatCounter Global Stats Top 12 Browser Versions in Japan from Feb 2012 to Feb 2013) (13) (Wikipedia TeraPad) (14) (Yahoo!辞書 デファクト スタンダード de facto standard の意味とは ) 20

21 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=" <!-- jquery --> <script type="text/javascript" src=" <!-- 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"); ) 21

22 ); </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 に移動させる, '#' 同じファイル内の特 定位置にジャンプ( より) --> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">西条地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">高屋地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">志和地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">八本松地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">河内地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">福富地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">豊栄地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">黒瀬地区</a></li> <li class="cen" onclick="javascript:gmap.panto(new google.maps.latlng( , ));"><a href="#" target="_blank">安芸津地区</a></li> </ul><!-- "地域センター" の ul タグここまで --> </li><!-- "地域センター" の li タグここまで --> <!-- 次の li タグを作ると 横に表示される --> <li class="cen"> <a>リンク </a> <ul> <li class="cen"><a href=" target="_blank">市民 活動情報サイト</a></li> 22

23 <li class="cen"><a href=" target="_blank">東広島市役所</a></li> <li class="cen"><a href=" target="_blank">近畿 大学工学部</a></li> <li class="cen"><a href=" target="_blank">広 島大学</a></li> <li class="cen"><a href=" 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="1">市内全域</option> 23

24 <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=" %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=" ">東広島 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=" title="東広島市民活動情報サイト">東広島市民活 動情報サイト</a> の情報をもとに 地図上に </p> <h2>ライセンス その他</h2> <p>近畿大学 工学部 情報システム工学科 <a href=" title="情報物理研究室">情報物理研究室</a></p> <p>copyright Higashi-Hiroshima City <a href=" title="東広島市民活動情報サイト">東広島市民活動 情報サイト</a></p> 24

25 <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 Pゴシッ ク", "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; /* 次の行 "background: #555;") */ /*background: #555;*/ /* グラデーション 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))); /* 次の行 Tips Blog") より引用 */ box-shadow: 1px 1px 5px #aaa; /* 左から 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色 */ 25

26 border-color: 5px solid #000; padding-bottom: 5px; color: #2F4F4F; z-index: 9999; /* 最前面に表示 */ #topbar { top: 0; left: 0; width: 100%; height: 50px; /* グラデーション 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))); /* %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: #2F4F4F; /* 通常時の文字の色 */ text-decoration: none ; /* 下線なし */ cursor: pointer; /* マウスの形をポインター */ outline: none; ul a:hover >.cen { 26

27 color: red; /* オンマウス時の文字の色 */ /* グラデーション 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))); /* %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); 27

28 #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; /* グラデーション 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))); /* %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; /* 次の行 Tips Blog") より引用 */ box-shadow: 1px 1px 5px #aaa; /* 左から 横方向のずれ 下方向のずれ ぼかし具合 シャドウの色 */ /* listarea 部分 */ #listarea { /* listarea 全体 */ background-color: white; /* 背景色:白 */ border-radius: 5px; /* 角丸 */ opacity: 0.8; /* 透過度:80% */ 28

29 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; /* 文字を太字 */ /* グラデーション 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))); /* %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 */ 29

30 /* 次の行 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: px 10px; padding: 5px; /*color: rgb(50,50,50) ; 文字色 灰色 */ color: rgb(240,240,240); border-radius: 3px; /* 角丸 */ cursor: default; /* マウスカーソルを常にデフォルト */ float: left; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);.eventBox { /* タイトル box */ line-height: 1.0; position: relative; 30

31 font-weight: bold; /* 文字を太字 */ height: 50px; width: 190px; margin: px 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; 31

32 .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; position: absolute; /* 絶対位置 */ writing-mode: tb-rl; /* 縦書き */ color: black; ul >.tabmenu { /* 各タブメニュー */ margin: 10px 0 10px 0; background-color: #C9F; /* 背景 lightgray */ 32

33 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 */ /* グラデーション 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))); /* %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 */ /* 次の行 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; /* 次の行 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; 33

34 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%; 34

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

Microsoft PowerPoint - HTML1復習_1021.ppt HTML-Ⅱ(HTML 文 書 構 造 編 ) 3-1 HTML 基 本 構 造 html おいしいお 店 一 覧

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

to-r

to-r to-r We re targeting a 1.0 release within the next few weeks. 1.0 IE6 jquery Mobile Sample

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J 1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています

More information

トリガーをわかり易くする方法

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

More information

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書 目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 1.CSSとは? 3 1.CSSとは?

More information

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

Color Change

Color Change 1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します

More information

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc) ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~ ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる

More information

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像

More information

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な

本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 な アメブロ ~ヘッダー 画 像 メニューバーの 設 定 方 法 ~ 本 資 料 では アメブロのヘッダー 画 像 とメニューバーの 設 定 をご 自 身 で 行 っていただくた めのものです < 目 次 > 1. ヘッダー 画 像 の 設 定 方 法 1-1: 自 分 の 指 定 した 画 像 をヘッダー 画 像 に 設 定 方 法 1-2: 自 分 で 簡 単 なヘッダー 画 像 を 作 成 する

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

テキスト

テキスト インターネットの歴史 コンピューターは第2次大戦中のミサイル弾道計算の為に急速に発展しました 同様にコンピューター ネットワークも どこか一台のコンピューターが破壊されても 他のコンピューター同士の通信は維持さ れるように設計されました これが今のインターネットの原型であるアーパネットです その後 研究所 や大学 国の機関を中心にそれらを相互に接続し広まっていき 一般の商用利用が開始され 現在のイン

More information

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 takahagi

More information

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt 1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web プログラミング 1 20130508 演習

More information

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23 Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 1/23 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111019 演習

More information

Ⅴ ブラウザーの使い方 V. ブラウザーの使い方 起動 終了 画面説明 ホームページ移動 リンクを使って移動 アドレスバーからの移動 ボタンでの移動

Ⅴ ブラウザーの使い方 V. ブラウザーの使い方 起動 終了 画面説明 ホームページ移動 リンクを使って移動 アドレスバーからの移動 ボタンでの移動 V. ブラウザーの使い方... 45 1. 起動... 45 2. 終了... 45 3. 画面説明... 46 4. ホームページ移動... 47 4-1 リンクを使って移動... 47 4-2 アドレスバーからの移動... 47 4-3 ボタンでの移動... 47 5. ホームページ検索... 48 5-1 e-キャンパスセンターのホームページから検索... 48 5-2 アドレスバー/Google

More information

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=clipanime1.css> </head> < 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

More information

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div 1334 テキストのアニメーション animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ ましょう ( 注 )Safari(webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color

More information

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:

More information

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変 カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインのヘッダー 部 グローバルメニューは 右 上 の 3 本 線 アイコン に 格 納 され ます クリックすると メニュー 項 目 が 展 開 します 上 部 メニューはそれぞれ テキスト から 左 上 のアイコン( 画 像 )に 切 り 替 わります 管 理 画 面 でのブロック 配 置 ヘッダー

More information

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6..................... web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

extCountdown.pdf

extCountdown.pdf 拡張機能ユニット カウントダウンユニット マニュアルシフトテック株式会社 発行 :2018/11/21 改定 :2018/12/13 カウントダウンユニット マニュアル - 1 概要 指定された日時までカウントダウンを行うユニットです ール ー ア ン ンテ ー 特徴 指定した日時までカウントダウンし 終了後は自動で停止します 任意の URL を設定すると カウント終了後にページにアクセスがあった場合

More information

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

More information

JavaScriptプログラミング入門

JavaScriptプログラミング入門 JavaScript 2015 8 15 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

V.ブラウザの使い方

V.ブラウザの使い方 V. ブラウザーの使い方 Windows ブラウザーとは インターネット上のホームページを閲覧するためのソフトウェアのことです ブラウザーはインターネットから HTML ファイルや画像ファイル 音楽ファイルなどをダウンロードし レイアウトを解析して表示 再生します パソコン教室には Internet Explorer Firefox Chrome の 3 種類のブラウザーをインストールしてあります

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 目次 はじめに ログイン ログアウト ( 終了 ) パスワードの変更 サイト管理者マニュアル ユーザーを管理する ( 追加 変更 削除 ) カテゴリを管理する ( 追加 変更 削除 ) P ~5P トップページを管理する ( トップページ フレーム 背景 ) 6~0P 参考 カテゴリ項目の表示 非表示 8P 参考 カテゴリから直接添付ファイルを開く タイトル文字の変更 カレンダーを管理する ( スケジュール追加

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです

More information

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )

More information

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63>

<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63> 1. はじめに 1 1-1. ガイドラインを策定するにあたって 1 1-1-1. ウェブアクセシビリティとは 1 1-1-2. ウェブアクセシビリティが求められている背景 1 1-1-3. 高齢者 障害者の閲覧時の利用特性 2 1-1-4. 視覚障害者への対応 2 1-1-5. ウェブアクセシビリティの JIS 規格化 3 1-1-6. ガイドラインの重要性 3 1-2. ガイドラインの適用範囲 4

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ このテキストについて このテキストは おもに下記の方を対象にしています Windows パソコンを使い 基本的なキーボード操作 マウス操作のできる方 アメブロを自分だけのデザインにカスタマイズしたい方 アメブロにメニューバーなどを設置して 使いやすいデザインにしたい方 本書はパソコン教室での個別学習を想定して作成されたテキストです インターネットにつながる環境が必要です テキストの作成環境 OS:

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます

More information

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................

More information

共済会_Kねっと利用マニュアル(2018).indd

共済会_Kねっと利用マニュアル(2018).indd ~ K ねっとシステム利用マニュアル ~ ご注意 この冊子にはインターネット上で職員会員に関するデータを取り扱うための設定や操作方法等が記載されています 別紙 WEB 方式利用通知 とあわせて厳重に管理及び保管をしてください 2018.9 改訂 目次 Ⅰ.K ねっと概要 1 Ⅱ.K ねっとへの接続方法 ( ログイン ) 1 Ⅲ. 操作方法 1. ファイルのダウンロード ( 俸給等報告データの 取得

More information

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content: 記号や文字 ;} css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

Microsoft Word - WebMail.docx

Microsoft Word - WebMail.docx 生涯メールの利用について 2015.4.1 1. はじめに生涯メールは 2015 年 4 月より Microsoft Office365 というクラウドサービスの運用に変更しました これは 東海大学のメールサービスの切り替えに伴う変更で 東海大学では 東海大学コミュニケーション & コラボレーションシステム ( 略して T365) と呼んでいます 従来は転送サービスのみとなっていましたが メールボックスを持ち

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

目次 1. ログイン ログアウト デスクトップ ( 例 :Word Excel 起動中 ) Dock( 例 :Word Excel 起動中 ) Finder ウィンドウ メニューバー ( 例 :Word 起動中 )...

目次 1. ログイン ログアウト デスクトップ ( 例 :Word Excel 起動中 ) Dock( 例 :Word Excel 起動中 ) Finder ウィンドウ メニューバー ( 例 :Word 起動中 )... 2017 年 9 月 19 日 目次 1. ログイン... 1 2. ログアウト... 3 3. デスクトップ ( 例 :Word Excel 起動中 )... 4 4. Dock( 例 :Word Excel 起動中 )... 5 5. Finder ウィンドウ... 9 6. メニューバー ( 例 :Word 起動中 )... 10 7. 文字の入力 ( 例 :Word で入力 )... 11

More information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information