観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる

Size: px
Start display at page:

Download "観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる"

Transcription

1 観光情報論 2014 年第 5 講 5 月 27 日着地情報 Travel Information Center ( 沖縄 : 喜納番所 ) Civic Pride: ハンブルグ ホームページ : 画像の挿入

2 ハンブルグ要約 ドイツのハンブルク市では歴史的背景から港湾都市と市街地が分断されていた それを再び結び付け 職住近接の複合的な都市再生プロジェクトとしてハーフェンシティ開発が行われている この開発では 総面積 155ha の中に 1 万 2000 人の移住者のための集合住宅 5500 戸と 4 万人の雇用を創出する このプロジェクトには その開発自体が市民と関係を構築することを意図しているものが多い また著者はその開発順序がユニークだと述べている ハーフェンシティではさまざまな建物や施設よりも前に 広場などのオープンスペースが整備され 開発が進むオープンスペースのすぐ横で 市民たちが散歩をしたりピクニックをしたりしながら建設の現場の進行を見る事ができるようになっている その他にも ビュー ポイント という展望タワーが設けられていたりととてもユニークである またそのタワーの場所は 常に現場に隣接しており 開発の進捗に合わせて移動するというから驚きだ (Mami Miyagi)

3 ハンブルグ要約 ハンブルクは Metropolis Hamburg-A Growing City というコンセプトのもと 大都市圏の成長力底上げのための ヨーロッパ最大規模の都市再生プロジェクトを実行し 観光都市としての側面も持ち合わせた競争力のある都市としての成長を目指している ユニークでインタラクティブなコミュニケーション ポイントの存在によって 未来のまちは市民に見守られて生まれ育ち 市民のものとして獲得されていくと考えているため 常に良質な接点づくりが意識されている そのコミュニケーション ポイントのためのインフォセンターは小さな施設であるが 開発プロジェクトに関するさまざまな情報公開を積極的に行っていて 市民や来街者自らが情報を引き出せるよう工夫されている また先進的な都市再生モデルとしての価値を訴求し 世界中から投資を募るためのメディアとしても機能しているのである そして同時に こうした数多くの視察は この開発プロジェクトの国際的なプレゼンスを向上させ 市民がさらにプライドをもつための一助となっているのである (Marie

4 ハンブルグ要約 ハンブルグの都市戦略を読んで 市民の意識づくりが大切であると思いました この政策は 市民が自分の都市へ愛着を持てる工夫がたくさんある その中でも 巨大模型という視覚的に都市をとらえるというところが良いと思った 沖縄で視覚的に情報を発信する場所は少ないように思う 現在 市民に情報を発信するのは 県の雇用政策科の グッジョブ運動 が一番印象に残る しかし それは県の政策の一部のキャンペーンであり 一部の情報でしかない また 情報のターゲットも限られている 現在沖縄では アジアゲートウェイ政策 が観光産業政策の中心となっており 経済政策の中心でもある その為 巨大模型の政策を取り入れ 県民がよく利用するショッピングセンターに設置するのも面白いかと思った ( 山城由紀子 )

5 ハンブルグ感想 情報公開を積極的に公開し その情報を市民や来街者が自ら調べてもらうことや 併設されたカフェで市民や無目的に訪れる人達にも まちの情報にアクセスできるというような コミュニケーション ポイントをデザインすることは 市民一人一人に街に対してのプライドを持ち 街を好きになってもらえるいいきっかけとなっているように感じました ハンブルクのコンセプトの MetropolisHamburg-A Growing City からはアムステルダムとバルセロナのように市民や人というものを感じられないが ハーフェンシティの開発にはその開発自体が市民と関係を構築することを意図しているものが多いなど やはり市民との関わりを大切にしていることがわかりました

6 喜名番所 首里城から中頭 国頭にいたる番所沿い に位置した 1853年 ペリー提督調査隊一行も訪れた 1897年 間切り役場 読谷山間切 ユンタ ンザマギリ 1908年 読谷村役場 2005年 観光案内所 厳かなランドマーク 情報発信機能 観光案内所 休憩機能(無料休憩所 写真パネル 地図 検索機器 トイレ 多 目的室 畳 ベンチ 模型 観光ガイド常 駐 読谷村役場職員 午前9 00 6 00 月曜休館

7

8

9

10

11

12

13 読谷の観光案内所? さあ 入ってみましょう

14

15

16

17

18

19

20

21

22

23

24

25

26 img src= mypicture.jpg > イメージ ( 絵や写真 ) のタグ img src= mypicture.jpg height= 240 width= 320 > img src= nahatim.jpg align= left > img src= rojo_map_okinawa1.jpg lt= 沖縄のオブジェ align= center height="240" width="320" img src= hyoshiki_shuri.jpg alt= 観光客のための道路標識 align="right"> br clear= all >

27 演習編 (B)- (A)- 写真と画像をホームページに入れよう! Img src (image source タグ ) <html> <head> <meta http-equiv= Content-Type content= text/html; charset=shift_jis > <title> 観光情報論第 5 講私の選んだ観光の着地情報 2014 </head> <body> <h1> 私の選んだ観光の着地情報 2014</h1> <h2> 私の紹介 </h2> <p> <img src= mypicture.jpg height= 240 width= 320 > </title> 皆さん こんにちは 私は観光産業経営学部産業経営学科の宮国です 私の趣味は ピアノ 水泳 旅行などです 私のモットーは 一日一日を大切に生きる です </p> </body> </html> 実際の写真の大きさは 640X480 WEB に適当な大きさ 例えば 320X240 にしてみる

28 onsite_info.htm と名前をつ けて保存しましょう さあ! 保存したら 出来上がりを見ましょう

29 演習編 (1)- 写真と画像をホームページに入れよう! <html> <head> <meta http-equiv= Content-Type content= text/html; charset= Shift_JIS > <title> 私の選んだ観光の着地情報 2014 </title> </head> <body> <h1> 私の選んだ観光の着地情報 2014</h1> <h2> 私の紹介 </h2> <p> <img src= mypicture.jpg > 皆さん こんにちは 私は観光産業経営学部産業経営学科の宮国です </p> <h2> 1. 街の Tourism Information Center</h2> <img src= nahatim.jpg align= left > 私は国際通りと交差する美栄橋通りにある那覇観光案内所を選びました この案内所では 無料の観光情報誌 ホテルやレンタカー オプショナルパッケージツアー等 のパンフレットを用意しています また 観光客のためのトイレや車いす ベビーカー等の サービスも用意しており 便利です 常駐の二人の職員が観光地のアドバイスもしてくれます ぜひ 訪れてみてください </body> </html>

30 演習編 (2)- 写真と画像をホームページに入れよう! <h2> 1. 街の Tourism Information Center</h2> <p> <img src="nahashitim1.jpg" alt= 那覇市観光案内所 " align="right"> 私は国際通りと交差する美栄橋通りにある那覇観光案内所を選びました <br> この案内所では 無料の観光情報誌 ホテルやレンタカー オプショナルパッケージツアー <br> のパンフレットを用意しています また 観光客のためのトイレや車いす ベビーカー等の <br> サービスも用意しており 便利です 常駐の二人の職員が観光地のアドバイスもしてくれます ぜひ 訪れてみてください <br clear="all"> </p> <h2> 2. 観光者向けの地図 オブジェ </h2> <p> <img src= rojo_map_okinawa1.jpg alt= 沖縄の路上マップ align= center height="240" width="320"> これは 国際通りの路上で見つけた 観光客に 沖縄 という場所を感じさせることのできる 芸術的な地図です <br clear="all"> </p>

31 演習編 (3)- 写真と画像をホームページに入れよう! <h2> 2. 観光者向けの地図 </h2> <p> <img src="rojo_map_okinawa1.jpg" alt= 沖縄の路上マップ " align="center" height="240" width="320"> これは 国際通りの路上で見つけた 観光客に 沖縄 という場所を感じさせることのできる 芸術的な地図です <br clear="all"> </p> <h2> 3. 観光者を視野に入れた道路標識 </h2> <p> <img src= hyoshiki_shuri.jpg alt= 観光者を視野に入れた道路標識 align="right"> これは沖縄県首里にある道路標識です リピーター観光客が利用して 周辺を散策できるので <br> 地域の 情報のリンケージ として機能していると思います <br> この標識の素材は琉球石灰岩で造られており <br> また 地域の建物と違和感のない素材作られているので <br> 来た人にこの土地の雰囲気を醸し出す美しい造りであることから <br> 構造物のリンケージ としても機能しています <br clear="all"> </p>

32 演習編 (4) 写真と画像をホームページに入れよう! Align タグ <h2> 3. 観光者を視野に入れた道路標識 </h2> <p> <img src= hyoshiki_shuri.jpg alt= 観光者を視野に入れた道路標識 これは沖縄県首里にある道路標識です リピーター観光客が利用して 周辺を散策できるので <br> 地域の 情報のリンケージ として機能していると思います <br> この標識の素材は琉球石灰岩で造られており <br> また 地域の建物と違和感のない素材作られているので <br> 来た人にこの土地の雰囲気を醸し出す美しい造りであることから <br> 構造物のリンケージ としても機能しています <br clear="all"> </p> <h2> 4. 街にある無料の観光情報誌 </h2> <img src= nahatim.jpg align= right > align="right"> 私は県内のホテルやレンタカー 観光案内書で自由にピックアップできる たびんちゅ <br> を選びました たびんちゅ は年 4 回発行されており 沖縄のおみやげやレストランについての <br> 情報が満載されています 大きさも持ちやすい縦 21 センチ 横 25 センチのものなので 荷物を <br> 多く持ちたくない旅行者にもちょうどいい大きさです <br> </body>

33 列と行のタグ 表の作り方 ( タグの意味 ) <table> テーブル ( 表 ) 開始タグ <tr> 表の行を表す (table row) <td> 表のセル表す (table data cell) </table> テーブル ( 表 ) 終了タグ

34 <table> <tr> <td> 観光情報の区分 </td> <td> 名称 </td> <td> 感想 </td> </tr> <tr> <td> 無料情報誌 </td> <td> たびんちゅ </td> <td> 食堂や土産品情報満載 </td> </tr> 演習編 (5-1) 写真と画像! 列と行のタグ + ボーダー <tr> <td> 街にある観光オブジェ </td> <td> 首里城近辺の石灰岩を使用した標識 </td> <td> 街の雰囲気に合っている <td> その街にいることが感じられる </td> </tr>

35 演習編 (5-2) 写真と画像! 列と行のタグ + ボーダー (boarder) <h2> 7. 私の評価 ( 表の線入り )</h2> <table border="3"> <tr> <td> 観光情報の区分 </td> <td> 名称 </td> <td> 感想 </td> </tr> <tr> <td> 無料情報誌 </td> <td> たびんちゅ </td> <td> レストランやお土産品の情報が満載 </td> </tr> <tr> <td> 街にある観光オブジェ </td> <td> 首里城近辺の石灰岩でできた標識 </td> <td> 街の雰囲気に合っている その街にいることが感じられる </td> </tr>

36 課題 1.onsite_info.htm ( 私が選んだ観光の着地情報 ) を 提出 写真も一緒に添付 ( そうすると画像が見える ) 2.Civic Pride の事例 Newcastle/Gateshead の プロモーション戦略を civicpride.htm にまとめ メールで提出まとめ (400 字程度 ) 感想 (300 程度 ) 4. 期限 : 5 月 31 日 ( 日 ) 11:59m 5. 件名 : 観光情報論 _Onsite Info & Newcastle/Gateshead 6. メール先 : kaorukom@eve.u-ryukyu.ac.jp 2014/6/17 36

37 機能 : 休憩 情報発信 地域の連携 沖縄のTourism Info Center 道の駅 ( 情報のLinkage) 道の駅地図 gm/#page_ttl サービス : 道路情報 物産センター 24 時間対応 案内人 2014/6/17 37

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる 観光情報論 第 6 講着地情報のまとめ マンチェスターの復習 シビックプライドの起点 URBIS ハンブルグ まちがつくられるライブ感 画像入り! ファイル 私の選んだ観光の着地情報 演習編 (A) 写真と画像をホームページに入れよう!

More information

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる 観光情報論 2019 年 5 月 21 日第 6 講画像挿入と表作成 Civic Pride (Hamburg) 道の駅 ( 嘉手納 ) HTML( 画像の挿入 表の作成 ) Location of Hafen City https://en.wikipedia.org/wiki/hafencity#/media/file:hafencity_in_hh.svg https://upload.wikimedia.org/wikipedia/commons/4/49/niederbaum_hochhäuser.jpg

More information

観光情報論  2018年6月5日 第9講 ブリストル・スタイルシート

観光情報論  2018年6月5日 第9講 ブリストル・スタイルシート 観光情報論 2019 年 6 月 11 日第 9 講スタイルシート 講義 : 期末プロジェクトグループ作成 確認 CSS で civicpride.htm を編集 自己紹介のファイル 1 スタイルシート (CSS) CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて スタイルシート とは CSS のことを指す CSS を使うと 参考書 できるホームページ

More information

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる 観光情報論 6 月 10 日第 8 講画像挿入の応用 ( オリジナルの画像作成 ) Civic Pride:Bristol (Lecture) Civic Pride: Newcastle/Gateshead (Homework) オリジナルの絵やバナーを入れる メモ帳 ( 例 )

More information

スライド 1

スライド 1 第 8 講観光情報論 2009 年 6 月 16 日 Style Sheet (CSS) 宮国薫子 1 CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて 教科書で言う スタイルシート とは CSS のことを指す CSS を使うと Page 106 にあるようにホームページの体裁が変わる 2 まず Region_page.h tml を開く

More information

スライド 1

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

More information

スライド 1

スライド 1 観光情報論 2017 年 6 月 6 日 第 9 講ブリストル スタイルシート 課題 :Civic Pride:Bristol 講義 : 道の駅 ( 国頭 大宜見 ) HP: Style Sheet (CSS) 期末プロジェクトグループ作成 1 スタイルシート (CSS) CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて スタイルシート

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ 1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます (

More information

websample 1 2 websample index.html

websample 1 2 websample index.html Web HTML Web 1 2 3 4 5 6 7 1 2 3 4 5 6 websample 1 2 websample index.html -1-1 HTML index.html html head /head body /body /html body table border="1" /table /body table border="" /table table /table table

More information

Taro-ホームページB5.jtd

Taro-ホームページB5.jtd 4 タグの基本 (Ⅳ) 画像 基本 19 1 画像を入れる 2 画像の大きさを指定する 3 画像に枠を付ける 4

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

untitled

untitled FONT FACE=" " /FONT hp11.html FONT FACE=" " /FONT FONT FACE=" " HTML HP10.html HTML HTML HTML html head title /title font face=" " size="5" /fontbr font face=" " size="5" /fontbr font size="5" /fontbr

More information

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========> 1 / 16 第 11 回セミナー / 全 12 (2014/8/28) HP の基本的構造の理解とページ構成の工夫 これだけはマスターしておきたい HTML 厳選タグ迷子を生まないためのリンクの配置 ( 読ませる工夫 ) Web 作成の基本ツール Web ブラウザ Chrome FireFox Opera (Internet Explorer) Chrome Firefox Opera https://www.google.com/intl/ja/chrome/browser/features.html

More information

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

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

More information

■新聞記事

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

More information

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

CONTENTS 0 /JSP 13 0.1 Web 14 1 HTML Web 21 1.1 Web HTML 22 1.2 HTML 27 1.3 Web 33 1.4 HTML 43 1.5 46 1.6 47 1.7 48 2 Web 51 2.1 Web 52 2.2 Web 54 2.3 Web 59 2.4 65 2.5 68 2.6 75 2.7 76 2.8 77 3 81 3.1

More information

広告掲載規定

広告掲載規定 itsmf Japan ウェブサイト広告掲載要項バージョン 1.5 2014 年 10 月 9 日 特定非営利活動法人 itsmf Japan 1. 広告の掲載箇所と方法 広告の表示箇所 広告の表示箇所は次のとおりです 1 アピールコーナー itsmf Japan ウェブサイトの右側に位置するアピールコーナーの下部に 会社ロゴ を表示します 会社ロゴ がない場合は 会社名を表示します 2 ITIL

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

2009年 観光情報論 第11講 画像・ビデオ・ファイル

2009年 観光情報論 第11講 画像・ビデオ・ファイル 2013 年観光情報論 6 月 17 日 Tourism Linkage 第 9 講 ホームページをサーバーにのせる! 期末プロジェクト提出の基準 1. 最低限必要なファイルと内容 1. グループの表紙ページ ( 日 英 ) にその 観光情報のコンセプト が示されていること 2. 個人の表紙ページ ( 日 英 ) 3. リンク先のページ ( 内容のページ3 枚以上 )( 日 英計 6 枚 ) 4.

More information

情報C 4月スクーリング プリント

情報C 4月スクーリング プリント 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) 1/9 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) スクーリング日 ( ) 生徒番号 ( ) 氏名 ( ) 学習 目標 1. HTML を使って Web ページを作成できる 2. e-typing 結果の推移をわかりやすく伝えることができる 3. 著作権や肖像権に配慮することができる

More information

Taro-02_Web_html自習テキストⅡ.

Taro-02_Web_html自習テキストⅡ. 平成 18 年度 学校 Web ページ作成研修講座 HTML の基礎 Ⅱ ~ メモ帳で Web ページを作ろう!!~ 今回の勉強内容 背景画像の挿入 / 画像の挿入 / BGM の設定 / メールリンクの設定 岩手県立総合教育センター 情報教育室 目 次 1 復習 1 2 背景画像の挿入 2 3 画像の挿入 4 4 BGM の挿入 5 5 メールリンクの設定 6 作業フォルダの準備 作成したファイルを保存するフォルダとして

More information

1

1 1 2 3 4 確認しよう 今回のサンプルプログラムにアクセスしてみましょう 1. デスクトップ上のフォルダをクリックし /var/www/html に example1.html と example2.php ファイルがあることを確認します 2. ブラウザを起動し 次の URL にアクセスします http://localhost/example1.html 3. 自分の手を選択して じゃんけんぽん

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/ Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

1/2

1/2 札幌学院大学社会情報学部課題用テキスト (2) 1 札幌学院大学社会情報学部課題用テキスト HTML の基礎知識 (2) 1 画像の表示 HP に画像を表示させてみる まず HTML 文書と同じフォルダ内 に JPEG ファイル ( 拡張子.jpg ) を 1 個準備する ( 画像の作り方 サイズの調べ方はこのプリントの最後を参照 ) この画像を読みこんで表示するためのタグは以下の通りである 画像ファイル名と

More information

文京女子大学外国語学部

文京女子大学外国語学部 6. テーブル 6-1 テーブルとはテーブルとは表のことです ホームページ上で表を作成するには テーブル作成用に用意された数種のタグを使用します なお HTML 文書を書くためのエディタでは 通常 単純な罫線すら引けないことに注意してください 文字の羅列よりも表にまとめた方がわかりやすく レイアウトとしても優れていることは 皆さんもよく経験するところだと思います ですからテーブルは 表形式のデータ表示に有効であるとともに

More information

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む 前回はスタイル指定を行なって段落に色をつけた 今度は罫線で囲んで見よう これまでと同様に 開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである 下線部が罫線を引くためのスタイル指定である

More information

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

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

More information

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

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

More information

ISコースプロジェクト実習 前期(第1回 ガイダンス)

ISコースプロジェクト実習 前期(第1回 ガイダンス) プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘 資料サイト : 熊谷研究室授業資料 (http://ckuma.html.xdomain.jp/class/) 1. 授業を進める上で 授業概要 1 学年の コンピュータリテラシ, 総合工学基礎実験 を踏まえ, 数週間から数ヶ月の中長期にわたり,

More information

6 2 1

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

More information

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;

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

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

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

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の課題 Web デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp

More information

情報C 4月スクーリング プリント

情報C 4月スクーリング プリント 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) 1/6 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) スクーリング日 ( ) 生徒番号 ( ) 氏名 ( ) 学習 目標 1. HTML を使って Web ページを作成できる 2. e-typing 結果の推移をわかりやすく伝えることができる 3. 著作権や肖像権に配慮することができる

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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

