スタイルシート

					2011年05月20日
情報科学類 コンピュータリテラシ

                                       筑波大学 システム情報工学研究科 
                                       コンピュータサイエンス専攻, 電子・情報工学系
                                       新城 靖
                                       <yas@is.tsukuba.ac.jp>

このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2011/2011-05-20
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/

■連絡事項

■スタイルシート

HTML は、「本来は」、文書の構造を記述する。

HTML で記述できる文書の構造:

HTML では、文書の構造を記述することができるが、「表示の方法」 を記述することは、本来はでない。 ワープロは、紙に印刷した時の、このような表示の方法を設定す るためのプログラムである。

表示の方法:

表示の方法を記述するには、スタイルシートを用いる。

◆XML (eXtendible Markup Language)

XML は、タグが定義できるマークアップ言語（＜−＞HTMLはタグが固定）。プ ログラム間でデータの交換に用いる。

■カスケーディング・スタイルシート

◆例

H1の見出しを青くする。 
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
<TITLE>スタイルシートの例題:タグへの設定</TITLE>
<STYLE TYPE="text/css"><!--
H1 { color: blue; }
--></STYLE>
</HEAD>

<BODY>

<H1>青いH1の見出し</H1>

<H2>普通のH2の見出し</H2>

</BODY>
表示例

◆カスケーディング・スタイルシートで記述できること

段落書式 文字書式 箇条書き イメージ その他:

◆スタイルシートを書く場所

HTML のヘッダに書く。 
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>
別ファイルに書いて読み込む。 スタイルシートのURLは、filename.css のようなファイル名が多い。 
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<LINK rel="stylesheet" type="text/css" href="スタイルシートのURL">
</HEAD>

<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
@import url(スタイルシートのURL);
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>

複数 @import することもできる。 複数のスタイルは、混ぜられる（カスケード）。 対立する定義は、後から出てきた方が有効になる。

HTML のタグの属性として書く。宣言部分だけ。 

<P STYLE="color:#444444">文。文。文。</P>

◆コメント

コメントとは、ある コンピュータ言語の中に記述する、人間が読むために書かれた部分。 CSS では、/* と */ で括った部分がコメントとなる。 この表記法法は、Ｃ言語やＪａｖａ言語と似ている。 （他の言語では、この表記法は使えないことがある。） コメントは、デバッグ時など一時的に コンピュータ言語の機能を無効にしたい時にも使える。

◆基本的な文法

次のような規則の並び 
セレクタ  { 宣言;  }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言;  }
１つひとつの宣言は、次の形式。 
プロパティ:式
「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。

◆書式の有効範囲(セレクタ)

普通の HTML の要素(タグ) とは独立にスタイルシートを設定したい時には、次 のタグで範囲を指定する。どのスタイル・シートを適用すべきかは、classや idで指定する。

例 

