スライド 1

Size: px

Start display at page:

Download "スライド 1"

もりよりたもん
9 years ago
Views:

1 第 7 講観光情報論 2008 年 6 月 4 日 Style Sheet (CSS) 宮国薫子 1

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

3 <html> スタイルシート (CSS) CSSで書くことを宣言する <meta http equiv= Content Type content= text/html;cha555rset=shift=jis > <title> 私のお勧め国や地域のホームページ 2008 </title> <h1> 私の選んだ観光の着地情報 </h1> Mytimcss.html という名前を付けて保存する保存したウィンドウズエクスプローラでHTMLファイルを開いて出来上がりを見る 3

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

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

6 スタイルシート (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

7 スタイルシート (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

8 スタイルシート (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

9 スタイルシート (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 用意しており便利です常駐の二人の職員が観光地のアドバイスもしてくれます

10 <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>を選びました

11 <h2> 街のTourism Information Center</h2> <p> スタイルシート (CSS) リンクをつける 20 インターネットエクスプローラ上で更新ボタンをクリックして出来上がりを確認する <img src="nahashitim1.jpg" alt= 那覇市観光案内所 " align="left"> 私は国際通りと交差する美栄橋通りにある<em> 那覇観光案内所 </em>を選びました <br> この案内所では無料の観光情報誌ホテルやレンタカーオプショナルパッケージツアー等 <br> のパンフレットを用意していますまた観光客のためのトイレや車いすベビーカー等のサービスも<br> 用意しており便利です常駐の二人の職員が観光地のアドバイスもしてくれますぜひ訪れてみてください那覇市観光案内書の公式ページへは <a href=" navi.or.jp/naha_tourist_info.html">こちら</a> <br clear="all"> </p>

12 スタイルシート (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;_ } 上でスペースで更新ボタンをクリックして出来上がりを確認する

スライド 1

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