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

(1)

コンピュータ

2C

～マルチメディア～

第

4回

Webページを作成するには?

(スタイルシート2)

人間科学科コミュニケーション専攻

白銀

純子

(2)

第

4回の内容

(3)

(4)

スタイルシートって

?

本来は、ワープロソフトなどで文字の形や大きさ、

文書中で使う色などの見栄えに関する情報を

ひとまとめにしたもの

1度作れば、同じ見栄えの文書を作るたびに

見栄えの設定をしなくてすむ

(5)

CSS

Cascading Style Sheetの略

主に

HTML文書で利用するスタイルシートの規格

HTMLファイル: 文書の構造(見出し, 段落, 表などの

情報)を書くもの

本来の目的

見栄え

(色や文字の形・大きさなど)の情報は?

現在、

_{HTMLの文法上の規則として、見栄えに関するタグを}

排除する方向

(6)

スタイルシートを使うと

...(1)

複数の

Webページで簡単に見栄えを統一可能

もしスタイルシートがなければ

...

1つ1つのHTMLファイルで見栄えの情報を指定

HTMLファイルが多くなると面倒

見栄えを変えたいとき

全ての

HTMLファイルを変更

スタイルシートは

1つ作ればよい

スタイルシートだけ変更すればよい

(7)

スタイルシートの使い方

内部スタイルシート

HTMLファイル中にスタイルシートを記述

外部スタイルシート

HTMLファイルとは

別のファイルに

スタイルシートを記述し、

HTMLファイルにはスタイルシートのファイル名のみを書く

スタイルシートの利点があまり生かせない

<head> ～ </head>の間に書き込む

<link rel="stylesheet" href="

CSSファイル名

" type="text/css" />

※スペースを入れる位置を間違えないこと

(入れ忘れないこと)

(8)

スタイルシートの書き方

(基本)

テキストエディタ

(Jeditなど)で書く

拡張子「

.css」のファイル

拡張子「

.css」をつけるのを忘れないこと

セレクタ

_{

プロパティ: 値;

}

セレクタ

_{: スタイルシートを適用する対象}

例えば、タグ名など

プロパティ

: そのタグの何を設定するか

例えば、文字の色や大きさ、背景色など

値

_{: プロパティに設定するもの}

例えば、文字の色の名前や大きさの数など

※「