凸 凸 デコメールとは 簡易な HTML メール 普通のメール デコメールだと 各キャリアの凸 DoCoMo (i-mode) デコメール au (EZweb) デコレーションメール SoftBank (S! メール ) アレンジメール DoCoMo / デコメール Version 対応機種テンプレート 1.0 900iシリーズ 901iシリーズ らくらくホンIII 2.0 D800iDS 902iシリーズ

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

画像の確認 ブラウザで確認しましょう 写真が表示されました ファイルは引き続き使用します 画像にリンク挿入 画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います 通常のリンクと同じようにアンカータグに href="" や target="" などの属性を指定できます 画像

画像の確認 ブラウザで確認しましょう 写真が表示されました ファイルは引き続き使用します 画像にリンク挿入 画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います 通常のリンクと同じようにアンカータグに href= や target= などの属性を指定できます 画像 LESSON_4 イメージの挿入 1 画像の挿入 2 画像へのリンク設定 3 Flash データの挿入 4 youtube の挿入 学習目標 Lesson4 では画像や動画といったイメージファイルの挿入方法を学習します LESSON 4-1 画像 画像ファイルは単に写真を載せるためのものではなく WEB サイトを魅力的に見せるためののナビゲーションやアイコン その他装飾などに画像を使用することも多く

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

