スライド 1

Size: px

Start display at page:

Download "スライド 1"

たかよしののした
5 years ago
Views:

1 第 8 講観光情報論 2009 年 6 月 16 日 Style Sheet (CSS) 宮国薫子 1

2 CSS とは (Cascading Style Sheets) 本来ホームページにデザインを加える機能のすべて教科書で言うスタイルシートとは CSS のことを指す CSS を使うと Page 106 にあるようにホームページの体裁が変わる 2

3 まず 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

4 <html> 背景の色を変えるには <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め国や地域のホームページ 2009 body _{_ background: _ lightyellow; _ } h1 _ {_ background: _ green; _} </title> インターネットエクスプローラ上で更新ボタンをクリックして出来上がりを確認する横の棒線はスペースです 4

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

6 見出し文字の大きさを変える 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

7 行間 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

8 ページの左右に余白を作る 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

9 一部の文字を強調する 16 <h2>4civic prideの事例マンチェスターのコミュニケーションの特徴とその感想 </h2> <p> マンチェスターは爆弾テロをきっかけに都市復興が始まった復興計画の中心施設として作られたのが都市生活のミュージアムが <br> 活動コンセプトの <em> URBIS </em> である <em> URBIS </em> では通常のミュージアムと違い展示だけでなくワークショップシンポジウムイベント等が行われ <br> カフェの運営ショップの営業街や施設のガイドツアーも行われているさらには地方テレビ局のスタジオや新聞社のオフィス等も入っていて <br> ミュージアムは昔の生活や歴史を知るための資料が展示された場所だと思っていた私にとってこの <em> URBIS </em> のコンセプトや活動内容は斬新であり <br> 大変ユニークな発想だと思った <br> 9

10 <h2> 1お勧めのホームページ </h2> <p> お勧めのホームページはリンクをつける <a href= navi.or.jp > こちら </a> をクリックしてください <br clear="all"> </p> 20 インターネットエクスプローラ上で更新ボタンをクリックして出来上がりを確認する

11 強調文字の見た目を変える 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>

12 リンクの設定された文字の色を変える 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;_ } 上で更新ボタンスペースでをクリックして出来上がりを確認する

html"> ココ </a> をクリック </h2> <h2>6 お勧めの国や地域のサイトをご覧になりたい方は <a href="#area"> ココ </a> をクリック

13 最後にボルドーのコミュニケーション手法と感想について書き適切なところに <em> </em> を入れてください <h2>5 私の理想のサマーバケーションをご覧になりたい方は <a href="vacation.html"> ココ </a> をクリック </h2> <h2>6 お勧めの国や地域のサイトをご覧になりたい方は <a href="#area"> ココ </a> をクリック </h2> <h2>7 このページの感想を送りたい方は </h2> <a ryukyu.ac.jp"> 私へのメール </a> をクリック <h2>8civic pride の事例ボルドーのコミュニケーションの特徴とその感想 </h2> <p> </p> </body> </html> 13

14 観光情報論第 8 講として提出再来週はテストです次回までに Bristol の Communication について読んできてください 14

観光情報論第６講　（着地情報）トラベルキオスク＆画像を入れる

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