コンピュータ2C
～マルチメディア～
第3回
Webページを作成するには?
(スタイルシート)
人間科学科コミュニケーション専攻
白銀 純子
第3回の内容
Webページ作りの基礎(復習)
ブロック要素(1)
内容的なまとまりを表すタグ
HTML文書の構造を決定するタグ
見出し, 段落, 箇条書き, 表, etc.
この種類のタグは、前後に改行が挿入
1つ1つが
ブロック要素
インライン要素(1)
ブロック要素の中に書き、ブロック要素の内容を装飾
したり、追加的な意味を与えるためのタグ
強調, 改行, リンク, etc.
この種類のタグは、前後に改行はなし
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 5
インライン要素(強調)
インライン要素(2)
インライン要素のタグの中には、別のインライン要素
または文字しか入れてはならない
ブロック要素を入れてはならない
ブロック要素の中であれば、どのブロック要素に
入れても良い
図や絵を入れるには?
HTMLファイルとは別のファイルに、図や絵のファイルを
用意する
HTMLファイルの中に、「<img />」というタグを使って
図や絵のファイルの名前を書き込む
図や絵を入れるには?(タグ)
図や絵を入れるタグ
タグ名: <img />
文章を囲む必要のないタグ
引数その1: src
値その1: 貼り付ける画像のファイル名
引数その2: alt
値その2: 画像ファイルの内容の説明
何らかの事情で画像が表示されなかったときなどに代わりに表示
される言葉
<img src="
xxxx
"
alt="
yyyy
" />
図や絵を入れるには?(例)
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 9
<img src=“images/twcu.png” alt=“ロゴマーク" />
図を描くには?(1)
(今回は)OmniGraffleを利用
Finder→「
アプリケーション
」→「
OmniGraffle
」を
ダブルクリック
図を描くには?(2)
描画
ツールバーの各ボタンを押し、表示されるメニューから
描きたい図形を選択
キャンバスでマウスをドラッグ&ドロップで描画
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 11
図を描くには?(3)
色の設定
ツールバーの「選択ツール」を選択し、描いた図形を選択
図形の線の色の設定は、「スタイル」ウィンドウの「ラインと
図形」ボタンを押して設定
図形の塗りつぶしは、「スタイル」ウィンドウの「フィル」ボタン
ラインと図形
線の色の設定
フィル
塗りつぶしの
色の設定
図を描くには?(4)
図をファイルに保存
メニューバーの「
ファイル
」→「
書き出し
」をクリックし、
拡張子として「
.png
」をつけてファイル名を入力
ファイル名は必ず
半角英数で、スペースを入れずにつけること
「ファイル形式」の欄が「
PNG形式
」になっていることを確認
「場所」の欄で、
HTMLファイルと同じフォルダを選択
スタイルシートって?
本来は、ワープロソフトなどで文字の形や大きさ、
文書中で使う色などの見栄えに関する情報を
ひとまとめにしたもの
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 15
1度作れば、同じ見栄えの文書を作るたびに
見栄えの設定をしなくてすむ
CSS
Cascading Style Sheetの略
主にHTML文書で利用するスタイルシートの規格
最近の推奨
HTMLファイル: 文書の構造(見出し, 段落, 表などの
情報)を書くもの
本来の目的
見栄え(色や文字の形・大きさなど)の情報は?
スタイルシートに書くべき
現在、HTMLの文法上の規則として、見栄えに関するタグを
排除する方向
スタイルシートを使うと...(1)
複数のWebページで簡単に見栄えを統一可能
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 17
もしスタイルシートがなければ...
1つ1つのHTMLファイルで見栄えの情報を指定
HTMLファイルが多くなると面倒
見栄えを変えたいとき
全てのHTMLファイルを変更
スタイルシートは1つ作ればよい
スタイルシートだけ変更すればよい
スタイルシートを使うと...(2)
スタイルシートでしかない細かいデザインが可能
様々な種類のコンピュータにも対応可能
小さな画面や性能の低いコンピュータ
正しい文法でタグを書いておくと、それなりにWebページが
表示される
文法を守っていないと、きちんと表示されないことも
視覚などの障害を持つ人が利用するコンピュータ
正しい文法でタグを書いておくと、画面の情報を伝える補助
ツールは、きちんと情報を伝えてくれる
文法を守っていないと、補助ツールがきちんと情報を伝えられず、
Webページを使う人が混乱することも
スタイルシートの使い方
内部スタイルシート
HTMLファイル中にスタイルシートを記述
外部スタイルシート
HTMLファイルとは
別のファイルに
スタイルシートを記述し、
HTMLファイルにはスタイルシートのファイル名のみを書く
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 19
スタイルシートの利点があまり生かせない
<head> ～ </head>の間に書き込む
<link rel="stylesheet" href="CSSファイル名" type="text/css" />
※スペースを入れる位置を間違えないこと
スタイルシートの書き方(基本)
テキストエディタ(Jeditなど)で書く
拡張子「.css」のファイル
拡張子「.css」をつけるのを忘れないこと
セレクタ {
プロパティ: 値;
}
セレクタ: スタイルシートを適用する対象
例えば、タグ名など
プロパティ: そのタグの何を設定するか
例えば、文字の色や大きさ、背景色など
値: プロパティに設定するもの
例えば、文字の色の名前や大きさの数など
※「{」の後の改行や、プロパティの前のスペースはあってもなくてもよい
※プロパティの後の文字は「:」(コロン)
値の後の文字は「;」(セミコロン)
セレクタの書き方(その1)
タグ名で指定
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 21
body { プロパティ: 値; ... }
h1 { プロパティ: 値; ... }
p { プロパティ: 値; ... }
セレクタの書き方(その1 –例-)
ブラウザでの表示
<h1>
サンプル
</h1>
<p>
コンピュータの授業
</p>
HTML文書
h1 {
border: solid 6px #009900;
color: #000099;
}
p {
color: #ffff00;
background-color: #000000;
}
CSSファイル
セレクタの書き方(その2)
「タグ名.分類名」で指定
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 23
p.comment { プロパティ: 値; ... }
strong.more { プロパティ: 値; ... }
CSSで指定されたタグのうち、「class」という属性で
「.」以下の名前が指定されているもののみに適用
class:
タグを分類し、その分類名つけるための属性
1つのHTML文書中で複数のタグに対して 同じ名前を
つけてもかまわない
「<タグ名 class="分類名">～</タグ名>」のように使う
(大文字と小文字が区別される)
どのタグでも利用できる
セレクタの書き方(その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ファイル
ブラウザでの表示
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 25
セレクタの書き方(その2 –例(1)-)
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2010, All rights reserved. 25
<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ファイルとスタイルシートで
一致している必要!
セレクタの書き方(その3 –例-)
「タグ名.分類名」の「タグ名」は省略可能
→省略した場合は、任意のタグで
「class="分類名"」をつけることで、利用可能
<p
class="color1"
>サンプル</p>
<p>コンピュータの授業
<strong
class="color1"
>～スタイルシート～</strong>
</p>
HTML文書
.color1 {
color: #ff0000;
}
CSSファイル
ブラウザでの表示
セレクタの名前の注意
1つのCSSファイルの中に、同じ名前のセレクタが
あってはならない
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 27
h1 {
background-color: #ff0000;
color: #ffffff;
}
……….
h1 {
border-color: #0000ff;
border-style: solid;
border-width: 5px;
}
1つのファイルの中に同じ名前の
セレクタは作らないこと
プロパティと値
1つのセレクタの中に、プロパティと値のセットは
いくつ書いてもOK
h1 {
background-color: #ff0000;
color: #ffffff;
border-color: #0000ff;
border-style: solid;
border-width: 5px;
text-align: center;
}
背景色の設定
文字の色の設定
枠線の色の設定
枠線のスタイルの設定
枠線の太さの設定
中央揃えの設定
やってみよう!(手順1)
スタイルシートのファイルを作る(Jeditで作る)
拡張子「
.css
」
ファイルの名前は
半角英数でつけること
ファイルの名前に
スペースを入れないこと
HTMLファイルと同じ場所に保存
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 29
Jeditの内容は何もなくて良いので、そのまま保存
やってみよう!(手順2)
HTMLファイルの中で
を書く(スペースの場所に注意)
「CSSファイル名」の部分は、
スタイルシートのファイル名を
拡張子つきで
書く
<head> ～ </head>に、
プロパティ -色と背景(1)-
color
文字の色
値として色の名前を指定
background-color
文字の背景色
値として色の名前を指定
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 31
body {
color: black;
background-color: skyblue;
}
h1 {
color: white;
background-color: navy;
}
p {
color: yellow;
background-color: black;
}
<h1>サンプル</h1>
<p>コンピュータの授業</p>
CSSファイル
HTMLファイル
プロパティ -色と背景(2)-
background-image
タグの背景画像
値として「
url("
画像のファイル名
")
」を指定
background-repeat
タグの背景画像を繰り返して並べるか並べないか
値として以下のいずれかを指定する
repeat: 縦横に並べる
repeat-x: 横方向のみ並べる
repeat-y: 縦方向のみ並べる
no-repeat: 並べない
プロパティ -色と背景(3)-
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 33
body {
background-image: url("
image.png
");
background-repeat: repeat;
}
<h1>サンプル</h1>
<p>コンピュータの授業</p>
CSSファイル
HTMLファイル
プロパティ -リンク-
a:link {
color: orange;
}
a:active {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: white;
background-color: red;
}
a:link:
まだ訪れたことのないページへの
リンクに対する設定
a:active:
リンク上でマウスボタンを
押したときの設定
a:visited:
過去に訪れたことのある
ページへのリンクに対する設定
a:hover:
リンク上にマウスカーソルを
置いたときの設定
セレクタの意味
※「color」以外に「background-color」
なども設定可能
プロパティ -文字の形・大きさ(1)-
font-size
文字の大きさを指定
値として、通常の大きさからどれだけ大きいか/
小さいかを「%」で書く(通常の大きさは100%)
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 35
p.small{
font-size: 80%;
}
p.middle {
font-size: 100%;
}
p.large {
font-size: 150%;
}
<p class="small">コンピュータ</p>
<p class="middle">コンピュータ</p>
<p class="large">コンピュータ</p>
CSSファイル
HTMLファイル
プロパティ -文字の形・大きさ(2)-
font-weight
文字の太さを指定
値として、100, 200, 300, 400, 500, 600, 700, 800, 900のどれかを
指定(通常は400)
p.thin{
font-weight: 200;
}
p.mid {
font-weight: 400;
}
p.thick {
font-weight: 600;
}
<p class="thin">コンピュータ</p>
<p class="mid">コンピュータ</p>
<p class="thick">コンピュータ</p>
CSSファイル
HTMLファイル
プロパティ -文字の形・大きさ(3)-
font-style
文字を斜体にするかどうかを指定
値として、「
normal
」、「
italic
」、「
oblique
」の
どれかを指定(通常はnormal)
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 37
p.normal{
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
<p class="normal">コンピュータ</p>
<p class="italic">コンピュータ</p>
<p class="oblique">コンピュータ</p>
CSSファイル
プロパティ -文章(1)-
text-align
文章の行をどの位置に揃えるかを指定
値として、「
left
」(左揃え)、「
center
」(中央揃え)、
「
right
」(右揃え)、「
justify
」(両端揃え)のどれかを指定
p.left{
text-align: left;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
<p class="left">コンピュータ</p>
<p class="center">コンピュータ</p>
<p class="right">コンピュータ</p>
CSSファイル
プロパティ -文章(2)-
text-decoration
文字に下線・上線・取り消し線を付けたり、
点滅させるかどうかを指定
値として、「
underline
」(下線)、「
overline
」(上線)、
「
line-through
」(取り消し線)のどれかを指定
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 39
p.under {
text-decoration: underline;
}
p.over {
text-decoration: overline;
}
p.through {
text-decoration: line-through
}
<p class="under">コンピュータ</p>
<p class="over">コンピュータ</p>
<p class="through">コンピュータ</p>
CSSファイル
プロパティ -枠をつける(1)-
border-color: 枠の色を指定(値は、色の名前)
border-width: 枠の太さを指定
値は、単位を「px」(ピクセル)または「em」(文字数)と
して数値で指定
border-style: 枠線の形式を指定
値は、「
none
」、「
hidden
」、「
solid
」、「
double
」、
「
groove
」、「
ridge
」、「
inset
」、「
outset
」、「
dashed
」、
「
dotted
」のどれかを指定
プロパティ -枠をつける(2)-
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 41
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ファイル
プロパティ -枠をつける(3)-
「border-***-style」、「border-***-width」、
「border-***-color」でもっと細かく
枠をつけることも可能
「***」の部分には、以下のいずれかが入る
「
top
」: 枠の上側の線の設定
「
bottom
」: 枠の下側の線の設定
「
left
」: 枠の左側の線の設定
「
right
」: 枠の右側の線の設定
プロパティ -枠をつける(4)-
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 43
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;
}
<p class="solid">
コンピュータ
</p>
<p class="dashed">
コンピュータ
</p>
<p class="double">
コンピュータ
</p>
CSSファイル
HTMLファイル
プロパティ -表示と配置(1)-
float
文章の位置と図や別の文章の位置(回り込み)を調整
ページ内にメニューを作るときなどに利用
値は以下のどれかを指定
「
left
」: 図を左側に配置し、文章を図の右側に配置
「
right
」:図を右側に配置し、文章を図の左側に配置
「
none
」: 図の左右に文章は配置せず、上か下かに配置
clear
floatで設定した回り込みを解除
値は、floatで設定したものを指定
または、「
both
」で、leftもrightも解除
プロパティ -表示と配置(2)-
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 45
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ファイル
プロパティ -箇条書き(1)-
list-style-type
箇条書きの項目の印(マーカー)の設定
値は、以下のどれかを指定(ただし、これは一部のみ)
「
none
」: マーカーを表示しない
「
disc
」: マーカーを塗りつぶされた丸にする
「
square
」: マーカーを四角形にする
「
upper-roman
」: マーカーをローマ数字の大文字にする
「
decimal
」: マーカーを算用数字にする
「
lower-latin
」, 「
lower-alpha
」: マーカーをアルファベットの
小文字にする
プロパティ -箇条書き(2)-
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 47
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ファイル
プロパティ -箇条書き(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ファイル
プロパティ -表(1)-
border-collapse
テーブルのセル(1つ1つのマス)の表示形式を設定
値は、以下のどれかを指定
「
collapse
」: セルとセルの境界線を境界上に重ねて表示
「
separate
」: セルとセルの境界線を別々に表示
「border-width」や「border-style」、
「border-color」も一緒に指定することも可能
ただし、表の外側の枠のみに適用
1つ1つのセルに適用したい場合は、<th>や<td>の
タグにもそれぞれスタイルシートを適用するように書く
プロパティ -表(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;
border-color: black;
<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
CSSファイル
HTMLファイル
プロパティ -表(3)-
Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 51