</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

ホームページ制作 基礎編 (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

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) 中村研究室ゼミ Web API / 取り込んで利用する 中村聡史 1 PHP + MySQL どうでした? データを集めるのが大変 データベースを構築するのが大変 データを入力してくのが大変 2 3 API Web API とは? Application Program Interface( 何らかの機能をプログラミングするための仕組み ) メソッド名 + 引数で何らかの動作を実現する! Web API

More information

<48746D6C8AEE91628D758DC02E786C73>

<48746D6C8AEE91628D758DC02E786C73> HTML 基礎講座 目次 1.HTML 紹介 1-1 HTMLとは 1-2 HTMLの基本的な構成 1-3 HTMLのソースの表示方法 2.HTMLタグ紹介 2-1 リンクする 2-2 改行 水平罫線 2-3 段落 2-4 見出し ~, ~ 2-5 画像 2-6 テーブル 2-7 フォーム 2009.10.16

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

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング テーマ研究会 (2011/04/27) ~ Web アプリ プログラミング入門 (2)~ 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp 資料ページ : http://www.cuc.ac.jp/~riho-m/rg11/ 作業 1: 前回分を少し改造 1 行目の place = 那覇 の 那覇 の部分を他の地名に変えてみる 南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile

More information

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

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

More information

Web 設計入門

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

