2017年6月6日 第9講ブリストル・スタイルシート - university...
TRANSCRIPT
観光情報論2017年6月6日
第9講 ブリストル・スタイルシート
課題：Civic Pride：Bristol
講義：道の駅（国頭・大宜見）
HP: Style Sheet (ＣＳＳ)、期末プロジェクト
グループ作成1
スタイルシート （ＣＳＳ）
• ＣＳＳとは（Cascading Style Sheets）
• 本来、ホームページにデザインを加える機能のすべて
• 「スタイルシート」とはＣＳＳのことを指す
• ＣＳＳを使うと、参考書「できるホームページHTML& CSS入門」 Page 101 にあるようにホームページの体裁が変わる。
2
スタイルシート （ＣＳＳ）「ＣＳＳで書くことを宣言する。」
<!DOCTYPE html>
<html>
<head><meta charset=“Shift_JIS”>
<title>シビックプライドのまとめ（自分の名前） 2017 </title>
<style type="text/CSS">
</style>
</head>
<body>
<h> シビックプライドのまとめ（自分の名前） </h1>
・
3
まずcivicpride.htm
を開く
• スタイルシートは、この２つのタグの間に書いていく。
• 半角英数で書く。
スタイルシート （ＣＳＳ）「背景の色を変えるには」
<!DOCTYPE html><html>
<head><charset=“Shift_JIS”><title>シビックプライドのまとめ（自分の名前） 2017 </title>
<style type="text/CSS">Body■{■ background:■ lightyellow; ■ }h1■ {■ background:■ green;■}</style>
</head>
<body>
■は、スペースという意味
4
インターネットエクスプローラ上で更新ボタンをクリックして、出来上がりを確認してください。
スタイルシート （ＣＳＳ）「文字の色を変えるには」
<!DOCTYPE html><html>
<head><meta “meta charset=“Shift_JIS”><title>シビックプライドのまとめ（自分の名前） 2017 </title><style type="text/CSS">Body■ {■ background:■ lightyellow;■ color:■ black;■ }h1 ■{■ background:■ green;■ color:■ white;■}</style></head>
<body>
■はスペース。
5
また、インターネットエクスプローラ上で更新ボタン をクリックして、出来上がりを確認してください。
スタイルシート （ＣＳＳ）「見出し文字の大きさを変える」
<!DOCTYPE html><html>
<head><meta charset=“Shift_JIS”><title>シビックプライドのまとめ（自分の名前） 2017 </title><style type="text/CSS">body { background: lightyellow; color: black; }h1 { background: green; color: white; ■font-size:■ 1.5em;■ }h2■ { font-size:■ 1.2em; ■}</style></head>
<body>
6
３３
emは今ある文字の～倍
Ｐａｇｅ ２６９（付録６）を参照
スタイルシート （ＣＳＳ）
「行間」
<!DOCTYPE html><html>
<head><meta “meta charset=“Shift_JIS”><title>シビックプライドのまとめ（自分の名前） 2017 </title><style type="text/CSS">body { background: lightyellow; color : black }h1 { background: green; color: white; font-size: 1.5em; }h2 { font-size: 1.2em; }p { ■line-height■: 1.5em;■ }</style></head>
<body>
横の棒線はスペースで。
7
３４
パラグラフ（段落）の中の行の高さを文字の1.5倍分、広げる。
スタイルシート （ＣＳＳ）
「ページの左右に余白を作る」<!DOCTYPE html><html>
<head><meta “meta charset=“Shift_JIS”>
<title>シビックプライドのまとめ（自分の名前） 2017 </title><style type="text/CSS">body { background: lightyellow; color: black;■margin-left:■ 3em;■margin-right:■ 3em;■ }
h1 { background: green; color: white; font-size: 1.5em; }h2 { font-size: 1.2em; }p { line-height: 1.5em; }</style></head>
<body>
横の棒線はスペースで。
8
３５
インターネットエクスプローラ上で更新ボタン をクリックして、出来上がりを確認する。
「一部の文字を強調する」<body>
<h2>④Civic prideの事例「ボルドー」のコミュニケーションの特徴とその感想</h2>
<p>
ドイツ最大の都市ハンブルグ。市街地から港湾地区に向かいその入り口に立つと、かつて倉庫街として栄えたこのエリアの歴史を感じさせる情緒豊かな建物が私たちを迎えてくれる<br>
そこは<em> 「ハーフェンシティ」</em>と呼ばれる新しい都市である。<em> 「ハーフェンシティ」 </em>には通常の都市と違い、建築過程
を市「ハーフェンシティ」民に見せるような仕掛けがいたるところにある、<br>
建築現場は隠すものだとばかり思っていた私にとって、この<em> 「ハーフェンシティ」 </em>にある、インフォセンターや、ビューポイントなどは斬新で大変ユニークな発想だと感じた。<br>
9
１６
スタイルシート （ＣＳＳ）
「強調文字の見た目を変える」<!DOCTYPE html>
<html>
<head>
<meta “meta charset=“Shift_JIS”>
<title>シビックプライドのまとめ（自分の名前） 2017 </title>
<style type="text/CSS">
body { background: lightyellow; color: black; margin-left: 3em; margin-right: 3em; }
h1 { background: green; color: white; font-size: 1.5em; }
h2 { font-size: 1.2em; }
p { line-height: 1.5em; }
em■ {■ font-style: ■ italic; ■ font-weight: ■ bold; ■ color: ■ red;■ }
</style>
</head>
<body>
ドイツ最大の都市ハンブルグ。市街地から港湾地区に向かいその入り口に立つと、かつて倉庫街として栄えたこのエリアの歴史を感じさせる情緒豊かな建物が私たちを迎えてくれる<br>そこは<em> 「ハーフェンシティ」</em>と呼ばれる新しい都市である。 <em> 「ハーフェンシティ」 </em>には通常の都市と違い、建築過程を市「ハーフェンシティ」民に見せるような仕掛けがいたるところにある、<br>
横の棒線はスペースで。
３６
インターネットエクスプローラ上で更新ボタン をクリックして、出来上がりを確認する。
10
スタイルシート （ＣＳＳ）
「リンクの設定された文字の色を変える」<!DOCTYPE html>
<html>
<head>
<meta “meta charset=“Shift_JIS”>
<title>シビックプライドのまとめ（自分の名前） 2017 </title>
<style type="text/CSS">
body { background: lightyellow; color: black; margin-left: 3em; margin-right: 3em; }
h1 { background: green; color: white; font-size: 1.5em; }
h2 { font-size: 1.2em; }
p { line-height: 1.5em; }
em { font-style: normal; font-weight: bold; color: red; }
a:link■ {■ color:■ blue;■ }
a:visited ■{ color: ■ darkgreen; ■}
a:hover ■ { color:■magenta;■ }
</style>
</head>
<body>
横の棒線はスペースで。
３７
インターネットエクスプローラ上で更新ボタン をクリックして、出来上がりを確認する。
11
ホームページの内容
• 住んでいる地域の紹介– 閲覧者を特定して（ターゲットを決めて）観光情報を作成
– 授業で紹介されたフレームワークをもとに、分析する（シビックプライドのコミュニケーションポイント・観光リンケージ・その他）
• 観光情報に関する比較や分類– 沖縄で出版されている観光関係のフリーペーパー– 出版されている観光ガイドブック– 外国人向けの観光情報センター
• その他、観光情報に関係していると思うもの
期末プロジェクト提出の基準1. 最低限必要なファイルと内容① グループの表紙ページ（日・英）にその「１．観光情報のコンセプト （このテー
マを選んだ理由・２．観光情報との関係性・３．研究方法｛資料収集の方法｝４．このホームページのターゲット層」を400字程度で示す。ホームページの
内容はオリジナルで、フィールド調査にもとづいたものであり、観光情報にふさわしいものであること。
② 個人の表紙ページ（日・英）③ リンク先のページ（内容のページ3枚以上）（日・英 計6枚）④ 参考文献のページ （reference） （日・英）⑤ ホームページ作成後の感想 （日・英）⑥ 自己紹介ページ （index.htm） （日・英）⑦ Reference（参考文献）のページを載せる。参考文献はWebだけでなく紙媒体から集める（2つ以上の著書、ガイドブック、無料情報誌。パンフレット等）。
⑧ 観光情報論へのリンクをつける。⑨ 授業で習っていないHTMLを使って工夫する（追加点）
2. 個々のページに必要なリンク「次のページ」に行くリンクボタンと「前のページ」に戻るボタン「Topに戻る」・「自己紹介（課題のページへのリンク含む」・「Reference」に行くボタン
各ベージに「英語のページ」に行くリンク （「英語のページ」には「日本語」へ行くリンク）
観光情報論のページに行くリンク13
課題 ７
1．Bristolについてまとめと感想をｃivicpride.htmに追加し提出。
まとめ（400字程度）
感想（300字程度）。
2．期限：2017年６月１１日（日） 11：59 pm
3．件名：観光情報論＿課題７＿Bristol
4．メール先：[email protected]
5．今までに作成した自己紹介のページ(index.htm)と個人の課題のページ全てを、アップロードできるよう、USBに、保存しておく。6月13日（来週）、アップロードします。 14
期末発表 Schedule （チーム：２～４名）昼間主
発表日 テーマ 表紙ページのFile Name
班長と副班長 その他のメンバー
7月4日 top.htm
7月11日 沖縄と兵庫 top.htm 岩崎太輝餌取純
島袋雄太
基地跡の開発 大城真奈絵比嘉まりん
喜瀬早希子松田侑華
7月18日 中部のグルメスポット top.htm 中山友梨奈大屋達義
吉永尚生
地元の観光情報 山口純平平松仁弥
翁長健太具東朱
7月25日 北部の観光情報 top.htm 崎濱妃一菜神谷日菜
儀間七海
那覇の「○○通り」 外間碧衣田崎キャサリン
金城文佳内間 葵
16
civicpride.htm
onsite_info.htm
ideal_trip.htm
Index.htm
shuri
campaign.htm
workshop.htm
font.htm
urbaninfo.htm
pubspace.html
top.htm
font_status.htm現状
font_problem.htm課題
font_kaorukom.htm自己紹介
font_iken.htm住民の意見
logo.htm
コンセプト分担の例：Civic Prideのコミュニケーション戦略
17
.htm現状
.htm課題
.htm住民の意見
.htm自己紹介
2017/6/6 18
道の駅 地図
http://www.car489.info/information/station/ogm/#page_ttl
機能:
• 休憩
• 情報発信
• 地域の連携
サービス：
• 道路情報
• 物産センター
• 24時間対応
• 案内人
沖縄のTourism Info Center 「道の駅」
沖縄のTourism Info Center（情報のリンケージ）「道の駅」 ゆいゆい国頭
2017/6/6 19
沖縄のTourism Info Center（情報のリンケージ）「道の駅」 大宜味http://www.cc.u-
ryukyu.ac.jp/~e127221/michinoeki/kinzyo/kinzyo.html
2017/6/6 20
2017/6/6 21
沖縄の道の駅
Palau
Physical.htmi
info.htmｌ（田場）
Visual.html（新崎）
story.html（新田）
marketing.html
（新垣）
このページでは
ビジュアル（視覚）のリンケージを紹介します。(400字程度でどのよう
なホームページか説明する）
hyoshi.htm私たちグループのページではパラオ共和国における観光のリンケージについて・・・・・・・・・
（800字程度でこのホー
ムページの目的、コンセプト、ターゲット層、につ
いてまとめる）
status.htm現状
problem.htm課題
index.htm自己紹介
access.htm
Iken.htm住民の意見
hp_oshiro
hp_kinjo
Hp_gima
hp_ku
hp_higa
Onsite_info.htm等授業課題のページ
コンセプト分担の例： 観光リンケージ
A href=hp_arasaki/visual.htm（hp_arasakiというフォルダーの中のvisual.htmへ）
A href=../hyoushi.htm
（現在のフォルダーから出てhyoushi.htmへ）
A href=../../hyoushi.htm（現在のファイルから出て、
再度そのファイルから出てhyoushi.htmへ）
hp_onsite
22
2017/6/6 23
2017/6/6 24
2017/6/6 25
2017/6/6 26
2017/6/6 27
2017/6/6 28
2017/6/6 29
2017/6/6 30
2017/6/6 31
沖縄のTourism Info Center（情報のリンケージ）「道の駅」 大宜味http://www.cc.u-
ryukyu.ac.jp/~e127221/michinoeki/kinzyo/kinzyo.html
2017/6/6 32
2017/6/6 33
2017/6/6 34
2017/6/6 35
2017/6/6 36
2017/6/6 37
2017/6/6 38
2017/6/6 39
2017/6/6 40
2017/6/6 41
2017/6/6 42
2017/6/6 43
期末発表 Schedule （グループ：２～３名）夜間主
発表日 グループテーマ 表紙ページのFile Name
班長と副班長 その他のメンバー
7月5日 1. top.htm
7月12日 2 top.htm
7月19日 3 top.htm
7月26日 4 top.htm
shuri
campaign.htm
workshop.htm
font.htm
urbaninfo.htm
pubspace.html
ここではシビックプライドの都市コミュニケーション戦略の中でもフフォントをとりあげ、首里地区の様々な字体について・・・・・・・・・
(400字程度でコンセプトをまとめる。）
top.htm私たちのページでは首里における都市のマーケティング戦略について
紹介します。・・・・・
（800字程度でこ
のホームページの目的、コンセプト、ターゲット層についてまとめる）
font_status.htm現状
font_problem.htm課題
font_kaorukom.htm自己紹介
font_iken.htm住民の意見
logo.htm
コンセプト分担の例：Civic Prideのコミュニケーション戦略
45
.htm現状
.htm課題
.htm住民の意見
.htm自己紹介