コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?

Size: px

Start display at page:

Download "コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?"

かずただしげまつ
4 years ago
Views:

コンピュータ 2C ~ マルチメディア ~ 第 4 回 Web ページを作成するには?

スタイルシート ( 続き ) 第 4 回の内容 Copyright (C) Junko Shirogane,

Web ページ作りの基礎 ( 復習 ) Copyright (C) Junko Shirogane, Tokyo

5 CSS Cascading Style Sheet の略主に HTML 文書で利用するスタイルシートの規格最近の推奨本来の目的 HTMLファイル : 文書の構造 ( 見出し, 段落, 表などの情報 ) を書くもの現在 HTML の文法上の規則として見栄えに関するタグを排除する方向見栄え ( 色や文字の形大きさなど ) の情報は? スタイルシートに書くべき Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 5

6 スタイルシートを使うと...(1) 複数の Web ページで簡単に見栄えを統一可能もしスタイルシートがなければ... 1 つ 1 つの HTML ファイルで見栄えの情報を指定 HTML ファイルが多くなると面倒見栄えを変えたいときスタイルシートは 1 つ作ればよい全ての HTML ファイルを変更スタイルシートだけ変更すればよい Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 6

7 内部スタイルシートスタイルシートの使い方 HTMLファイル中にスタイルシートを記述スタイルシートの利点があまり生かせない外部スタイルシート HTML ファイルとは別のファイルにスタイルシートを記述し HTML ファイルにはスタイルシートのファイル名のみを書く <head> ~ </head> の間に書き込む <link rel="stylesheet" href="css ファイル名 " type="text/css" /> スペースを入れる位置を間違えないこと ( 入れ忘れないこと ) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 7