More information

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1-

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1- 触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver. 2.0 2001.08.17 富士ゼロックス株式会社 -1- 1 画像全体に触覚テクスチャをつける 画像全体に触覚テクスチャを貼り付けた HTML ファイルのソースを次に示します 画像全体に触覚テクスチャをつける

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認 受講管理システム AMUSE を使って 本日の出席登録をせよ 学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/

More information

City Information City Information City Information City Information City Information City Information City Information City Information City Information City Information http://www.jmsfmml.or.jp/msm.htm

More information

http://www-6.ibm.com/jp/software/internet/hpb/download.html b /b br / b /b b /b i /i b i /b i i -1/14-

http://www-6.ibm.com/jp/software/internet/hpb/download.html b /b br / b /b b /b i /i b i /b i i -1/14- http://www-6.ibm.com/jp/software/internet/hpb/download.html b /b br / b /b b /b i /i b i /b i i -1/14- .html.htm html head title /title /head body br /body /html html br -2/14- body -3/14- C: Documents

More information

インターネット社会の発展

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

Oracle HTML DBのテンプレート・カスタマイズ

Oracle HTML DBのテンプレート・カスタマイズ Oracle HTML DB 2003 10 Oracle HTML DB... 3... 3... 5... 5 1:... 6 2:... 6 3: 2... 7... 8... 8... 8 CSS JavaScript... 10 HTML DB... 11... 11 Oracle HTML DB 2 Oracle Corporation Customizing Templates in

