Webデザイン演習

第３章スタイルシートによる
テキストデザイン
3.1 スタイルシートの基本
3.2 文字書式
3.3 行デザイン
3.4 ボックスのデザイン
3.1 スタイルシートの基本
3.1.1 スタイルシートを使うメリット
3.1.2 スタイルシートの記述法
3.1.3 スタイルシートをHTMLに適用
3.1.4 スタイルシートの文字コード
3.1.5 import規則
3.1.1 スタイルシートを使うメリット
① HTMLのサイズを大幅に縮小することができる。
②Webサイト内の文書でスタイルシートを共有することで一
括管理が可能。スタイルを変更する場合，修正はスタイ
ルシートだけでよい。
③HTMLでは不可能だった多様なデザインが可能になった。
レイアウトデザインにおける配色指定もピクセル単位で
行うことが可能である。
④印刷用，携帯用，PDA用などのプラットフォーム別にスタ
イルシートを分けることで，１枚のHTML文書を共有でき
る。
⑤ 将来的に廃止されることになっている非推奨のHTMLタ
グを使わなくて済む。
3.1.2 スタイルシートの記述法
■セレクタと，複数のプロパティ名・値の組で指定
スタイル記述
h2 {color ： blue ; }
スタイル終了はセミコロン（；）
値
プロパティと値の間はコロン（：）
プロパティ
セレクタ
スタイルシートの例
@charset “Shift_JIS”;
body { /* 文字色と背景色 */
color
: blue;
background-color : #FF7777;
}
（「/*」と「 */」に囲まれた部分はコメン
ト）
3.1.3 スタイルシートをHTMLに適用
以下の３通りがある
①埋め込み式
②インライン方式
③外部リンク方式
（１）埋め込み式
HTML内のhead要素内に
styleタグを記述し，その中に記述する方法
(ただし，コメントとして記述する)
<head>
<META http-eqiuv="Content-Type" content="text/html">
<style type="text/css">
<!-p { font-size : 13px;
line-height: 150%;
}
-->
</style>
</head>
フォントサイズを変えて確認しよう!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja">
<head>
<META http-eqiuv="Content-Type" content="text/html">
<style type="text/css">
<!-p { font-size : 13px; line-height: 150%; }
-->
</style></head>
<body><h2>悪太郎</h2>
<p>
乱暴者の悪太郎が，酔って寝込んだときに<br>
伯父に坊主頭にさせられる話の狂言のひとつ。<br>
目が覚めると，僧が念仏を唱えて通りかかり，<br>
悪太郎は改心して，僧の弟子になるという顛末。<br>
</p>
</body>
</html>
フォントサイズを変えて確認しよう!!
p { font-size
:
13px;
line-height:
150%;
}のとき
p { font-size
:
20px;
line-height:
150%;
}のとき
（２）インライン方式
■Body要素内の個別のタグに対してスタイルを適用する方法
<body>
<h2 style="font-size: 15px; color:red;">悪太郎</h2>
<p>
乱暴者の悪太郎が，酔って寝込んだときに<br>
伯父に坊主頭にさせられる話の狂言のひとつ。<br>
目が覚めると，僧が念仏を唱えて通りかかり，<br>
悪太郎は改心して，僧の弟子になるという顛末。<br>
</p>
</body>
（３）外部リンク方式
■スタイルシートのファイルを用意し，
HTMLファイルからリンクする方法
■HTMLファイル
<head>
<META http-eqiuv="Content-Type" content="text/html">
<link href="030104.css" rel="stylesheet" type="text/css">
</head>
■スタイルシートファイル(030104.css)
p { font-size : 20px;
line-height: 150%;
}
3.1.4 スタイルシートの文字コード
スタイルシートファイルの１行目に以下のように記述する
@charset “UTF-8”;
3.1.5 import規則
■スタイルシートファイルから
別のスタイルシートを呼び出す方法
【例】 @import url(basic.css);
ページレイアウトには，Aというファイル，
本文デザインには，Bというファイル
というようにスタイルファイルを分ける場合に使う。
3.2 文字書式
3.2.1 フォントサイズ
3.2.2 フォントの色
3.2.3 フォント名
3.2.4 テキストの画像化
3.2.5 テキストの装飾
3.2.1 フォントサイズ
（１）指定方法
値
数値
割合
キーワード
意
味
em，px などの単位を使ってフォントサ
イズを指定
基準となる大きさに対して，割合で
フォントサイズを指定
キーワードでフォントサイズを指定
（２）絶対単位によるフォントサイズ指定
単位
pt
pc
in
cm
mm
意
味
ポイント (1ポイント = 0.3514mm)
パイカ
(1パイカ = 4.2168mm)
インチ
(1インチ = 25.4mm )
センチメートル
ミリメートル
（３）相対単位によるフォントサイズ指定
単位
em
ex
Px
意
味
エム。ブラウザで設定しているフォン
トサイズの高さを１とした相対単位
エックス。ブラウザで設定している
フォントサイズの小文字「x」を1とす
るサイズ。
ピクセル。ディスプレイの１画素を１
とする。ディスプレイの解像度に対し
て相対的に設定される。
（４）割合（%）でフォントサイズ指定
■デフォルトを100%として相対的に指定する
（Internet
75% ＝
80% ≒
90% ≒
100% ＝
120% ≒
140% ≒
Exploreの場合）
12px
13px
14px
16px
19px
22px
（５）キーワードによるサイズ指定
■古いブラウザがキーワードに対応していなかったの
で，あまり使われない。
【絶対指定のキーワード】
(小さい順）
xx_small
x_small
small
medium
large
x-large
xx-large
【相対指定のキーワード】
smaller
larger
3.2.2 フォントの色
（１）指定方法
■Colorプロパティで指定
値は，以下の４通りで指定(前節の例を参照)
（前節の例を変更して色々と指定を変えてみよう）
指定方法
①色の名前で指定
②カラーコードで指定
③数値で指定
③数値で指定
指定例
color :
color :
color :
color :
red;
#FF0000;
rgb(0, 128, 255);
rgb(0%, 50%, 100%);
（２）代表的なカラーネーム（色名）
yellow
aqua
lime
green
olive
teal
blue
navy
purple
fuchsia
red
maroon
white
silver
gray
black
（３）ページ全体のテキストを変えるには
スタイルシートに次のように指定する。
body { color : #FF0000; }
（４）Webセーフカラー
OS,ブラウザ，モニタ表示モードによっては，フルカラー
（1677万色）で表示できない場合がある。その時は，
RGBそれぞれが，
00, 33, 66, 99, CC, FF
のいずれかに固定した色（216色）が用いられる。
これをWebセーフカラーという。
（５）フォントサイズ指定と色指定の例
■Webページを閲覧する人は様々なので，できる限り，
ユーザ側でフォントサイズを調整できるようにする
ほうが良い（相対指定を使う）。
h1 {
font-size : 100%;
line-height: 150%;
color
: red;
}
h2 {
font-size : 90%;
line-height: 150%;
color
: green;
}
p { font-size : 80%;
line-height: 150%;
color
: blue;
}
line_heightについては後述
【Sample】030105.html
3.2.3 フォント名
（１）指定方法
■font-familyプロパティで指定
h1 { font-family : “フォント名”;}
CSS
h1 { font-family: "Times New Roman"; }
HTML
<h1>How to change font name</h1>
（２）代表的なフォント名
フォント名
OS
メイリオ
Windows Vista
ＭＳＰゴシック
Windows
ヒラギノ角ゴ Pro W3 Mac OS
Osaka
Mac OS
Arial
Windows
Nelvetica
Mac OS
ＭＳＰ明朝
Windows
ヒラギノ明朝 Pro W3 Mac OS
Times New Roman
Windows
Times
Mac OS
Consolas
Windows Vista
Courier New
Windows
Courier
Mac OS
(クーリエ）
説明
標準ゴシック系アンチエイリアス
標準ゴシック系
標準ゴシック系
標準ゴシック系
標準san-serif英語フォント
標準san-serif英語フォント
標準明朝系
標準明朝系
標準serif英語フォント
標準serif英語フォント
標準等幅英語フォント
標準等幅英語フォント
標準等幅英語フォント
（３）フォントのキーワード
■スタイルシートに指定したフォントが
入っていない場合があるので，
フォントを複数指定する必要がある。
■フォントの種類を
ブラウザ側で判断するよう
キーワードを値にすることができる。
キーワード
serif
sans-serif
cursive
fantasy
monospace
説明
明朝体，セリフ体のフォント
ゴシック体，サンセリフ体のフォント
手書き風のフォント
装飾的なフォント
等幅フォント
（４）フォントの指定例
フォント名を変更してみよう！！
CSS
h1 { font-family:
HTML
"ヒラギノ明朝 Pro W3",
"ＭＳＰ明朝", serif; }
<h1>フォント名の指定方法</h1>
3.2.4 テキストの画像化
製作者側が意図したとおりの表示にするために
■どうしても特定のフォントで表示したい場合
テキストの画像化
①ユーザ側でフォントサイズを変更できない。
②見出しは大きくきれいにみせたい。
むやみにフォントの画像化はやめよう！！
①ユーザ側でフォントサイズを変更できない。
②見出しは大きくきれいにみせたい。
①文章部分はユーザ側でフォントサイズを変更してもよい。
②見出し部分に限って画像化を行う
3.2.5 テキストの装飾
（１）文字の太さ（font-weight）
値
数値
normal
bold
border
Lighter
【例】
機能
太さを100,200,…900と100刻みで指定。標準は400。
（不可能なブラウザもある）
標準
太字。数値700と同じ。
相対的に太くする。
相対的に細くする。
p {font-weight: bold;}
（２）斜体／非斜体（font-style）
値
italic
oblique
normal
【例】
機能
指定したテキストに斜体(イタリック)を適用。
通常のテキストを斜体に変形させる。
（日本語の場合，italicと同じ）
非斜体を適用。
p {font-style: italic;}
（注）
Windows Vistaのメイリオでは，
斜体用フォントが用意されているので
斜体の指定は無視される。
（３）その他の文字装飾（text-decoration）
値
line-through
underline
overline
blink
non
機能
取消し線
下線
上線
点滅させる
テキストに飾りを付ける。
（注）text-decoration
ブラウザのデフォルトでは，テキストリンクのテキストに
青色／紫色かつアンダーラインが引かれるので，注意すること。
明確な違いなしに強調の意味でアンダーラインを引くのは避ける。
（４）文字装飾の例
CSS
h1 { font-family: sans-serif;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
HTML
<h1>フォント名の指定方法</h1>
3.3 行デザイン
3.3.1 行揃えと表示幅
3.3.2 行の高さとインデント
3.3.3 スタイルシートの継承
3.3.1 行揃えと表示幅
（１）行揃え（text-align）
値
left
center
right
justify
機能
左揃え（日本語のブラウザでは標準）
中央揃え
右揃え
均等割り付け。
（スタイルシート Ver３で日本語を均等に割り付ける
text-justifyが審議中）
（２）行幅（width）
値
auto
数値
割合
機能
ブラウザに依存した値
（横幅いっぱいに広がる。100%と同じ）
px などの単位付き数値
%を使った割合（100%でautoと同じ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0//EN">
<html lang="ja">
<head>
<META http-eqiuv="Content-Type"
content="text/html">
<link href="030301.css"
rel="stylesheet" type="text/css">
</head>
<body>
<h1>悪太郎</h1><h2>【解説】</h2>
<p>乱暴者の悪太郎が，酔って寝込ん
だときに<br>
伯父に坊主頭にさせられる話の狂言の
ひとつ。<br>
目が覚めると，僧が念仏を唱えて通り
かかり，<br>
悪太郎は改心して，僧の弟子になると
いう顛末。<br>
</p>
</body>
</html>
（３）行揃えと幅の指定例
■行揃えと幅指定を
変えて確認しよ
う！！
h1 { font-family: sans-serif;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
p { text-align : center;
width
: 50%;
}
3.3.2 行の高さとインデント
（１）行の高さ（line-height）
値
normal
倍率
割合
行の高さ
機能
ブラウザとフォントが持っている初期値。
単位なし倍率。テキストの高さを1とする。
%を使った割合。テキストの高さを100%とする。
フォントサイズ
Text Height
行間
Text Height
（２）インデント（text-indent）
値
normal
数値
割合
機能
ブラウザの初期値（一般的には0px）。
単位付き数値。
%を使った割合。
（３）行の高さとインデントの例
p { text-align : left;
line-height: 2;
text-indent: 1em;
}
<p>
乱暴者の悪太郎が，酔って寝込んだときに<br>
伯父に坊主頭にさせられる話の狂言のひとつ。<br>
目が覚めると，僧が念仏を唱えて通りかかり，<br>
悪太郎は改心して，僧の弟子になるという顛末。<br>
</p>
１文字空いている
2行分の高さ
（４）インデントすべきか，せざるべきか？
【別の見方】
Webデザインでは，段落で区切るので，
インデントしない方が良いと主張する人もいる。
インデントした方が普通の文章風で分かりやすいと
いう人もいる。
あなたは，どちらですか？
3.3.3 スタイルシートの継承
（１）スタイルシートの階層
ある要素が，別の要素を含み，さらに別の要素を含むという関係
html要素
head要素
title要素
body要素
h1要素
ul要素
p要素
li要素
em要素
（２）プロパティ値は親から子・孫に継承する
ある要素が，別の要素を含み，さらに別の要素を含むという関係
<body>
<div>
継承関係
親要素
注目している要素
<p>
子要素
<em>
孫要素
（３）継承の例
<body>要素の指定が<h1>, <h2>に継承し，
<p>要素は定義したプロパティ値が反映されている。
<body>
<h1>悪太郎</h1><h2>【解説】</h2>
<p>
乱暴者の悪太郎が，酔って寝込んだときに<br>
伯父に坊主頭にさせられる話の狂言のひとつ。<br>
目が覚めると，僧が念仏を唱えて通りかかり，<br>
悪太郎は改心して，僧の弟子になるという顛末。<br>
</p>
</body>
body{ color
: blue; }
p { line-height: 1.5;
color
: green;
}
（４）継承されないプロパティ
Border（後述）
margin(後述）
padding（後述）
text-decoration
width
3.4 ボックスのデザイン
3.4.1 ボックス構造
3.4.2 背景色
3.4.3 パディング幅
3.4.4 枠線の表示
3.4.5 マージン間隔
3.4.1 ボックス構造
（１）ボックスの概念
以下の４領域からなっている
マージン（margin）
ボーダ（border）
パディング（padding）
コンテンツを表示する領域
（２）ボックスとwidthの関係
全体の横幅＝５５０ピクセル
width＝４２０ピクセル
マージン＝４０ピクセル
パディング＝２０ピクセル
コンテンツを表示する領域
枠線＝ボーダ＝５ピクセル
■Background-color
body
{ color
: red;
background-color
: #FFFF77;
}
h2
{
color
: blue;
background-color
: #DCDCDC;
}
p
{ line-height: 1.5;
color
: black;
background-color
: white;
}
3.4.2 背景色
<body>
<h1>悪太郎</h1>
<h2>【解説】</h2>
<p>
乱暴者の悪太郎が，酔って寝込んだときに<br>
伯父に坊主頭にさせられる話の狂言のひとつ。<br>
目が覚めると，僧が念仏を唱えて通りかかり，<br>
悪太郎は改心して，僧の弟子になるという顛末。<br>
</p>
</body>
</html>
3.4.3 パディング幅
■Padding
body{
color
: red;
background-color
: #FFFF77;
}
h2{
color
: blue;
background-color
: #DCDCDC;
}
p{
line-height: 1.5;
color
: black;
background-color
: white;
padding : 60px
20px 30px 40px;
}
（１）時計回りに指定（上，右，下，左）
HTMLは3.4.2と同じ
60px
30px
40px
20px
（２）４個以下の指定
■３個のとき
上，左右，下の指定とみなされる
■２個のとき
上下，左右の指定とみなされる
■１個のとき
上下左右すべて同じサイズとみなされる
（３）個別に余白を指定
プロパティ
padding-top
padding-right
padding-bottom
padding-left
説明
上側パディング
右側パディング
下側パディング
左側パディング
【例】
p {
padding-top: 60px;
padding-left: 20px;
}
3.4.4 枠線の表示
（１）ボーダスタイル（border-style）
値
non
solid
double
groove
ridge
inset
outset
dashed
dotted
説明
表示しない
1本線で表示
2本線で表示
へこんで見えるように表示
出っ張って見えるように表示
枠の内側がへこんで見えるように表示
枠の内側が出っ張って見えるように表示
破線で表示
点線で表示
（２）Internet Exploreで確認してみる
■対応していない値がある。
<body>
<h1>solid</h1>
<h2>double</h2>
<h3>groove</h2>
<h4>ridge</h2>
<h5>inset</h2>
<h6>outset</h2>
<p><strong>dashed</strong></p>
</body>
body{ border-style :
h1{ font-size : 20px;
h2{ font-size : 20px;
h3{ font-size : 20px;
h4{ font-size : 20px;
h5{ font-size : 20px;
h6{ font-size : 20px;
p { font-size : 20px;
Groove,ridge,
inset,outset
の対応が
なされていない
dotted;}
border-style
border-style
border-style
border-style
border-style
border-style
border-style
:
:
:
:
:
:
:
solid ;}
double;}
groove;}
ridge ;}
inset ;}
outset;}
dashed;}
■margin
3.4.3 マージン間隔
（１）時計回りに指定（上，右，下，左）
body{ background-color:yellow;}
h2{ background-color: #CDCDCD;}
p{ background-color:white;
margin: 30px 40px 50px 60px
}
<body>
<h2>動揺詩人金子みすず</h2>
<p> 1903年（明治36年）山口県長門市仙崎
（当時大島郡先崎村）生まれ</p>
<p>大正末期から昭和初期にかけ，
雑誌「童話」,「赤い鳥」,「金の星」に投稿して，
「若き動揺詩人の中の巨星」と賞賛されたが，
26歳の若さでこの世を去った。</p>
<p>彼女の詩は，自然な物に対して優しく，
思いやり深さがあり，
多くの人々に大きな感動を与えています。
現在，教科書や副読本にも掲載され，
幅広い年代の人たちに愛されている。</p>
</body>
指定結果
（Internet Explorer 表示例）
p{ background-color:white;
margin: 30px 40px 50px 60px
}
30px
50px
60px
40px
（２）４個以下の指定
■３個のとき
上，左右，下の指定とみなされる
■２個のとき
上下，左右の指定とみなされる
■１個のとき
上下左右すべて同じサイズとみなされる
（３）個別に余白を指定
プロパティ
margin-top
margin-right
margin-bottom
margin-left
説明
上側マージン
右側マージン
下側マージン
左側マージン
【例】
p {
margin-top: 60px;
margin-left: 20px;
}

Download Report