8 スタイルシートの書き方 ( 基本 ) テキストエディタ (Jeditなど) で書く拡張子.css のファイル拡張子.css をつけるのを忘れないことセレクタ { プロパティ : 値 ; セレクタ : スタイルシートを適用する対象例えばタグ名などプロパティ : そのタグの何を設定するか例えば文字の色や大きさ背景色など値 : プロパティに設定するもの例えば文字の色の名前や大きさの数など { の後の改行やプロパティの前のスペースはあってもなくてもよいプロパティの後の文字は : ( コロン ) 値の後の文字は ; ( セミコロン ) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 8

10 セレクタの書き方 ( その 1 例 -) HTML 文書 <h1> サンプル </h1> <p> コンピュータの授業 </p> CSSファイル h1 { border: solid 6px #009900; color: #000099; p { color: #ffff00; background-color: #000000; ブラウザでの表示 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 10

11 セレクタの書き方 ( その 2) タグ名. 分類名で指定 p.comment { プロパティ : 値 ;... strong.more { プロパティ : 値 ;... CSS で指定されたタグのうち class という属性で. 以下の名前が指定されているもののみに適用 class: タグを分類しその分類名つけるための属性 1 つの HTML 文書中で複数のタグに対して同じ名前をつけてもかまわない < タグ名 class=" 分類名 ">~</ タグ名 > のように使う ( 大文字と小文字が区別される ) どのタグでも利用できる Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 11

12 セレクタの書き方 ( その 2 例 -) HTML 文書 <p> コンピュータの授業 </p> <p class="comment"> コンピュータの授業 </p> <p> <strong> コンピュータの授業 </strong> </p> <p> <strong class="comment"> コンピュータの授業 </strong> </p> CSSファイル p.comment { color: #0000ff; strong.comment { color: #ff0000; background-color: #ffcccc; ブラウザでの表示 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 12

13 セレクタの書き方 ( その 2 例 (1)-) HTML 文書 <p> コンピュータの授業 </p> <p class="comment"> コンピュータの授業 </p> <p> <strong> コンピュータの授業 </strong> </p> <p> <strong class="comment"> コンピュータの授業 </strong> </p> HTMLファイルとスタイルシートで一致している必要! CSSファイル p.comment { color: #0000ff; strong.comment { color: #ff0000; background-color: #ffcccc; ブラウザでの表示 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 13

14 セレクタの名前の注意 1 つの CSS ファイルの中に同じ名前のセレクタがあってはならない 1 つのファイルの中に同じ名前のセレクタは作らないこと h1 { background-color: #ff0000; color: #ffffff;. h1 { border-color: #0000ff; border-style: solid; border-width: 5px; Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 14

プロパティと値 1 つのセレクタの中にプロパティと値のセットはいくつ書いても OK h1 { background-color: #ff0000; color: #ffffff; border-color: #0000ff; border-style: solid; border-width: 5px;

15 プロパティと値 1 つのセレクタの中にプロパティと値のセットはいくつ書いても OK h1 { background-color: #ff0000; color: #ffffff; border-color: #0000ff; border-style: solid; border-width: 5px; text-align: center; 背景色の設定文字の色の設定枠線の色の設定枠線のスタイルの設定枠線の太さの設定中央揃えの設定 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 15

17 プロパティ - 枠をつける (1)- border-color: 枠の色を指定 ( 値は色の名前 ) border-width: 枠の太さを指定値は単位を px ( ピクセル ) または em ( 文字数 ) として数値で指定 border-style: 枠線の形式を指定値は none hidden solid double groove ridge inset outset dashed dotted のどれかを指定 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 17

プロパティ - 枠をつける (2)- CSS ファイル p.solid { border-style: solid; border-width: 3px; border-color: red; p.dotted { border-style: dotted; border-width: 1em; border-color: green; p.

18 プロパティ - 枠をつける (2)- CSS ファイル p.solid { border-style: solid; border-width: 3px; border-color: red; p.dotted { border-style: dotted; border-width: 1em; border-color: green; p.double { border-style: double; border-width: 5px; border-color: blue; HTML ファイル <p class="solid"> コンピュータ </p> <p class="dotted"> コンピュータ </p> <p class="double"> コンピュータ </p> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 18

19 プロパティ - 枠をつける (3)- border-***-style border-***-width border-***-color でもっと細かく枠をつけることも可能 *** の部分には以下のいずれかが入る top : 枠の上側の線の設定 bottom : 枠の下側の線の設定 left : 枠の左側の線の設定 right : 枠の右側の線の設定 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 19

double { border-top-style: double; border-top-width: 5px; border-top-color: blue; border-bottom-style: dotted; border-bottom-width: 8px;

20 CSS ファイル p.solid { border-left-style: solid; border-left-width: 10px; border-left-color: red; p.dashed { border-bottom-style: dashed; border-bottom-width: 5px; border-bottom-color: green; p.double { border-top-style: double; border-top-width: 5px; border-top-color: blue; border-bottom-style: dotted; border-bottom-width: 8px; border-bottom-color: purple; プロパティ - 枠をつける (4)- HTML ファイル <p class="solid"> コンピュータ </p> <p class="dashed"> コンピュータ </p> <p class="double"> コンピュータ </p> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 20

21 float プロパティ - 表示と配置 (1)- 文章の位置と図や別の文章の位置 ( 回り込み ) を調整ページ内にメニューを作るときなどに利用値は以下のどれかを指定 left : 図を左側に配置し文章を図の右側に配置 right : 図を右側に配置し文章を図の左側に配置 none : 図の左右に文章は配置せず上か下かに配置 clear float で設定した回り込みを解除値は float で設定したものを指定または both で left も right も解除 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 21

HTML ファイルプロパティ - 表示と配置 (2)- <div class="menu"> <h1> メニュー </h1> <ul> <li><a href="intro.

html"> スタイルシートの書き方 <a></li> </ul> </div> <div class="contents"> <h1> はじめに </h1> <p> 本日は HTML

</div> CSS ファイル div.menu { float: left; width: 20%; div.

22 HTML ファイルプロパティ - 表示と配置 (2)- <div class="menu"> <h1> メニュー </h1> <ul> <li><a href="intro.html"> はじめに </a></li> <li><a href="html.html">html の書き方 </a></li> <li><a href="stylesheet.html"> スタイルシートの書き方 <a></li> </ul> </div> <div class="contents"> <h1> はじめに </h1> <p> 本日は HTML の書き方の基本ですタグを使って書きます </p> </div> <div class="footer"> <hr /> <p>copyright information</p> </div> CSS ファイル div.menu { float: left; width: 20%; div.contents { float: right; width: 80%; div.footer { clear: both; Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 22

23 list-style-type プロパティ - 箇条書き (1)- 箇条書きの項目の印 ( マーカー ) の設定値は以下のどれかを指定 ( ただしこれは一部のみ ) none : マーカーを表示しない disc : マーカーを塗りつぶされた丸にする square : マーカーを四角形にする upper-roman : マーカーをローマ数字の大文字にする decimal : マーカーを算用数字にする lower-latin, lower-alpha : マーカーをアルファベットの小文字にする他にもいろいろあるので調べて使ってみよう Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 23

24 プロパティ - 箇条書き (2)- CSS ファイル ul.alpha { list-style-type: lower-alpha; ul.square { list-style-type: square; HTML ファイル <ul class="alpha"> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> <ul class="square"> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 24

list-style-image プロパティ - 箇条書き (3)- 箇条書きの項目の印 ( マーカー

<li> 項目 2</li> <li> 項目 3</li> </ul> Copyright (C)

25 list-style-image プロパティ - 箇条書き (3)- 箇条書きの項目の印 ( マーカー ) に画像を使う値は url(" 画像ファイル名 ") で指定 CSS ファイル ul.image { list-style-image: url("item.png"); HTML ファイル <ul class="image"> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 25

26 border-collapse プロパティ - 表 (1)- テーブルのセル (1 つ 1 つのマス ) の表示形式を設定値は以下のどれかを指定 collapse : セルとセルの境界線を境界上に重ねて表示 separate : セルとセルの境界線を別々に表示 border-width や border-style border-color も一緒に指定することも可能ただし表の外側の枠のみに適用 1 つ 1 つのセルに適用したい場合は <th> や <td> のタグにもそれぞれスタイルシートを適用するように書く Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 26

solid; border-color: black; td { border-width: 3px; border-style: solid; border-color: black; プロパティ - 表 (2)- HTML ファイル <table

27 CSS ファイル.tbsample1 { border-collapse: collapse; border-width: 3px; border-style: solid; border-color: black; th { border-width: 3px; border-style: solid; border-color: black; td { border-width: 3px; border-style: solid; border-color: black; プロパティ - 表 (2)- HTML ファイル <table class="tbsample1"> <tr><th> コンピュータ IIC</th> <th> コンピュータ IIC</th> <th> コンピュータ IIC</th> </tr> <tr><td> 表のサンプル </td> <td> 表のサンプル </td> <td> 表のサンプル </td> </tr> </table> 上側 : collapse, 下側 : separate Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 27

28 プロパティ - 表 (3)- CSS ファイル.tbsample { border-collapse: separate; border-width: 8px; border-style: dotted; border-color: red;.cellsample { border-width: 3px; border-style: dashed; border-color: blue; HTML ファイル <table class="tbsample"> <tr><th class="cellsample"> コンピュータ IIC</th> <th class="cellsample"> コンピュータ IIC</th> <th class="cellsample"> コンピュータ IIC</th> </tr> <tr><td class="cellsample"> 表のサンプル </td> <td class="cellsample"> 表のサンプル </td> <td class="cellsample"> 表のサンプル </td> </tr> </table> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 28

スタイルシート Web ページの書き方大藤幹著 HTML & XHTML & CSS 辞典 (

30 第 1 回課題 HTML ファイルとスタイルシート作成課題提出先 : junko@cis.twcu.ac.jp 第 1 回の授業で連絡した連絡用のメールアドレスとは異なるので注意することこのメールアドレスへの質問は受け付けないので注意すること ( 質問は連絡用メールアドレス : junko@lab.twcu.ac.jp へ ) 課題提出質問とも大学のメールアドレスから送ること ( 大学のアドレスからでなければ受け取らないので注意 ) 提出期限 : 6 月 2 日 ( 木 ) 18:00 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 30

Web ページの公開 ~URL~ Copyright (C) Junko Shirogane, Tokyo

32 Web サーバと Web クライアント Web サーバ : Web ページが置かれている ( 公開されている ) コンピュータそれぞれの組織のどこかに置かれているコンピュータ Web クライアント : Web ページを見るためのコンピュータ ( 又は Web ページを見るソフトウェア ) 通常人間が使っているコンピュータこの Web ページを見せて! とお願いする要求された Web ページを見せる Web クライアント Web サーバ Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 32

33 URL って?(1) Web ページのありかを示す情報 URL の形式 : プロトコル名 ://Web サーバ /Web ページの内容プロトコル名 : Web サーバと Web クライアントで通信するときのルールの名前 Web サーバ : Web ページの内容を置いているコンピュータの住所と名前 Web ページの内容 : Web ページの内容が書き込まれたファイルが Web サーバのどこに置かれているか Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 33

34 URL って?(2) 例 : http: HyperText Transfer Protocol の略で Web サーバと Web クライアントとのやり取りをするための規格 ( プロトコル ) Web サーバ名 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 34

35 URL の構成 ~ ドメイン ~ Web サーバ名 : コンピュータ名 + ドメイン名ドメイン : インターネット上での住所 www: 東京女子大学のWebサーバのコンピュータ名 twcu.ac.jp: 東京女子大学のドメイン twcu: 東京女子大学 ac: 大学 jp: 日本 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 35

ファイルのありか Web サーバ名 / の後は Web サーバ内でのファイル ( 文書 ) のありかを示す http://www.twcu.ac.jp/fol1/fol2/page.html ドメイン名より後の部分は Web サーバの中での HTML ファイルのありかとファイル名 Fol1 と Fol2 はフォルダ名 ( Fol1 の中に Fol2 が入っているという意味 ) page.

36 ファイルのありか Web サーバ名 / の後は Web サーバ内でのファイル ( 文書 ) のありかを示すドメイン名より後の部分は Web サーバの中での HTML ファイルのありかとファイル名 Fol1 と Fol2 はフォルダ名 ( Fol1 の中に Fol2 が入っているという意味 ) page.html が Web ページのファイル名 URLの意味 : という住所( 名前 ) のコンピュータの中を探し Fol1 というフォルダの中の Fol2 というフォルダの中の page.html というファイルを見せてもらうという意味 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 36

URL の意味 http://www.twcu.ac.jp/index.html http という方式で東京女子大学の www という Web サーバと通信し index.html ファイルを見せてもらう http://www.cis.twcu.ac.jp/~junko/multimedia/ top.

37 URL の意味 http という方式で東京女子大学の www という Web サーバと通信し index.html ファイルを見せてもらう top.html http という方式で東京女子大学の www という Web サーバと通信し ~junko というフォルダの中の MultiMedia というフォルダの中の top.html ファイルを見せてもらう Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 37

index.html ファイル index.html というファイル URL から省略して表記できる http://www.twcu.ac.jp/index.html http://www.twcu.ac.jp/ URL の最後がファイル名ではない場合 : コンピュータは自動的に index.

38 index.html ファイル index.html というファイル URL から省略して表記できる URL の最後がファイル名ではない場合 : コンピュータは自動的に index.html というファイルを探す xxx.html や xxx.htm などでない場合同じ URL( 同じファイルを探す ) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 38

file: ではじまる URL(1) アドレスバーに入力したり表示されたりする URL http: ではじまるもの WWW で公開されている Web ページの URL( 暗号化なし ) https: ではじまるもの WWW で公開されている Web ページの URL( 暗号化通信 ) ftp: ではじまるもの

39 file: ではじまる URL(1) アドレスバーに入力したり表示されたりする URL http: ではじまるもの WWW で公開されている Web ページの URL( 暗号化なし ) https: ではじまるもの WWW で公開されている Web ページの URL( 暗号化通信 ) ftp: ではじまるものファイルのダウンロードアップロード専用の URL file: ではじまるもの手元のコンピュータ内のファイルを表示しているときのURL アドレスバー Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 39

40 file: ではじまる URL(2) file: ではじまる URL = 手元のコンピュータ内のファイルの表示用 URL Web ページの作成時に見栄えの確認のために HTML ファイルを開いたときにアドレスバーに表示される URL Web ページとして公開されているという意味ではなし自分のところでは Web ページとして表示されているように見える他の人のところではこの URL ではアクセスできない Web ページの公開できているかどうかは http: ではじまる URL で確認することアドレスバーの URL が http: ではじまっていることを確認すること HTML ファイル内に記述するリンクは file: ではじまっていないものにすること Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 40

どういう URL になるか考えてみよう! ログイン名 k10x1001 の東京子さんの Web ページホームフォルダの中の WWW-local フォルダの中の comp.html ファイルの URL ホームフォルダの中の WWW-local フォルダの中の MyPage フォルダの中の top.

41 どういう URL になるか考えてみよう! ログイン名 k10x1001 の東京子さんの Web ページホームフォルダの中の WWW-local フォルダの中の comp.html ファイルの URL ホームフォルダの中の WWW-local フォルダの中の MyPage フォルダの中の top.html ファイルの URL ホームフォルダの中の WWW-local フォルダの中の Jugyou フォルダの中の index.html ファイルの URL ホームフォルダの中の WWW-local フォルダの中の friends フォルダの中の links フォルダの中の linklist.html ファイルの URL Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 41

44 Web ページを公開する方法 ( 世界中 ) ホームフォルダに WWW というフォルダを作成する大文字 WWW の中に公開するファイルフォルダを置く URL 東京女子大学ではこれがファイルを Web サーバに置くということ HTML ファイル, スタイルシート, 画像ファイル全てログイン名 / ~ ログイン名 / 以下は WWW フォルダから見た HTML ファイルの位置 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 44

45 Web ページを公開する方法 ( 学内のみ ) ホームフォルダに WWW-local というフォルダを作成する大文字小文字 WWW-local の中に公開するファイルフォルダを置く東京女子大学ではこれがファイルを Web サーバに置くということ HTML ファイル, スタイルシート, 画像ファイル全て URL ログイン名 / ~ ログイン名 / 以下は WWW-local フォルダから見た HTML ファイルの位置 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 45

46 HTML ファイルの位置フォルダとフォルダ, フォルダとファイルの間 : / で区切る WWW-local abc.html Test というフォルダ sample.html abc.html の位置 : abc.html sample.html の位置 : Test/sample.html フォルダとファイルの関係の表し方フォルダ A の中にファイル f があるという関係を A/f と表す ( / で ~フォルダの中にという意味 ) フォルダ A の中にフォルダ B があるという関係も A/B と表す Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 46

47 URL の例 WWW-local の中に abc.html というファイルがある場合 URL: ログイン名 /abc.html WWW の中に Comp2C フォルダがありその中に abc.html というファイルがある場合 URL: ログイン名 / Comp2C/abc.html Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 47

特別なファイル index.html というファイルは特別なファイル index.html というファイルの名前は URL から省略することができるファイルの名前を index.html にしているだけでファイルの作成方法などは普通の HTML ファイルと全く同じ index.html というファイルは各フォルダのトップページに同じ同じ http://www-local.cis.

48 特別なファイル index.html というファイルは特別なファイル index.html というファイルの名前は URL から省略することができるファイルの名前を index.html にしているだけでファイルの作成方法などは普通の HTML ファイルと全く同じ index.html というファイルは各フォルダのトップページに同じ同じ Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 48

やってみよう! これまで作成してきた Web ページを http://www-local.cis.twcu.ac.jp/~ ログイン名 /Comp2C/ で公開してみよう! フォルダはどうすればいいか? ファイル名はどうすればいいか? ファイルはどこに置けばいいか?

49 やってみよう! これまで作成してきた Web ページをログイン名 /Comp2C/ で公開してみよう! フォルダはどうすればいいか? ファイル名はどうすればいいか? ファイルはどこに置けばいいか? を自分でよく考えて作業してみよう ( 作業したら Safari で見てみよう ) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 49

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには? Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 コンピュータ 2C ~ マルチメディア ~ 第 3 回 Web ページを作成するには? ( スタイルシート ) 人間科学科コミュニケーション専攻白銀純子 Copyright (C) Junko Shirogane,

コンピュータ中級B ～Javaプログラミング～ 第3回 コンピュータと情報をやりとりするには?

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?