コンピュータ基礎実習(上級) 第 13 週
「コンピュータ基礎実習(上級)」第 13 週 スタイルシートの基礎
今回の授業は、スタイルシート(CSS)の使い方を解説します。
1. CSS の基本
1.1.
CSS とは
CSS は、Cascading Style Sheets の略で、ウェブページの見栄えを設定するための言語です。
CSS は最近多くのサイトで使用され始めています。
ワープロソフトなどで、文書の見栄え(スタイル)を指定する技術全般をスタイルシートといいますが、
ウェブページの見栄え設定をするためには、一般的にスタイルシート言語の 1 つである CSS が使われます。
CSS は HTML と組み合わせて使用されます。HTML ではページ内の各要素の意味や構造を定義しますが、CSS では
ページを装飾するための情報を定義します。
たとえば、ウェブページが画面に表示される際の 色・サイズ・レイアウト といった表示スタイルや、プリンタな
どで印刷される際のスタイル、音声で読み上げられる際の再生スタイルなどを指定できます。
1.2.
なぜ CSS が必要か
現在 HTML では、<font>タグや background 属性など、装飾のためのタグや属性が多く存在しています。 また、
表(table タグ)でページをレイアウトするなどすれば、HTML だけで見栄えを設定することもできます。
しかしウェブページの見栄えを設定するために HTML を用いるのは、HTML 本来の目的と異なる使い方です。HTML
は情報構造を定義するための言語ですので、見栄えの制御のために本来と違った使い方をすると、文書の情報構造
がデタラメになってしまいます。コンピュータや検索エンジンに理解しづらい文書構造になってしまえば、せっか
くの情報がうまく識別されず、有意義に活用されません。
そこで、HTML では文書構造のみを定義し、ページの見栄え(スタイル)については HTML と別に管理することが推奨
されるようになりました。この見栄えの設定に用いられるのが CSS なのです。
※ HTML の次世代バージョンである HTML5 では、<font>や<center>タグなど、いくつかの見栄えに関するタグが
廃止される予定となっています。
1.3.
CSS のメリット
(1) 文書構造を保ったままページの見栄えを設定できる
HTML で見栄えを設定しようとして文章の内容や意味にそぐわない HTML を使用すると、文章構造が難解になりま
す。そこで CSS を使うと文章構造(HTML)への影響を最小限にしながらページの見栄えを設定できます。
ページの構造と見栄えを分離することで、HTML の記述をスッキリさせられます。
(2) 作業しやすくなる
例えば HTML で見出し(<h1>)の色やサイズを変えようとすると、<h1>タグが使われているすべての箇所を修正す
る必要があります。 CSS を使うと、このような見栄えの設定を一括管理できます。
また複数ページで CSS を共有できるので、
サイト全体のデザイン変更などが容易になり編集が格段に楽になります。
(3) SEO 効果やアクセシビリティ向上
見栄えに関する記述を CSS にまとめ、HTML から排除することで、Google 等の検索エンジンに正しく解釈されるウ
ェブページとなります。また HTML から余分な記述を省くことで、検索エンジンによるページの分析処理などが
軽量化されます。これによって SEO 効果やアクセシビリティの向上が期待できます。
※SEO とは検索エンジンにとって良いページを作ることで、貴方のサイトを検索されやすくし、アクセス数をより
多く集めるための技術です。
2. CSS の書き方
2.1.
基本書式 [ セレクタ プロパティ 値 ]
CSS で設定を記述する際は、どの部分に対して(セレクタ)、どのスタイルを(プロパティ)、どのように(値)適用するかを
記述します。以下の例では、<h1>タグ範囲内の文字色を赤くする記述を記します。
h1{color:red;}
基本的に、セレクタ {プロパティ名:値;} のように記述します。
-1-
コンピュータ基礎実習(上級) 第 13 週
セレクタ(selector)は見栄え(スタイル)を適用する対象を指定するものです。 この例では<h1>タグが対象になってい
ます。 異なるセレクタを使うことで、様々な対象に見栄えを設定できます。
プロパティ(property)は適用するスタイルの種類のことです。また値はプロパティに設定する具体的な内容です。こ
の例では文字色を指定する color プロパティに対して、値 red を指定しています。CSS では様々なプロパティが用意
されており、使い分けることで様々な見栄えを設定できます。
プロパティ:値; 部分は { ～ } で囲んでください。なお{ ～ }の範囲全体を宣言ブロック（declaration block）
、プロパテ
ィ:値; の部分をスタイル宣言（declaration）と呼びます。
2.2.
複数のスタイル宣言を一度に記述
一つのセレクタに対して複数スタイルを設定する場合は、スタイル宣言をセミコロン（ ; ）で区切って記述します。
セミコロン（ ; ）はスタイル宣言を区切るための記号なので、最後のスタイル宣言の後には必要ありませんが、付
けても間違いではありません。
p { color:red; background-color:green; }
この例では<p>タグの範囲内に対して、文字色(color)を赤、さらに背景色(background-color)を緑に設定しています。
2.3.
コメントの記述
/*から*/で囲んだ範囲はコメントとなり、CSS の解釈としては無視されます。一時的に CSS を無効にしたり、CSS ソ
ース内にメモを残したりする際に便利です。なお /* /* */ */ のように二重に使うことはできません。
p { color:blue; line-height:1.5; }
2.4.
/* 段落の文字色を青くし、行の高さを 1.5 倍にする */
スペースや改行について
CSS では 半角スペース、改行、タブ は結果に影響を与えません。これらを使用して CSS 記述を見やすく整形して
も問題ありません。
p {
color:red;
background-color:green;
}
上の例は、2.2で紹介した p { color:red; background-color:green; } と同じ意味になります。
2.5.
大文字と小文字について
HTML では要素名や属性名についての大文字、小文字を区別しませんが、拡張版の XHTML では要素名と属性名は
小文字で記述する必要があります。CSS を記述する場合、その CSS が HTML 文書に適用されるか XHTML 文書に適
用されるかによって、大文字・小文字が区別されるかどうかが決まります。
よって CSS を記述する際は、将来的に XHTML へ移行する可能性を考えて、要素名や属性名をすべて小文字で記述
したほうがよいでしょう。
3. CSS を HTML ファイルで使用する
CSS を HTML 文章に適用するには、大きく分けて 3 つの方法があります。
① 外部 CSS ファイルを読み込んで適用する ( <link>タグ )
② ファイル単位に適用する ( <style>タグ )
③ タグに style 属性を追加して局所的に適用する
3.1.
外部 CSS ファイルを読み込んで適用する ( <link>タグ )
HTML ファイルと別に CSS を記入したファイルを用意して、HTML ファイル内から読み込ませる方法です。
そのためには HTML 文章の<head>タグ内に、以下のような<link>タグを記述し、CSS ファイル名を指定します。
HTML ファイルの内容
<html>
<head>
<link rel="stylesheet" type="text/css" href="xxx.css" >
</head>
-2-
コンピュータ基礎実習(上級) 第 13 週
<body>
<h1>第一章 はじめに</h1>
</body>
</html>
xxx.css ファイル の内容
h1 { color:red; } /* h1 見出しの文字色を赤にする */
上の例では、HTML ファイル内の全ての<h1>見出しの文字色が赤色になります。
サイト全体に対するデザイン修正のしやすさ などを考慮すると、この方法で CSS を設定するのがおすすめです。
3.2.
ファイル単位に適用する ( <style>タグ )
HTML 文書の<head>タグ内に<style>タグを追加して、CSS を設定する方法です。
この書き方の場合、CSS 設定はファイル内だけで有効です。
<html>
<head>
<style type="text/css">
<!-h1 { color: red; }
-->
</style>
</head>
<body>
<h1>第二章 CSS とは</h1>
</body>
</html>
この例では、ファイル内の全ての <h1>見出しの文字色が赤色になります。
※ なお CSS 部分が HTML のコメント表現<!-- -->でコメント化されているのは、CSS に対応していない古いブラ
ウザでこのページを見た時、<style>タグ内の文字がそのまま表示されてしまうのを防ぐためです。
ただ近年ほとんどのブラウザは CSS に対応しているので、<!--と-->は省略してもおおむね問題ないでしょう。
3.3.
タグに style 属性を追加して局所的に適用する
HTML タグに style 属性を追加して、HTML 文章の中に直接 CSS を記述する方法です。
<p style="color:red; line-height:1.5;" >CSS のメリットとは、…</p>
上の例では、指定の<p>タグ範囲のみ、文字色が赤、行間が 1.5 倍の高さになります。
なお style 属性による CSS 設定は、局所的にスタイルを設定する際などには便利ですが、 HTML 記述が複雑になり
がちです。効率良く見栄えを管理するには、 3.1のように外部 CSS ファイルを読み込むのが推奨です。
4. セレクタの種類
セレクタ {プロパティ名:値;}
セレクタは見栄え(スタイル)を適用する対象を意味します。 代表的には以下のような種類があります。
名前
要素型セレクタ
クラスセレクタ
id セレクタ
複数セレクタ
子孫セレクタ
4.1.
セレクタの書式
タグ名
.クラス名
#id 名
セレクタ,セレクタ
セレクタ セレクタ
設定対象
タグ名で指定した全要素
クラスを付けた要素
id を付けた要素
複数のセレクタ
下の階層の子孫要素
要素型セレクタ
指定のタグが 全て CSS の適用範囲になるセレクタです。
-3-
例
p {color:blue;}
.sample {color:blue;}
#sample {color:blue;}
h1, h2 {color:blue;}
td b {color:blue;}
コンピュータ基礎実習(上級) 第 13 週
p {color:blue;} の場合、ページ内の全ての段落(<p>)タグの文字色が青色になります。
4.2.
クラスセレクタ
特定の class 名が付けられたタグが CSS の適用範囲になるセレクタです。
タグに class 属性を追加することで、class 名を付けられます。 (例) <h1 class="hogehoge">
文書内の複数の箇所や、異なるタグに対して 同じスタイルを適用できます。
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h2>第三章 CSS のメリット</h2>
<p class="info">CSS に HTML から見栄えに関する設定を分離することで…</p>
<p>HTML5 では文章の構造と見栄えを分離することが…</p>
</body>
</html>
mystyle.css の内容
.info {color:blue; }
この例では、class 属性が付いている<p>タグだけに、info クラスの CSS 設定(文字色:青)が適用されます。
CSS でクラスの設定を記述する時は、class 名の先頭にドット[.]を付けます。
HTML 文章内で class 属性を追加する時は、ドット[.]は不要です。
4.3.
id セレクタ
特定の id 名が付けられたタグが CSS の適用範囲になるセレクタです。
タグに id 属性を追加することで、id 名を付けられます。 (例) <table id="hogehoge" ... >
1 つの HTML 文書内で同じ id 名を重複して使用することはできません。
id セレクタを使用すれば、文書内の特定の一箇所にスタイルを適用することができます。
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h2 id="titlemenu" >第三章 CSS のメリット</h2>
<p>CSS に HTML から見栄えに関する設定を分離することで…</p>
<p>HTML5 では文章の構造と見栄えを分離することが…</p>
</body>
</html>
mystyle.css の内容
#titlemenu {color:blue; background-color:skyblue; }
この例では、id 属性が付いた<h2>タグだけに、 titlemenu の CSS 設定が適用されます。
CSS で id の設定を記述する時は、ｉｄ名の先頭にシャープ[#]を付けます。
HTML 文章内で id 属性を追加する時は、シャープ[#]は不要です。
4.4.
複数セレクタ
セレクタをカンマ[ , ]で区切ると、複数のセレクタにまとめて同じ CSS 設定を適用することができます。
h1, h2 {color:blue;}
/* h1 タグと h2 タグの両方で文字色が青になる。 */
-4-
コンピュータ基礎実習(上級) 第 13 週
4.5. 子孫セレクタ
セレクタを半角スペースで区切ると、 ある要素より下の階層にある子孫要素を対象にスタイルを適用することがで
きます。
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<table>
<tr><td><p>１時間目</p></td><td><p>２時間目</p></td></tr>
</table>
</body>
</html>
mystyle.css の内容
td p {margin:10px; }
この例では<td>タグの範囲内にある<p>タグのみ、余白(margin)が 10 ピクセルに設定されます。
5. スタイルシート設定に便利なタグ
CSS は既存の HTML タグに追加する形で見栄えを設定できます。
しかし、HTML タグが無い場所に見栄えを設定したい場合もあります。
このような場合のために、HTML には <div>タグと<span>タグが用意されています。
5.1.
<div>タグ
<div>タグは、それ自身には効果がありませんが、<div>～</div>で囲まれた四角形の範囲に対して
CSS を適用させられます。 ※ <div>範囲の上下には自動的に改行が入ります。
<div>タグは単体では意味が無いので、class 属性を追加したり、style 属性を追加したりして使用します。
HTML 記述例
<p>この文章はサンプル文章です。
<div style="border:dashed 1px red">注意書き<br>これは重要な文章です。</div>
この文章はサンプル文章です。</p>
画面の出力例
この文章はサンプル文章です。
注意書き
これは重要な文章です。
この文章はサンプル文章です。
上の例では、<div>タグに style 属性を追加して、周囲に罫線(border)を引いています。
このように四角形の範囲を持つタグのことをブロック要素と言います。
なお 見出し(h1～h6)、段落(p)、リスト(ul,ol) などもブロック要素ですので、div と同じような結果になります。
5.2.
<span>タグ
<span>タグも、それ自身には効果がありませんが、<span>～</span>で囲まれた範囲に対して
CSS を適用させられます。 <div>タグと異なるのは、行内の一部が CSS 対象範囲となる点です。
HTML 記述例
<p>この文章はサンプル文章です。
<span style="border:dashed 1px red">注意書き これは重要な文章です。</span>
この文章はサンプル文章です。</p>
画面の出力例
-5-
コンピュータ基礎実習(上級) 第 13 週
この文章はサンプル文章です。注意書き これは重要な文章です。この文章はサンプル文章です。
上の例では、<span>タグに style 属性を追加し、周囲に罫線(border)を引いています。
<div>タグと異なり、行内の一部に罫線が引かれます。<span>範囲の前後には改行が入りません。
このような範囲を持つタグのことをインライン要素と言います。
なお 太字(<b>)、リンク(<a>)、画像(<img>)などもインライン要素ですので span と同じような結果になります。
このように、<div>タグや<span>タグを追加すれば、もともと HTML タグが書かれていない範囲にも CSS 効果を適用
できるようになります。
6. 様々なプロパティ
CSS の基本的な書式は以下のとおりでした。
セレクタ {プロパティ名:値;}
プロパティ名には様々なものがありますが、そのうちいくつかを紹介します。
スタイル名
color: 色;
機能
文字の色を変更する
background-color: 色;
背景色を変更する
background: url('ファイル名');
背景に画像を配置する
background-repeat: 設定値;
設定値 = repeat-x
repeat-y
no-repeat
背景画像の繰り返し方法を指定
repeat-x 横方向のみ繰り返し
repeat-y 縦方向のみ繰り返し
no-repeat 繰り返さない
background-position: 横 縦;
背景画像の表示位置を指定
border: 線種 太さ 色;
枠線を表示する
width: 幅;
height: 高さ;
幅と高さを指定する
margin: 余白の長さ;
margin-top:
上余白の長さ;
margin-bottom: 下余白の長さ;
margin-left: 左余白の長さ;
margin-right: 右余白の長さ;
line-height: 行間;
要素の周辺に余白を作る
それぞれ 全周、上、下、左、右
の余白を設定できる
border-collapse: 設定値;
設定値 = collapse;
separate;
隣り合ったテーブルセルの枠線
の描画方法を指定します。
テーブル専用のスタイル。
collapse 重なり合わせて表示
separate 離して表示
文字の行間を指定する
使用例・詳細解説
<p style="color:red;">....</p>
<p>の段落内で文字の色を赤にする
<div style="background-color:wheat;">...</div>
<div>範囲の背景色を小麦色(wheat)にする
<h1 style="background:url('bg.jpg');">....</h1>
<h1>範囲の背景に bg.jpg を背景として表示する。
通常背景画像はタイル状に敷き詰められますが、このスタイルを使
うことで、画像の繰り返し表示を制御できる。
<body style=" background:url('bg.jpg');
background-repeat:no-repeat; ">
ページの背景に bg.jpg を背景として繰り返さずに表示。
background-position: left top;
左上に表示
background-position: 10px 20px; 左上から 10px、下に 20px
background-position: left;
left center と同じ
background-position: top;
center top と同じ
background-position: center;
center center と同じ
background-position: 50% 50%; center center と同じ
background-position: right 20px; bottom:0px;
右から 20px、下から 0px
<div style="border: solid 1px blue;">....</div>
<div>範囲の周囲に 実線(solid) 、太さ 1 ピクセル、
青色の枠線を引く。
<div style="width:200px;height:100px;">....</div>
<div>の範囲を幅 200 ピクセル、
高さ 100 ピクセルの大きさとする。
background-color や border を組み合わせると、指定の大きさで
色のついた長方形を表示できる。
<div style="margin-left:2em;">....</div>
<div>範囲の左側(left)に、2 文字分(2em)の余白を作る。
字下げが表現できる。
<p style="line-height:1.5em">....</p>
<p>段落の行間を 1.5 文字分にする。
<table border="1" bordercolor="black"
style=" border-collapse: collapse; ">
<tr><td>1 時間目</td><td>2 時間目</td></tr>
</table>
collapse を設定すると、罫線同士が 1 ピクセルの線のように表示さ
れ、HTML の表 特有の立体的デザインが無くなるため、
平面的でシンプルなデザインの表になります。
CSS のプロパティにはこの他にもたくさんの種類があります。
次回は CSS の使い方を、実例をまじえて詳しく解説します。
以上
-6-
© Copyright 2024 Paperzz