H1	{ color:blue; } /* <H1></H1> だけ */
UL LI   { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P  { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
 *      { color:blue; } /* 全ての要素 */

.important    { color:blue; }  /* class="important" と指定したものだけ */
P.important   { color:blue; }  /* <P class="important"></P> と指定したものだけ */
#n10          { color:blue; }  /* id="n10" と指定したものだけ */

P:first-line   { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の１文字だけ */
A:link    { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active  { color:blue; } /* アクセス中 */
A:hover   { color:blue; } /* カーソルを重ねた時 */

◆クラスの利用例

<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
<TITLE>スタイルシートの例題:クラスの利用</TITLE>
<STYLE TYPE="text/css"><!--
.important    { color:red; }  /* class="important" と指定したものだけ */
--></STYLE>
</HEAD>

<BODY>

<H1>普通のH1の見出し</H1>

<P>
普通のパラグラフ
</P>

<P class="important">
重要なパラグラフ
</P>

<H2>普通のH2見出し</H2>

<H2 class="important">重要な普通のH2見出し</H2>

<P>
普通の言葉。<SPAN class="important">重要な言葉。</SPAN>普通の言葉。
</P>

</BODY>
表示例

◆書式設定の考え方

余白(margin)、境界(border)、詰め物(padding)がある四角い箱。 
    +----------------------------------------------+
    |               margin                         | 
    |   +--------------------------------------+   | 
    |   |           boarder                    |   | 
    |   |   +------------------------------+   |   | 
    |   |   |       padding                |   |   | 
    |   |   |   +----------------------+   |   |   | 
    |   |   |   |   element            |   |   |   | 
    |   |   |   +----------------------+   |   |   | 
    |   |   +------------------------------+   |   | 
    |   +--------------------------------------+   | 
    +----------------------------------------------+

                | the width of element | 
    |             the width of box                 |

◆WWWページデザインの手順

  1. HTML で全部の表示したい内容を記述する。
  2. スタイルシートを埋め込み、見栄えを調整する。
スタイルシートをうまく活用すると、見た目を一度に調整できる。 いちいち <font> で指定すると、変更したくなった時には、 全部変えなければならない。 <span class="classname">のように、クラスを使ってマークして おけば、１個所クラスの設定を変更するだけで全部統一的に変る。 (同様に、ワード・プロセッサでも、スタイルをうまく活用したい。)

注意点

複数のブラウザ（違うバージョンも含む）で表示を確認したい。

◆CSSの利用例

その他、次のページが参考になる。

◆テーブル・レイアウト

スタイルシートを使わずに、 <TABLE> タグ を使って配置する方法がある。

■Emacs

◆Emacs のバッファとウィンドウ

Emacs のバッファは、ハードウェアのメモリを抽象化したもの。ファイルの内 容を読み込み、編集できる。保存しなければ、失われる。

Emacs でウィンドウとは、バッファの一部を表示する画面。 The Unix Super Text 12.1.2項 参照。

■実習

実習時間中には、 以下の課題をできるだけ多く行いなさい。全部を行う必要はない。

★練習問題(1001) CSSの観察

自分がよく見る WWW ページについて、スタイルシートが使われているかを観察 しなさい。 Firefoxブラウザを操作して、元の HTML (ソース)を表示させなさい。
  1. 「表示」メニューから「ページのソース」を選ぶ。
スタイル・シートが別のファイルに含まれている時には、 その URL をコピーする。 相対形式で 書かれている時には、絶対形式に変換して、その URL を Web ブラウザに与え る。

★練習問題(1002) Wikiが利用している観察

学類コンピューティング環境 のページ で利用されているスタイルシートを表示しなさい。そして、どのよ うな機能が利用されているかを調べなさい。

★練習問題(1003) Emacs で複数のウインドウとバッファの操作

Emacs で、次のキー操作の動作を調べなさい。
C-x 2 ウインドウを2つに分割（現在のバッファを複数ウインドウで表示）
C-x 1 ウインドウを1つにする（他のウインドウを閉じる）
C-x 0 現在のウインドウを閉じる
C-x o 他の(other)ウインドウにカーソルを移動。
C-x C-b バッファのリストを表示
C-x b 別のバッファを表示する

★練習問題(1004) Emacs で長いファイルの編集

Emacs のウインドウを開く機能(C-x 2)は、1画面に入らないような大 きなファイルを部分的に表示する時に有用である。このことを確認しなさい。

★練習問題(1005) Emacs で複数のファイルの編集/2つのウインドウ

次の手順で、Emacs で複数のファイルを同時に編集してみなさい。

★練習問題(1006) Emacs で複数のファイルの編集/見えないウインドウ

次の手順で、Emacs で複数のファイルを同時に編集してみなさい。

■課題10 スタイルシート

以下の問題、および、回答をテキスト・ファイルに記述し、 レポート提出ページから提出しなさい。

(1) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい。

  1. 課題9の条件を すべて満たす。（同じページを、提出してもよい。）
  2. ２つ以上のタグのスタイルを変更する。そのうち１つ以上は、class を使う。
  3. 同じ class のスタイルを、２個所以上で利用する。 ２カ所としては、１つのHTML文書の内部でもよく、また複数の HTML 文書に またがっていてもよい。
作成した WWW ページの URL (http:// から始まるもの)をレポートに含めなさい。 なお、この提出する WWW ページは、 ホーム・ページでな くともよい。

(2) The Unix Super Text の次の部分を読みなさい。

そして、項目についてついて調べて、簡単に説明しなさい。 (3) The Unix Super Text の次の部分を読みなさい。 そして、項目についてついて調べて、簡単に説明しなさい。

(4) [加点] (1) で、講義の範囲を超えたスタイルシートの機能を利用しなさい。 そして、その機能の説明、どこに利用しているか、および、その機能の有用性 を書きなさい。

(5) [加点] CSS にはブラウザによる互換性の問題があり、様々な種類のブラウ ザで見た時にまったく異なる表示になってしまうことがある。様々な種類のブ ラウザで表示が似ていると期待されるCSSの機能を 10-15 行でまとめなさい。 また、表示が大きく異なってしまうような CSS の機能としては何があるか、 3-5 行でまとめなさい。「表示が大きく異なる」ようなCSS の機能を用いた WWW ページを 1 つ作成し、その URL、および、表示に用いるべきブラウザの種 類をレポートに含めなさい。

Last updated: 2011/05/20 10:57:23
Yasushi Shinjo / <yas@is.tsukuba.ac.jp>