 |
Web技術実習 |
| 戻る〔３０．クッキー〕 目次 |
|
Web技術実習 |
| 戻る〔３０．クッキー〕 目次 |
スタイルシート(style sheet)とは、HTML文書(Webページ)の見た目・見栄えを定義するためのものである。段落や語句の意味づけなど、文書の構造はHTMLのタグで表し、文字の色やレイアウト情報など、見た目に関するものをスタイルシートで表し、両者を区別する方向に向かっている。
HTML文書に適用するスタイルシートはCSS(Cascading Style Sheets)という言語を使用する。CSSファイルを作成して、複数のHTML文書から参照することで、見た目を統一することができる。また、HTML文書内にCSSを定義することもできる。
W3C が 1996年12月に CSS1（CSS Level 1）を勧告し、Internet Explorer3.0 などのWebブラウザが一部機能をサポートした。また、スタイルシートとJavaScriptなどを組み合わせ、DHTML(Dynamic
HTML、ダイナミックHTML)という技術にまとめられている。
スタイルシートを定義する方法は複数提供されている。ここでは主な記述方法だけを示す。
31-1 HTMLタグのstyle属性で定義
| <P style="font-size : 12pt;color : blue;">この段落に対して定義される。</P> |
上の例は、style属性でフォントサイズ(12ポイント)と文字の色(青色)を定義している。
スタイルシートの属性（例では"font-size"と"color"）と値（例では"12pt"と"blue"）をコロン(:)でつないで記述する。また、例のように一度に複数のスタイルシートを定義することができる。
HTMLタグで段落(<P>)や見出し(<H1>)を設定したくない単語や文章の一部分にスタイルシートを定義するときは、<SPAN>タグを使う。<SPAN>タグは特に働きのないタグである。ブロックに対してスタイルシートを定義するときは、<DIV>タグを使う。
31-2 HTMLタグに定義
| <STYLE type="text/css"> <!-- P { font-size : 12pt; color : red; } --> </STYLE> |
上の例は、<HEAD>～</HEAD>に記述する。HTML文書内のすべての<P>タグに対して、スタイルシートが働く。
毎回、スタイルシートを定義しなくてもHTML文書内で有効になる。
スタイルシートの働かないブラウザのために"<!--", "-->"でコメントにしておく。
31-3 クラスとして定義
| <STYLE type="text/css"> <!-- .abc { font-size : 12pt; color : aqua; } --> </STYLE> |
上の例は、<HEAD>～</HEAD>に記述する。スタイルシートをタグに設定するのではなく、クラスとして定義する。
例えば、ある段落だけにスタイルシートを設定したいときは次のように記述する。
<P class="abc">この段落だけ</P>
<H1 class="abc">この見出しだけ</H1>
クラス名にした"abc"は任意である。
31-4 擬似クラス
リンク先を指定する<A>タグに次の擬似クラスを定義することができる。クラスの定義と同じように、<STYLE type="text/css"> ～ </STYLE> の間に記述する。
- 未表示のリンク
- A:link { color : green; }
通常のリンクポイントは青色であるが、例では緑色に設定している。- 表示したリンク
- A:visited { color : green; }
一度訪れたリンク先のリンクポイントは紫色であるが、例では緑色に設定している。- 選択されてアクティブなリンク
- A:active { color : green; }
リンクポイントに点線の枠が付いているときの色で、例では緑色に設定している。- マウスポインタが上にあるリンク
- A:hover { color : green; }
リンクポイントの上にマウスポインタが来たときのスタイルを設定するクラスで、例では緑色に設定している。
31-5 単位
スタイルシートでは長さや大きさを指定するとき、必ず単位を付ける。主な単位を次に示す。
px ピクセル（=ドット） cm センチメートル（1cm=10mm） mm ミリメートル（10mm=1cm） in インチ（1in=2.54cm） pt ポイント（1pt=1/72in） pc パイカ（1pc=12pt）
31-6 外部ファイルとして定義
スタイルシートの定義をHTML文書の中に記述したが、スタイルシートだけを別のファイルとして作成し、複数のHTML文書で共有することでスタイルの統一を図ることができる。
スタイルシートのファイルには、<STYLE type="text/css">, <!--, -->,
</STYLE> 以外の部分を記述する。ファイルの拡張子は".css"とする。
例えば、HTML文書と同じフォルダにstyle.cssというスタイルシートのファイルが用意されているとき、次のように記述する。
<LINK rel="stylesheet" href="style.css" type="text/css">
または、<STYLE type="text/css"> ～ </STYLE> の間に次のように記述する。
@import url(style.css);
実習３２ スタイルシートを確認するWebページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「style1.htm」とする。ページのタイトルは「スタイルシート1」とする。
| 見出し1 | スタイルシート ←見出し(2) |
| 第1段落 | スタイルシート(style sheet)とは、HTML文書(Webページ)の見た目・見栄えを定義するためのものである。段落や語句の意味づけなど、文書の構造はHTMLのタグで表し、文字の色やレイアウト情報など、見た目に関するものをスタイルシートで表し、両者を区別する方向に向かっている。 |
| 見出し3 | カスケーディングスタイルシート ←見出し(3) |
| 第2段落 | HTML文書に適用するスタイルシートはCSS(Cascading Style Sheets)という言語を使用する。CSSファイルを作成して、複数のHTML文書から参照することで、見た目を統一することができる。また、HTML文書内にCSSを定義することもできる。 |
| 見出し3 | 標準化 ←見出し(2) |
| 第3段落 | W3C が 1996年12月に CSS1（CSS Level 1）を勧告し、Internet Explorer3.0 などのWebブラウザが一部機能をサポートした。また、スタイルシートとJavaScriptなどを組み合わせ、DHTML(Dynamic HTML、ダイナミックHTML)という技術にまとめられている。 |
操作１ 文字を入力して、見出し(2)(3)の設定をする。
・HTMLタグのstyle属性で定義
操作２ 第1段落の属性のダイアログを開き、［スタイル(S)...］ボタンをクリックして、スタイルの編集のダイアログを開く。［編集(4)］ボタンをクリックして、スタイルの設定のダイアログを開く。
操作３ スタイルの設定のダイアログで、文字サイズを12ポイント、文字色を青色に設定する。
① ［サイズ(S)］の「予約語」をクリックして、リストから「ポイント」を選択する。
② 文字サイズが18と入力されるので、「12」に変更する。
③ ［カラーと背景］タブで、［前景色(F)］をクリックして、リストから「青」を選択する。
④ ［OK］ボタンをクリックしていき、すべてのダイアログを閉じる。
操作４ 保存して、Webブラウザでスタイルの確認をする。
→第1段落だけにスタイル（文字サイズ12ポイント、文字青色）が設定されている。
・HTMLタグに定義
操作５ 段落<P>タグに、文字サイズ12ポイントと文字赤色の設定をする。カーソルを第1～3段落のいずれかに移動して、メニューバーから次のように選択する。
［表示(V)］ → ［スタイルシート マネージャー(C)］
操作６ スタイルシートマネージャーの［追加］ボタンをクリックして、スタイルの設定のダイアログを開く。［HTMLタグ名(M)］に「P」が入力されていることを確認して、文字サイズと文字色を設定する。
［OK］ボタンをクリックしていき、すべてのダイアログを閉じる。
操作７ 上書き保存して、Webブラウザでスタイルの確認をする。
→第2,3段落にスタイル（文字サイズ12ポイント、文字赤色）が設定されている。第1段落は元（文字サイズ12ポイント、文字青色）のままである。
HTMLタグに設定したスタイルより、style属性で設定したスタイルが優先される。
・クラスとして定義
操作８ クラス名abcに、文字サイズ12ポイントと文字水色の設定をする。スタイルシートマネージャーの［追加］ボタンをクリックして、スタイルの設定のダイアログを開く。
操作９ スタイルの設定のダイアログで、［HTMLタグ名(M)］の上にあるのリストから「クラスのスタイルを設定」を選択する。［HTMLタグ名(M)］に「abc」と入力して、文字サイズと文字色を設定する。
［OK］ボタンをクリックしていき、すべてのダイアログを閉じる。
操作１０ 第3段落の属性のダイアログを開き、［スタイル(S)...］ボタンをクリックして、スタイルの編集のダイアログを開く。［クラス(C)］の▼をクリックして、クラス名abcを選択する。［OK］ボタンをクリックする。
操作１１ 上書き保存して、Webブラウザでスタイルの確認をする。
→第3段落にスタイル（文字サイズ12ポイント、文字水色）が設定されている。第1,2段落は元（第1段落は文字青色、第2段落は文字赤色）のままである。
ここまでの設定で、HTMLリストは次のようになる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6. …
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>スタイルシート1</TITLE>
<STYLE type="text/css">
<!--
P {font-size : 12pt;color : red;} ←HTMLタグに設定したスタイル
.abc {font-size : 12pt;color : aqua;} ←クラスとして設定したスタイル
-->
</STYLE>
</HEAD>
<BODY> style属性で設定したスタイル
<H2>スタイルシート</H2>
<P style="color : blue;font-size : 12pt;"> スタイルシート(style sheet)とは、… 向かっている。</P>
<H3>カスケーディングスタイルシート</H3>
<P> HTML文書に適用するスタイルシートは … を定義することもできる。</P>
<H2>標準化</H2>
<P class="abc"> W3C が 1996年12月に … という技術にまとめられている。</P>
</BODY> ↑class="abc"は、クラス名で設定したスタイル
</HTML>
・擬似クラスの定義
操作１２ ページの先頭に「リンクポイント1△リンクポイント2」と文字を入力する。「リンクポイント1」にリンク(index.htm)を、「リンクポイント2」にリンク(nashi.htm)をそれぞれ設定する。
操作１３ 上書き保存して、Webブラウザでスタイルの確認をする。
→「リンクポイント1」(index.htm)は紫色、「リンクポイント2」(nashi.htm)は青色で表示される。「リンクポイント1」が青色のときはクリックして、リンク先を表示した後、Webブラウザの［戻る］ボタンで元のページに戻ると紫色になる。「リンクポイント2」はクリックしないこと。
操作１４ 「未表示のリンク(A:link)」を赤色、「表示したリンク(A:visited)を緑色、「選択されてアクティブなリンク(A:active)」を黄色、「マウスポインタが上にあるリンク(A:hover)」を前景色赤色、背景色銀色にそれぞれ設定する。
操作１５ スタイルシートマネージャーの［追加］ボタンをクリックして、スタイルの設定のダイアログを開く。スタイルの設定のダイアログで、［HTMLタグの候補(C)］をクリックして、リストから「未表示のリンク A:link」を選択してから文字の色を赤色に設定する。
［OK］ボタンをクリックして、スタイルの設定のダイアログを閉じる。
同じようにして、残りの擬似クラスを設定する。
操作１６ 上書き保存して、Webブラウザでスタイルの確認をする。
→「リンクポイント1」(index.htm)は緑色、「リンクポイント2」(nashi.htm)は赤色で表示される。マウスポインタをリンクポイントの上に移動すると赤色の文字で背景が灰色になる。
疑似クラスA:hoverの定義で、ロールオーバーに似た効果を作ることができる。
擬似クラスの設定で、HTMLリストは次のようになる。
<STYLE type="text/css">
<!--
P{font-size : 12pt;color : red;}
.abc{font-size : 12pt;color : aqua;}
A:LINK{color : red;} // 擬似クラスの設定
A:VISITED{color : green;}
A:ACTIVE{color : yellow;}
A:HOVER{color : red;background-color : silver;}
-->
</STYLE>
| 戻る〔３０．クッキー〕 目次 | |
|
| Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda | |