スタイルシートでデザイン（2） CSS (Cascading Style Sheets) スタイル

Web ページプログラミング
Lecture 5
Oct. 24th 2016
スタイルシートでデザイン（２）
CSS (Cascading Style Sheets)
ここまで、HTML は文章の意味的な役割を記述するもので、表示はブラウザ次第であること
を強調してきました。あるブラウザでの表示方法を前提に、HTML で見た目を制御しようとす
ると、他の環境では意味が通じにくい、相互運用性の低い情報となってしまいます。
Web の表現を作者が指定するには、HTML ではなく、スタイルシートという別の機能をもち
います。HTML では「意味」だけを記述し、その意味に対してスタイルシートで「表現」を対
応づけるという分業を行なうのです。
意味と表現を分離することで、HTML の相互運用性が確保されます。また、環境に応じてス
タイルシートを取り替えれば、全く同じ HTML を用いつつ、それぞれの特長を生かした表現が
可能になります。
HTML では、スタイルシート言語として CSS(Cascading Style Sheet)を用います。
スタイルシートでデザインを整えよう
CSS のスタイルは、HTML 文書の「誰の」
「何を」
「どうする」という情報を宣言します。た
とえば h1 要素を赤い文字にするには h1 {color: red}という具合です。
ここで誰(h1)の部分を
「セ
レクタ」
、何(color)を「プロパティ」
、どうする（red）をその「値」と呼びます。
スタイルシートとはこの宣言を必要なだけ列挙したもので、HTML 文書内に直接記述する方
法と、外部に用意して参照する方法があります。HTML 内に直接記述する場合は、head 要素内
の style 要素としてスタイルを宣言します。
前回の授業では、外部スタイルシートの方法を学習しました。その場合は、link 要素を用い、
rel=”stylesheet”とした上で href 属性でスタイルファイルを指定します。いずれも、CSS である
ことを示すために、type=”text/css”という属性を加えておきます。現在この方法が主流となって
います。
<head>
…略…
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href=”firstnamestyle.css” rel=”stylesheet” type=”text/css”>
</head>
外部スタイルシートの長所：
１．外部スタイルシートを利用することで、ヘッダー部分に記述する情報が少なくなり、サー
チエンジン最適化には効果的となります。検索エンジンでは、キーワードの出現位置がソ
ースの最初の方であるほど、重要視されると言われているためです。ヘッダー部分のデー
1
Web ページプログラミング
Lecture 5
Oct. 24th 2016
タが少なくなれば、必然的に、コンテンツの出現位置が上位になるというわけです。
２．外部スタイルシートは複数のページで共有することが可能です。そのため、外部スタイル
シートを利用することで、簡単に複数ページのデザインを統一することができます。
同じようにデザインされていることで、ユーザーはどこが重要な見出しで、どこにメニューが
あるのかといったことを、すぐに判断することができるためです。
いきなり大きくデザインが変わってしまうと、
「他のサイトにジャンプしたのだろうか？」とユ
ーザーを悩ませることにもなるかも知れません。
もう一つのやり方としては、CSS ルールを直接 HTML ファイルの中に埋め込む方法が
あります。
スタイルシートを入力し始めるために、head タグの中に style タグを入れます。スタイル
シートはすべて style タグの中に入力していきます。
<head>
…略…
<style type="text/css">
<!-CSS ルール
-->
</style>
</head>
<head>タグ内に<style>タグを記述し、その中にスタイルシートを記述する方法です。<style>
タグには「text/css」を値に持った type 属性を記述し、<style>タグの中身がスタイルシートで
あることを示します。基本的には、この記述だけで十分なのですが、スタイルシートを認識し
ないブラウザの場合、スタイルシートの文字をブラウザ上に表示してしまうことがあります。
これを防ぐために、コメントタグ「」でスタイルシートの部分をさらに挟み込みます。
埋め込み方式は、そのページ独自のスタイルを指定したいときによく利用されます。
背景の色を変えるには： background-color
<head>
<style type=”text/css”>
<!-h1 { background-color: green; }
h2 { background-color: lightyellow; }
-->
</style>
2
Web ページプログラミング
Lecture 5
Oct. 24th 2016
</head>
文字の色を変えるには：
color: 色
<head>
<style type=”text/css”>
<!-h1 { background-color: lightseagreen; color: white; }
h2 { background-color: #20B2AA; color: #E0FFFF; }
-->
</style>
</head>
見出し文字の大きさを変えるには：
font-size: 文字の大きさ
<head>
<style type=”text/css”>
<!-h1 { font-size: 1.5em; }
0.6cm;
24px;
18pt;
150%
h2 { font-size: 1.2em; }
-->
</style>
</head>
Q:
CSS はどこに書けばよいのですか？
以下の三つの方法があります。
（１）外部スタイルシート (external style sheet)
HTML ファイルとは別に、CSS ルールを記述したファイルを作成します。CSS ルール
を適用させるには HTML の<head></head>内に、次のように関連付けを記述します。
<link href=”パス付きで指定した css ファイル名（mystyle.css など）”
rel=”stylesheet” type=”text/css”>
（２）エンベデッド・スタイルシート (embedded style sheet)
HTML の<head></head>内に、次のように CSS ルールを理め込みます。
<style type=”text/css”>
<!-CSS ルール
-->
</style>
3
Web ページプログラミング
Lecture 5
Oct. 24th 2016
（３）インライン・スタイルシート (inline style sheet)
HTML の要素の開始タグの中で、style 属性を使って CSS ルールを指定します。
<要素名 style=”css の宣言”></要素名”>
例えば、<h1>要素を赤色にするには:
<h1 style=”color: red”>見出し１のテキスト</h1>
と記述します。
よく使われる CSS ルール：
「｜」で区切られた値は、選択できるプロパティ値を表す

書体の指定

フォント
font-family
書式セレクタ{font-family:”family-name”, generic-family}
例
h1{font-family:”MS P 明朝”, serif}
generic-family の指定は、指定した family-name を持つフォントがユーザの環境によって
選択できなかった場合に、代替フォントに表示するためのものです。generic-family には、
serif, sans-serif, cursive, fantasy, monospace などを指定できます。

文字サイズ
font-size
書式セレクタ{font-size: ポイント数}
例

h1{font-size: 12pt; }
斜体の有無
font-style
書式セレクタ{font-style: normal | italic | oblique}
例

h1{font-style: italic; }
太字
（斜体にしたいとき）
font-weight
書式セレクタ{font-weight: normal | bold | bolder | lighter }
例

h1{font-weight: bold}
行間
（太字にしたいとき）
line-height
テキストを読みやすくするためのポイントとして、行間があります。line-height のプロパティ
を使います。一般的に、em や割合（%）を使って指定します。
書式セレクタ{line-height: 1 文字のサイズに対する比率 }
例
div { line-height: 1.5em; }
4
Web ページプログラミング
Lecture 5
Oct. 24th 2016
p { line-height: 150% ; }

テキストの周囲の指定
text-align プロパティを使うと、<p>タグや<h1>タグなどのブロック要素内の行揃えを指定
することができます。また、テキストを表示する幅は width プロパティで指定します。

行揃えと幅の指定
text-align プロパティは、ブロック要素内の行揃えを指定します。値にはキーワードを記述します。
書式セレクタ{text-align: left | center | right | justify (両端揃え) | auto (自動設定); }
例
p { text-align: center; }
p { text-align: left; }

width プロパティ
Width プロパティは、ブロック要素の横幅を決めるものです。この幅は、ピクセルなどで指定されます。
書式セレクタ{width : 数値（ピクセルなど） | %（ウインドウに対する割合）| auto (自動設定); }
例
p { width: 250px; }
p { width: 70% ; }

マージン（枠線の外側の余白）の大きさを指定する
書式セレクタ{margin: 実数値 | %値 | auto (自動設定) }
margin-top
margin-bottom
margin-right
margin-left
例
div { margin-top: 10px ;
margin-left: 200px; }
margin 属性では、複数の値を指定することができます。
 例：
上下と左右の辺に分けて指定する
div { margin: 30px 20px; }
 上辺と左右と下辺に分けて指定する
div { margin: 30px 20px 25px ; }

画像を配置する
テキストの回り込みを指定するときに float プロパティを使います。
float プロパティと値「right」
「left」の組み合わせで、画像とテキストに関する左右の配置指定ができ
ます。
5
Web ページプログラミング
Lecture 5
Oct. 24th 2016
書式セレクタ{float: right | left (画像は左、テキストは右に流れ込む); }
例
img { float: right; }
img { float: left; margin-right: 10px; margin-bottom: 10px; }

背景画像の表示と並べ方
repeat
縦横にタイル状に繰り返して表示
repeat-x
横方向にのみ繰り返して表示
repeat-y
縦方向にのみ繰り返して表示
no-repeat 繰り返さずに一つだけ表示
{ background-image: url(photo/rose.jpg);
background-repeat: repeat-x; }
6

Download Report