More information

SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web

More information

データ解析

データ解析 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) HTML 言語によるウェブページの制作 日時 会場 平成 16 年 8 月 4 日 ( 水 )9 時 10 分 ~ 15 時 40 分 奈良産業大学 10 号館 3 階 1032 教室 日程 時間内容場所 9:10 ~ 9:20 日程説明 1033 教室 9:30

More information

観光情報論

観光情報論 2017 年 4 月 18 日 観光情報論 第 2 講 観光情報とは 観光における情報の重要性 観光情報の分類 オンライン旅行会社 予定 Lecture (50 minutes) Hands on practice (40 minutes) 出典 : 現代観光総論 前田勇編著第三版学文社,2006 第七章 Civic Pride シビックプライド 1 2 都市のコミュニケーションをデザインする伊藤香

More information

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

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

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

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

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

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

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

KeyWeb Creator 概要 What s KeyWeb Creator? 動的なホームページを作成するためのツール!! 従来の Web ページ DB を利用した Web ページ <HTML> <HEAD> <TITLE>show_book</TITLE> </HEAD> <BODY> <DI

KeyWeb Creator 概要 What s KeyWeb Creator? 動的なホームページを作成するためのツール!! 従来の Web ページ DB を利用した Web ページ <HTML> <HEAD> <TITLE>show_book</TITLE> </HEAD> <BODY> <DI KeyWeb Creator R3.0 Beta 日本オラクル株式会社システム製品マーケティング部 1 KeyWeb Creator 概要 What s KeyWeb Creator? 動的なホームページを作成するためのツール!! 従来の Web ページ DB を利用した Web ページ show_book

