第 8 講観光情報論 2009 年 6 月 16 日 Style Sheet (CSS) 宮国薫子 1
CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて 教科書で言う スタイルシート とは CSS のことを指す CSS を使うと Page 106 にあるようにホームページの体裁が変わる 2
まず Region_page.h tml を開く CSS で書くことを宣言する <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> <h1> 私の選んだ国や地域のホームぺージ </h1> region_css.html という名前を付けて保存する 保存したマイコンコンピュータで HT ML ファイルを開いて 出来上がりを見る 3
<html> 背景の色を変えるには <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 body _{_ background: _ lightyellow; _ } h1 _ {_ background: _ green; _} </title> インターネットエクスプローラ上で更新ボタンをクリックして 出来上がりを確認する 横の棒線はスペースです 4
<html> 文字の色を変えるには <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> body_ {_ background:_ lightyellow; _ color:_ black; _ } h1 _{_ background:_ green;_ color:_ white; _} インターネットエクスプローラ上で更新ボタンをクリックして 出来上がりを確認する 横の棒線はスペースです 5
見出し文字の大きさを変える 33 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> body { background: lightyellow; color: black; } h1 { background: green; color: white; _font size:_ 1.5em;_ } h2_ { font size:_ 1.2em; _} 横の棒線はスペースです 6
行間 34 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> body { background: lightyellow; color: black} h1 { background: green; color: white; font size: 1.5em; } h2 { font size: 1.2em; } p { line height: 1.5em; } 横の棒線はスペースで 7
ページの左右に余白を作る 35 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> 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; } 横の棒線は インターネットエクスプローラスペースで 上で更新ボタンをクリックして 出来上がりを確認する 8
一部の文字を強調する 16 <h2>4civic prideの事例 マンチェスター のコミュニケーションの特徴とその感想 </h2> <p> マンチェスターは爆弾テロをきっかけに都市復興が始まった 復興計画の中心施設として作られたのが 都市生活のミュージアム が <br> 活動コンセプトの <em> URBIS </em> である <em> URBIS </em> では通常のミュージアムと違い 展示だけでなくワークショップ シンポジウム イベント等が行われ <br> カフェの運営 ショップの営業 街や施設のガイドツアーも行われている さらには地方テレビ局のスタジオや新聞社のオフィス等も入っていて <br> ミュージアムは 昔の生活や歴史を知るための資料が展示された場所 だと思っていた私にとって この <em> URBIS </em> のコンセプトや活動内容は斬新であり <br> 大変ユニークな発想だと思った <br> 9
<h2> 1お勧めのホームページ </h2> <p> お勧めのホームページは リンクをつける <a href= http://www.naha navi.or.jp > こちら </a> をクリックしてください <br clear="all"> </p> 20 インターネットエクスプローラ上で更新ボタンをクリックして 出来上がりを確認する
強調文字の見た目を変える 36 <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> 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 size: normal; font weight: bold; color: red; } インターネットエクスプローラ上で更新ボタンをクリックして 出来上がりを確認する <h2>4-1.civic prideの事例 マンチェスター のコミュニケーションの特徴とその感想 </h2> <p> 横の棒線はマンチェスターは爆弾テロをきっかけに都市復興が始まった 復興計画の中心施設としスペースで て作られたのが 都市生活のミュージアム が <br> 活動コンセプトの <em> URBIS </em> である <em> URBIS </em> では通常のミュージアムと違い 展示だけでなくワークショップ シンポジウム イベント等が行われ <br>
リンクの設定された文字の色を変える 37 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め 国や地域のホームページ 2009 </title> 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 size: normal; font weight: bold; color: red; } a:link_ {_ color:_ blue;_ } a:visited _{ color: _darkgreen; _} インターネットエクスプローラ横の棒線は a:hover _{ color:_ magenta;_ } 上で更新ボタンスペースで をクリックし て 出来上がりを確認する
最後にボルドーのコミュニケーション手法と感想について書き 適切なところに <em> </em> を入れてください <h2>5 私の理想のサマーバケーション をご覧になりたい方は <a href="vacation.html"> ココ </a> をクリック </h2> <h2>6 お勧めの国や地域のサイト をご覧になりたい方は <a href="#area"> ココ </a> をクリック </h2> <h2>7 このページの感想を送りたい方は </h2> <a href="mailto:e071653@eve.u ryukyu.ac.jp"> 私へのメール </a> をクリック <h2>8civic pride の事例 ボルドー のコミュニケーションの特徴とその感想 </h2> <p> </p> </body> </html> 13
観光情報論第 8 講 として提出 再来週はテストです 次回までに Bristol の Communication について読んできてください 14