第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1
スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの 体 裁 が 変 わる 2
<html> スタイルシート (CSS) CSSで 書 くことを 宣 言 する <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 </title> <h1> 私 の 選 んだ 観 光 の 着 地 情 報 </h1> Mytimcss.html という 名 前 を 付 けて 保 存 する 保 存 し たウィンドウズエクスプロー ラでHTMLファイルを 開 い て 出 来 上 がりを 見 る 3
<html> スタイルシート (CSS) 背 景 の 色 を 変 えるには <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 body _{_ background: _ lightyellow; _ } h1 _ {_ background: _ green; _} </title> インターネットエクスプ ローラ 上 で 更 新 ボタン をクリックして 出 来 上 が りを 確 認 する スペースです 4
<html> スタイルシート (CSS) 文 字 の 色 を 変 えるには <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 </title> body_ {_ background:_ lightyellow; _ color:_ black; _ } h1 _{_ background:_ green;_ color:_ white; _} インターネットエクスプローラ 上 で 更 新 ボタン をクリックし て 出 来 上 がりを 確 認 する スペースです 5
スタイルシート (CSS) 見 出 し 文 字 の 大 きさを 変 える 33 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 </title> body { background: lightyellow; color: black; } h1 { background: green; color: white; _font size:_ 1.5em;_ } h2_ { font size:_ 1.2em; _} スペースです 6
スタイルシート (CSS) 行 間 34 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 </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
スタイルシート (CSS) ページの 左 右 に 余 白 を 作 る 35 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 </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
スタイルシート (CSS) 一 部 の 文 字 を 強 調 する 16 <h1> 私 の 選 んだ 観 光 の 着 地 情 報 </h1> <h2> 私 の 紹 介 </h2> <p> <img src="miyakuni.jpg" align="left"> 2007 年 10 月 から 琉 球 大 学 に 赴 任 しました 宮 国 薫 子 です 担 当 している 授 業 は 観 光 情 報 論 情 報 科 学 演 習 経 営 学 演 習 1です 趣 味 は 旅 行 ピアノ 水 泳 などです <br clear="all"> </p> <h2> 街 のTourism Information Center</h2> <p> <img src="nahashitim1.jpg" alt= 那 覇 市 観 光 案 内 所 " align="left"> 私 は 国 際 通 りと 交 差 する 美 栄 橋 通 りにある<em> 那 覇 観 光 案 内 所 </em>を 選 びました <br> この 案 内 所 では 無 料 の 観 光 情 報 誌 ホテルやレンタカー オプショナルパッケージツアー 等 <br> のパンフレットを 用 意 しています また 観 光 客 のためのトイレや 車 いす ベビーカー 等 の サービスも<br> 9 用 意 しており 便 利 です 常 駐 の 二 人 の 職 員 が 観 光 地 のアドバイスもしてくれます
<h2> 街 のTourism Information Center</h2> <p> スタイルシート (CSS) 強 調 文 字 の 見 た 目 を 変 える 36 <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 のお 勧 め 国 や 地 域 のホームページ 2008 </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; } インターネットエクスプローラ 上 で 更 新 ボタン をクリックし て 出 来 上 がりを 確 認 する <h1> 私 の 選 んだ 観 光 の 着 地 情 報 </h1> <h2> 私 の 紹 介 </h2>... スペースで <img src="nahashitim1.jpg" alt= 那 覇 市 観 光 案 内 所 " align="left"> 私 は 国 際 通 りと 交 差 する 美 栄 橋 通 りにある<em> 那 覇 観 光 案 内 所 </em>を 選 びました
<h2> 街 のTourism Information Center</h2> <p> スタイルシート (CSS) リンクをつける 20 インターネットエクスプローラ 上 で 更 新 ボタン をクリックし て 出 来 上 がりを 確 認 する <img src="nahashitim1.jpg" alt= 那 覇 市 観 光 案 内 所 " align="left"> 私 は 国 際 通 りと 交 差 する 美 栄 橋 通 りにある<em> 那 覇 観 光 案 内 所 </em>を 選 びました <br> この 案 内 所 では 無 料 の 観 光 情 報 誌 ホテルやレンタカー オプショナルパッケージツアー 等 <br> のパンフレットを 用 意 しています また 観 光 客 のためのトイレや 車 いす ベビーカー 等 のサー ビスも<br> 用 意 しており 便 利 です 常 駐 の 二 人 の 職 員 が 観 光 地 のアドバイスもしてくれます ぜひ 訪 れてみてください 那 覇 市 観 光 案 内 書 の 公 式 ページへは <a href="http://www.naha navi.or.jp/naha_tourist_info.html">こちら</a> <br clear="all"> </p>
スタイルシート (CSS) リンクの 設 定 された 文 字 の 色 を 変 える 37 <html> <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私 の 選 んだ 観 光 の 着 地 情 報 2008 </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;_ } 上 で スペースで 更 新 ボタン をクリックし て 出 来 上 がりを 確 認 する