More information

立ち読みページ

立ち読みページ 6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> HTML

More information

untitled

untitled 2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp

More information

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する) 1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ

More information

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

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

More information

コンピュータ中級B ~Javaプログラミング~ 第3回 コンピュータと情報をやりとりするには?

コンピュータ中級B ~Javaプログラミング~  第3回 コンピュータと情報をやりとりするには? Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 コンピュータ 2C ~ マルチメディア ~ 第 2 回 Web ページを作成するには? (HTML の基本 2) 人間科学科コミュニケーション専攻 白銀純子 Copyright (C) Junko Shirogane,

More information

! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

! #$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ

More information

Microsoft PowerPoint _3a-SEO.pptx

Microsoft PowerPoint _3a-SEO.pptx 3.Web の使いやすさ 検索エンジン最適化 Web アクセシビリティ 1 検索エンジンのシェア 2018 年 5 月現在の世界シェア (%) モバイル にはタブレット端末も含む デスクトップ モバイル Google 70.0 81.3 Baidu ( 百度 ) 17.2 12.7 Bing ( マイクロソフト ) 7.6 0.8 Yahoo! 3.6 0.8 その他 1.6 4.4 出典: http://netmarketshare.com/

More information

Web データ管理 HTML+CSS (7) (2 章 ) 2011/11/16( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/15

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

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

訪日外国人旅行者の国内における受入環境整備に関するアンケート 調査の概要 訪日外国人旅行者を対象に 旅行中に困ったこと 受入環境 ( 多言語対応 通信環境 公共交通等 ) へのニーズ 満足度等に係るアンケートを実施した 訪日外国人利用者の多い成田国際空港 東京国際空港 関西国際空港を中心とした空港

訪日外国人旅行者の国内における受入環境整備に関するアンケート 調査の概要 訪日外国人旅行者を対象に 旅行中に困ったこと 受入環境 ( 多言語対応 通信環境 公共交通等 ) へのニーズ 満足度等に係るアンケートを実施した 訪日外国人利用者の多い成田国際空港 東京国際空港 関西国際空港を中心とした空港 訪日外国人旅行者の国内における受入環境整備に関するアンケート 結果 訪日外国人旅行者の国内における受入環境整備に関するアンケート 調査の概要 訪日外国人旅行者を対象に 旅行中に困ったこと 受入環境 ( 多言語対応 通信環境 公共交通等 ) へのニーズ 満足度等に係るアンケートを実施した 訪日外国人利用者の多い成田国際空港 東京国際空港 関西国際空港を中心とした空港 港湾等で回答を収集した 平成 28

More information

Microsoft Word IL3_3.doc

Microsoft Word IL3_3.doc ホームページ作成 (Web ページ作成 ) Microsoft Internet Explorer6.0 WZ EDITOR4.0 Paint Shop Pro 7 2004 年度情報リテラシー Ⅲ 学籍番号氏名あ Web ページ作成 1.Web ページとは HTML(Hyper Text Markup Language) というコンピュータ言語で書かれたものであり ブラウザとよばれるソフトを使って表示することができるが

More information

1. シートの準備 地図の貼りつけ方 1.1 エクセルシートのマス目を 方眼紙 の状態にしておくかんたん電子マップでは エクセルのコメント機能を使って 写真や文字を表示します 地図を貼りつける台紙となるシートの列幅を調整し あらかじめ方眼紙のような細かいマス目にしておけば 地図上の好きなポイントで

1. シートの準備 地図の貼りつけ方 1.1 エクセルシートのマス目を 方眼紙 の状態にしておくかんたん電子マップでは エクセルのコメント機能を使って 写真や文字を表示します 地図を貼りつける台紙となるシートの列幅を調整し あらかじめ方眼紙のような細かいマス目にしておけば 地図上の好きなポイントで はじめに かんたん電子マップの作り方 は 平成 24 25 年度に茅ヶ崎市で実施した 第 3 期里山はっけん隊! ( 主催 : 茅ヶ崎市環境政策課 共催 : 神奈川県公園協会 協力 : 柳谷の自然に学ぶ会 ) のワークショップの成果をまとめた やなぎやとはっけん! マップ と同様の電子マップをを作りたい人のための参考資料です 使用ソフトは Microsoft Office Excel 2007 です

More information

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4. http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

Web情報システム 第1章~第5章

Web情報システム 第1章~第5章 Web 情報システム マルチメディア情報通信ソフトウェア 第 1 章 ~ 第 4 章 1 Web 情報システム マルチメディア情報の流通 Web 情報システム概論 デジタルメディアの特徴 デジタルメディアの記述 HTML (Hyper Text Markup Language) CSS (Cascading style sheet) デジタルメディアの制御 JavaScript コンピュータとネットワークの基礎

More information

Copyright 資格とっ太郎 All Rights Reserved

Copyright 資格とっ太郎  All Rights Reserved WEB サイトの作り方 その 2(HTML 編 ) 製作 : 資格とっ太郎 Copyright 2014 資格とっ太郎 All Rights Reserved - 1 - こんにちは 資格とっ太郎です ここでは HTML の知識について学んでいきたいと思います サイトを作成するのは 基本的にはツールで作ってしまうのですが 最低限の HTML の知識が無いと あれ なんかレイアウトが崩れちゃったぞ なんか思ったより画像が小さく表示されちゃったぞ

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

教材ドットコムオリジナル教材

教材ドットコムオリジナル教材 問題 次の画面写真を参考にソースを組みなさい 画像素材は次のサイトにある http://www.kyouzai.com/kenshu/index.htm トップ 大学 専門学校授業 10 月 31 日画像素材 ファイル名 :index.htm( フレーム定義ファイル ) menu.htm( 左フレーム表示 メニューページ ) top.htm( 右フレーム表示 似顔絵イラスト表示ページ ) touroku.htm(

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

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

soturon2013

soturon2013 4.4. CGI, CGI Web. UNIX, UNIX Windows. UNIX CGI. i ( ). mi- http://www.mimikaki.net/ 67 (mi- ),mi-, http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt,.

More information

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

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

More information

1 Word2007 を立ち上げて 表を作って内容を入力し 体裁を整える 1 時間の関係で あらかじめ下記のような簡単な文書を作成して デスクトップにファイル 旅行案内操作前 1 を置いてありますからこのファイルをダブルクリックして開いて下さい (* 時間のある方は末尾に表の挿入方法などを参考に書い

1 Word2007 を立ち上げて 表を作って内容を入力し 体裁を整える 1 時間の関係で あらかじめ下記のような簡単な文書を作成して デスクトップにファイル 旅行案内操作前 1 を置いてありますからこのファイルをダブルクリックして開いて下さい (* 時間のある方は末尾に表の挿入方法などを参考に書い NPO 法人いきいきネットとくしま 第 97 回定例勉強会 森の日 2012 年 7 月 25 日 担当 : 米田弘子 最近は 手渡しよりもメールで文書をやり取りする機会が多いですね 今回はそんな時代ならでは の便利なツール フォーム で答えやすいアンケートを作りましょう このような案内は解答する 側も集計する側も作業が楽になると思います 作成順序 1Word2007 を開き 表を作って内容を入力し

More information

公営認定に関する県との協議内容(H23

公営認定に関する県との協議内容(H23 平成 28 年度事業計画 基本方針 国は 訪日外国人旅行者 2,000 万人の実現が視野に入り さらに 2020 年のオリンピック パラリンピック東京大会を見据え 今年度は (1) 次の時代 に向けたインバウンド受け入れ環境の整備 観光産業の活性化 (2) 地方創世のための観光地域づくり (3) 戦略的訪日プロモーション MICE 誘致の促進の 3 点を重点施策とする取組方針を掲げている 本市においては

More information

超簡単にWebページを作成

超簡単にWebページを作成 Lesson を始める前に どんなプログラマーもこれを実践しました 超簡単に Web ページを作成 この解説書は Lesson が高レベルになっても参照用として利用して下さい この章の実践方法はまず解説ページ内にある HTML ソースコードをコピーして メモ帳などに貼り付けて 実行して 表示してそのあとで表示内容を解説します 最初は全然理解できない方でも 同じ HTML コードを繰り返し 繰り返 し実践する事で

More information

別紙 町田市観光まちづくり リーディングプロジェクト ( 案 ) 町田市

別紙 町田市観光まちづくり リーディングプロジェクト ( 案 ) 町田市 2017 年 12 月 14 日 行政報告資料 経済観光部産業観光課 観光まちづくりの推進について 2017 年 5 月に策定した 町田市観光まちづくり基本方針 に基づく観光まちづくり関連事業を推進するため 2017 年度から2021 年度に進める先導的な取り組みを 町田市観光まちづくりリーディングプロジェクト として策定するとともに 進捗管理を行うための数値目標を設定することについて報告します 1

More information

.xml.xsl bcs.dtd 2. 提案 BCS.DTD のエレメントと属性 BCS.DTD のエレメントの属性を以下に示す 出 エレメント説明 現 属性 下位構造 数 code 適宜工事コード等を記述する 任 意 Common Docinfo Reference UkeoiKeiyakusyoHikaeSoufusyo KoujiTyakusyuTodoke SongaihokenKeiyakuHoukokusyo

More information

2 / 18 ページ 第 13 講データの活用とデータマップの作成 13-1 ホームページの保存 ホームページ (Web ページ ) に表示される様々な情報を ファイルとして保存することができます

2 / 18 ページ 第 13 講データの活用とデータマップの作成 13-1 ホームページの保存 ホームページ (Web ページ ) に表示される様々な情報を ファイルとして保存することができます 1 / 18 ページ キャリアアップコンピューティング 第 13 講 [ 全 15 講 ] 2017 年度 2 / 18 ページ 第 13 講データの活用とデータマップの作成 13-1 ホームページの保存 ホームページ (Web ページ ) に表示される様々な情報を ファイルとして保存することができます http://www1.doshisha.ac.jp/~digitext/data/east.htm

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

Microsoft Word - FWTEC0003.doc

Microsoft Word - FWTEC0003.doc IBM FormWave for WebSphere 公開技術文書 #FWTEC0003 Windows の更新プログラム (KB912945) におけ る FormWave への影響とその回避方法 最終更新日 :2006/04/03 Copyright International Business Machines Corporation 2006. All rights reserved. FormWave

More information

フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.htm

フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.htm フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.html という構成にします 2の一覧からリンクされたページは3の場所に表示されます 通常 1のタイトルを表示させるページはスクロールさせません

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