_{{」の後の改行や、プロパティの前のスペースはあってもなくてもよい}

※プロパティの後の文字は「

:」(コロン)

(9)

セレクタの書き方

(その1)

タグ名で指定

body { プロパティ: 値; ... }

h1 { プロパティ: 値; ... }

p { プロパティ: 値; ... }

CSSで指定されたタグ全てに適用

(10)

セレクタの書き方

(その1 –例-)

ブラウザでの表示

<h1>

サンプル

_</h1>

<p>

コンピュータの授業

_</p>

HTML文書

h1 {

border: solid 6px #009900;

color: #000099;

}

p {

color: #ffff00;

background-color: #000000;

}

CSSファイル

(11)

セレクタの書き方

(その2)

「タグ名

.分類名」で指定

p.comment { プロパティ: 値; ... }

strong.more { プロパティ: 値; ... }

CSSで指定されたタグのうち、「class」という属性で

「

.」以下の名前が指定されているもののみに適用

class:



タグを分類し、その分類名つけるための属性



1つのHTML文書中で複数のタグに対して同じ名前を

つけてもかまわない



「

_{<タグ名 class="分類名">～</タグ名>」のように使う}

(大文字と小文字が区別される)

(12)

セレクタの書き方

(その2 –例-)

<p>コンピュータの授業</p>

<p

class="comment"

>コンピュータの授業</p>

<p>

<strong>コンピュータの授業</strong>

</p>

<p>

<strong

class="comment"

>コンピュータの授業</strong>

</p>

HTML文書

p.comment {

color: #0000ff;

}

strong.comment {

color: #ff0000;

background-color: #ffcccc;

CSSファイル

ブラウザでの表示

(13)

セレクタの書き方

(その2 –例(1)-)

<p>コンピュータの授業</p>

<p

class="comment"

>コンピュータの授業</p>

<p>

<strong>コンピュータの授業</strong>

</p>

<p>

<strong

class="comment"

>コンピュータの授業</strong>

</p>

HTML文書

p.comment {

color: #0000ff;

}

strong.comment {

color: #ff0000;

background-color: #ffcccc;

CSSファイル

ブラウザでの表示

HTMLファイルとスタイルシートで

一致している必要

_!

(14)

セレクタの名前の注意

1つのCSSファイルの中に、同じ名前のセレクタが

あってはならない

h1 {

background-color: #ff0000;

color: #ffffff;

}

……….

h1 {

border-color: #0000ff;

border-style: solid;

border-width: 5px;

1つのファイルの中に同じ名前の

セレクタは作らないこと

(15)

プロパティと値

1つのセレクタの中に、プロパティと値のセットは

いくつ書いても

OK

h1 {

background-color: #ff0000;

color: #ffffff;

border-color: #0000ff;

border-style: solid;

border-width: 5px;

text-align: center;

}

背景色の設定

文字の色の設定

枠線の色の設定

枠線のスタイルの設定

枠線の太さの設定

中央揃えの設定

(16)

(17)

プロパティ

-枠をつける(1)-

border-color: 枠の色を指定(値は、色の名前)

border-width: 枠の太さを指定

値は、単位を「

px」(ピクセル)または「em」(文字数)と

して数値で指定

border-style: 枠線の形式を指定

値は、「

none

」、「

hidden

」、「

solid

」、「

double

」、

「

groove

」、「

ridge

」、「

inset

」、「

outset

」、「

dashed

」、

「

_dotted

」のどれかを指定

(18)

プロパティ

-枠をつける(2)-

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;

}

<p class="solid">コンピュータ</p>

<p class="dotted">コンピュータ</p>

<p class="double">コンピュータ</p>

CSSファイル

HTMLファイル

(19)

プロパティ

-枠をつける(3)-

「

border--style」、「border--width」、

「

border-***-color」でもっと細かく

枠をつけることも可能

「

***」の部分には、以下のいずれかが入る

「

top

」

: 枠の上側の線の設定

「

bottom

」

: 枠の下側の線の設定

「

left

」

: 枠の左側の線の設定

「

right

」

: 枠の右側の線の設定

(20)

プロパティ

-枠をつける(4)-

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;

<p class="solid">

コンピュータ

</p>

<p class="dashed">

コンピュータ

</p>

<p class="double">

コンピュータ

</p>

CSSファイル

HTMLファイル

(21)

プロパティ

-表示と配置(1)-

float

文章の位置と図や別の文章の位置

_{(回り込み)を調整}

ページ内にメニューを作るときなどに利用

値は以下のどれかを指定

「

_left

」

_{: 図を左側に配置し、文章を図の右側に配置}

「

_right

」

_{:図を右側に配置し、文章を図の左側に配置}

「

none

」

: 図の左右に文章は配置せず、上か下かに配置

clear

floatで設定した回り込みを解除

値は、

_{floatで設定したものを指定}

または、「

both

」で、

leftもrightも解除

(22)

プロパティ

-表示と配置(2)-

div.menu {

float: left;

width: 20%;

}

div.contents {

float: right;

width: 80%;

}

div.footer {

clear: both;

}

<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ファイル

HTMLファイル

(23)

プロパティ

-箇条書き(1)-

list-style-type

箇条書きの項目の印

_{(マーカー)の設定}

値は、以下のどれかを指定

(ただし、これは一部のみ)

「

_none

」

_{: マーカーを表示しない}

「

_disc

」

_{: マーカーを塗りつぶされた丸にする}

「

_square

」

_{: マーカーを四角形にする}

「

upper-roman

」

: マーカーをローマ数字の大文字にする

「

decimal

」

: マーカーを算用数字にする

「

lower-latin

」

, 「

lower-alpha

」

: マーカーをアルファベットの

小文字にする

(24)

プロパティ

-箇条書き(2)-

ul.alpha {

list-style-type: lower-alpha;

}

ul.square {

list-style-type: square;

}

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

CSSファイル

HTMLファイル

(25)

プロパティ

-箇条書き(3)-

list-style-image

箇条書きの項目の印

_{(マーカー)に画像を使う}

値は、「

url("画像ファイル名")

」で指定

ul.image {

list-style-image: url("

item.png

");

}

<ul class="image">

<li>項目1</li>

<li>項目2</li>

<li>項目3</li>

</ul>

CSSファイル

HTMLファイル

(26)

プロパティ

-表(1)-

border-collapse

テーブルのセル

_{(1つ1つのマス)の表示形式を設定}

値は、以下のどれかを指定

「

_collapse

」

_{: セルとセルの境界線を境界上に重ねて表示}

「

_separate

」

_{: セルとセルの境界線を別々に表示}

「

border-width」や「border-style」、

「

_{border-color」も一緒に指定することも可能}

ただし、表の外側の枠のみに適用

1つ1つのセルに適用したい場合は、<th>や<td>の

タグにもそれぞれスタイルシートを適用するように書く

(27)

プロパティ

-表(2)-

.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;

<table class="tbsample1">

<tr><th>コンピュータIIC</th>

<th>コンピュータIIC</th>

</tr>

<tr><td>表のサンプル</td>

<td>表のサンプル</td>

</tr>

</table>

上側

_{: collapse, 下側: separate}

CSSファイル

HTMLファイル

(28)

プロパティ

-表(3)-

.tbsample {

border-collapse: separate;

border-width: 8px;

border-style: dotted;

border-color: red;

}

.cellsample {

border-width: 3px;

border-style: dashed;

<table class="tbsample">

<tr><th class="cellsample">コンピュータIIC</th>

<th class="cellsample">コンピュータIIC</th>

</tr>

<tr><td class="cellsample">表のサンプル</td>

<td class="cellsample">表のサンプル</td>

</tr>

</table>

CSSファイル

HTMLファイル

(29)

スタイルシート・

Webページの書き方

大藤幹著

「HTML & XHTML & CSS辞典」

(株式会社秀和システム)

※その他、「スタイルシート」、「書き方」などのキーワードで

Webページを検索してみよう!

(30)

第

1回課題

HTMLファイルとスタイルシート作成課題

提出先

_{: junko@cis.twcu.ac.jp}

第

1回の授業で連絡した、連絡用のメールアドレスとは

異なるので注意すること

このメールアドレスへの質問は受け付けないので注意すること

(質問は、連絡用メールアドレス: junko@lab.twcu.ac.jp へ)

課題提出・質問とも、大学のメールアドレスから送ること

(大学のアドレスからでなければ受け取らないので注意)

提出期限

: 6月2日(木) 18:00

(31)

(32)

WebサーバとWebクライアント

Webサーバ

: Webページが置かれている(公開

されている

)コンピュータ

それぞれの組織のどこかに置かれているコンピュータ

Webクライアント

: Webページを見るための

コンピュータ

(又は、Webページを見るソフトウェア)

通常、人間が使っているコンピュータ

「この

_{Webページを見せて!」とお願いする}

要求された

_{Webページを見せる}

(33)

URLって?(1)

Webページのありかを示す情報

URLの形式:

プロトコル名

://

Webサーバ

/

Webページの内容

プロトコル名

: WebサーバとWebクライアントで通信する

ときのルールの名前

Webサーバ

: Webページの内容を置いている

コンピュータの住所と名前

Webページの内容

: Webページの内容が書き込まれた

ファイルが、

Webサーバのどこに置かれているか

(34)

URLって?(2)

例

:

_{http://www.twcu.ac.jp/index.html}

http

: HyperText Transfer Protocolの略で、

WebサーバとWebクライアントとのやり取りをするための

規格

(プロトコル)

(35)

URLの構成～ドメイン～

Webサーバ名: コンピュータ名+ドメイン名

ドメイン

_{: インターネット上での住所}

www.twcu.ac.jp

www: 東京女子大学のWebサーバのコンピュータ名

twcu.ac.jp: 東京女子大学のドメイン

twcu: 東京女子大学

ac: 大学

jp: 日本

(36)

ファイルのありか

「

Webサーバ名/」の後は、Webサーバ内での

ファイル

(文書)のありかを示す

http://www.twcu.ac.jp/Fol1/Fol2/page.html



「

Fol1」と「Fol2」はフォルダ名(「Fol1」の中に

「Fol2」が入っているという意味)



「

_{page.html」がWebページのファイル名}

「

www.twcu.ac.jp」という住所(名前)のコンピュータの中を探し、

「

_{Fol1」というフォルダの中の「Fol2」というフォルダの中の}

URLの意味:

ドメイン名より後の部分は、

_{Webサーバの中での}

HTMLファイルのありかとファイル名

(37)

URLの意味

http://www.twcu.ac.jp/index.html

「

http」という方式で

東京女子大学の「

www」というWebサーバと通信し、

「

index.html」ファイルを見せてもらう

http://www.cis.twcu.ac.jp/~junko/MultiMedia/

top.html

「

http」という方式で

東京女子大学の「

www」というWebサーバと通信し、

「

~junko」というフォルダの中の「MultiMedia」という

フォルダの中の「

top.html」ファイルを見せてもらう

(38)

「

index.html」ファイル

「

index.html」というファイル

URLから省略して表記できる

http://www.twcu.ac.jp/index.html

http://www.twcu.ac.jp/

URLの最後がファイル名ではない場合: コンピュータは

自動的に「

index.html」というファイルを探す

「

xxx

_{.html」や「}

xxx

_{.htm」などでない場合}

同じ

URL(同じファイルを探す)

(39)

「

file:」ではじまるURL(1)

アドレスバーに入力したり表示されたりする

URL

「

_{http:」ではじまるもの}

WWWで公開されているWebページのURL(暗号化なし)

「

https:」ではじまるもの

WWWで公開されているWebページのURL(暗号化通信)

「

ftp:」ではじまるもの

ファイルのダウンロード・アップロード専用の

URL

「

_{file:」ではじまるもの}

手元のコンピュータ内のファイルを表示しているときの

URL

アドレスバー

(40)

「

file:」ではじまるURL(2)

「

file:」ではじまるURL

=手元のコンピュータ内のファイルの表示用URL

Webページの作成時に、見栄えの確認のためにHTMLファ

イルを開いたときにアドレスバーに表示される

_URL

「

Webページとして公開されている」という意味ではなし

自分のところでは、

_{Webページとして表示されているように見える}

他の人のところでは、この

_{URLではアクセスできない}

Webページの公開できているかどうかは、「http:」ではじまるURLで

確認すること



アドレスバーの

_{URLが「http:」ではじまっていることを確認すること}



HTMLファイル内に記述するリンクは「file:」ではじまっていない

(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

(42)

(43)

Webページを公開するには?

Webページ(HTMLファイルやスタイルシート・画像など)

を用意する

(44)

Webページを公開する方法

(世界中)

ホームフォルダに「

WWW

」というフォルダを

作成する

「

WWW

」の中に公開するファイル・フォルダを置く

東京女子大学では、これがファイルを

Webサーバに

置くということ

HTMLファイル, スタイルシート, 画像ファイル全て

http://www.cis.twcu.ac.jp/~ログイン名/

URL

大文字

「

~ログイン名/」以下は、「WWW」フォルダから見た

(45)

Webページを公開する方法

(学内のみ)

ホームフォルダに「

WWW-local

」というフォルダを

作成する

「

WWW-local

」の中に公開するファイル・フォルダを

置く

東京女子大学では、これがファイルを

Webサーバに置くと

いうこと

HTMLファイル, スタイルシート, 画像ファイル全て

大文字

小文字

http://www-local.cis.twcu.ac.jp/~ログイン名/

URL

~ログイン名/」以下は、「WWW-local」フォルダから見た

(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」と表す

フォルダとファイルの関係の表し方

(47)

URLの例

「

WWW-local」の中に「abc.html」というファイルがある

場合

「

WWW」の中に「Comp2C」フォルダがあり、

その中に「

abc.html」というファイルがある場合

URL: http://www.cis.twcu.ac.jp/~ログイン名/abc.html

URL: http://www.cis.twcu.ac.jp/~ログイン名/

Comp2C/abc.html

(48)

特別なファイル

「

index.html」というファイルは、特別なファイル

「

_{index.html」というファイルの名前は、URLから}

省略することができる

ファイルの名前を「

_{index.html」にしているだけで、ファイルの作成}

方法などは普通の

_{HTMLファイルと全く同じ}

http://www-local.cis.twcu.ac.jp/~k10xxxxx/index.html

http://www-local.cis.twcu.ac.jp/~k10xxxxx/

http://www-local.cis.twcu.ac.jp/~k10xxxxx/Comp2C/index.html

http://www-local.cis.twcu.ac.jp/~k10xxxxx/Comp2C/

同じ

「

_{index.html」というファイルは、各フォルダのトップページに}

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

コンピュータ

2C

～マルチメディア～

第

4回

Webページを作成するには?

(スタイルシート2)

人間科学科コミュニケーション専攻

白銀

純子

第

4回の内容

スタイルシートって

?

本来は、ワープロソフトなどで文字の形や大きさ、

文書中で使う色などの見栄えに関する情報を

ひとまとめにしたもの

1度作れば、同じ見栄えの文書を作るたびに

見栄えの設定をしなくてすむ

CSS

Cascading Style Sheetの略

主に

HTML文書で利用するスタイルシートの規格

最近の推奨

HTMLファイル: 文書の構造(見出し, 段落, 表などの

情報)を書くもの

本来の目的

見栄え

(色や文字の形・大きさなど)の情報は?

現在、

HTMLの文法上の規則として、見栄えに関するタグを

排除する方向

スタイルシートを使うと

...(1)

複数の

Webページで簡単に見栄えを統一可能

もしスタイルシートがなければ

...

1つ1つのHTMLファイルで見栄えの情報を指定

HTMLファイルが多くなると面倒

見栄えを変えたいとき

全ての

HTMLファイルを変更

スタイルシートは

1つ作ればよい

スタイルシートだけ変更すればよい

スタイルシートの使い方

内部スタイルシート

HTMLファイル中にスタイルシートを記述

外部スタイルシート

HTMLファイルとは

別のファイルに

スタイルシートを記述し、

HTMLファイルにはスタイルシートのファイル名のみを書く

スタイルシートの利点があまり生かせない

<head> ～ </head>の間に書き込む

<link rel="stylesheet" href="

CSSファイル名

" type="text/css" />

※スペースを入れる位置を間違えないこと

(入れ忘れないこと)

スタイルシートの書き方

(基本)

テキストエディタ

(Jeditなど)で書く

拡張子「

.css」のファイル

拡張子「

.css」をつけるのを忘れないこと

セレクタ

{

プロパティ: 値;

}

セレクタ

: スタイルシートを適用する対象

例えば、タグ名など

プロパティ

: そのタグの何を設定するか

例えば、文字の色や大きさ、背景色など

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

_{HTMLの文法上の規則として、見栄えに関するタグを}

_{

_{: スタイルシートを適用する対象}

_{: プロパティに設定するもの}

_{{」の後の改行や、プロパティの前のスペースはあってもなくてもよい}

_</h1>

_</p>

1つのHTML文書中で複数のタグに対して同じ名前を

_{<タグ名 class="分類名">～</タグ名>」のように使う}