第10回 - 07年度春学期

スタイルシートの基礎

スタイルシートは、見栄えを記すための規格です。
HTMLが文書の構造に特化していたのは以前の説明の通りです。しかし、見栄えが設定されていないことには、どのように文字や画像を配置していいかもわからない訳です。

そこでウェブブラウザでは、それぞれのブラウザにおける基本的な見栄えが設定されています。これらの設定は、他に見栄えが設定されていない場合に使われる設定だと考えて下さい。

歴史的にはこの「ブラウザに搭載された見栄え」に合わせてHTMLを調整するということが行われて来たのですが、現在ではそのようなHTMLの構築は時代遅れだと考えて良いでしょう。HTMLにスタイルシートで見栄えを与え、自由な見栄えを行うことができるのが近年のウェブデザインになっています。

スタイルシートを用いるメリット

スタイルシートを用いることには明確なメリットがあります。文書構造と見栄えを分離することで、見栄えのみを調整することが容易になっています。また、多数のページからなるウェブサイトの修正は、従来時間がかかるものでしたが、スタイルシートを用いることで、見栄えの修正は格段に手間を減らすことができます。

スタイルシートのひな形を入手する

まずは、「スタイルシートの雛形」からスタイルシートのサンプルをダウンロードしてください。

style.css

というファイルがスタイルシートのひな形です。

スタイルシートを用いてページの装飾を行う

最も単純に言えば、スタイルシートは、HTMLの要素ごとに見栄えを設定します。そしてスタイルシート側で見栄えが設定されていない場合には、ウェブブラウザに内蔵されている見栄えが適用されます。

スタイルシートは

  • 何に対して（例えば p タグの要素に対する）
  • 何を（例えば文字色について）
  • どうするか（例えば赤くする）

という形で記されます。
もっと具体的に書くならば、スタイルの設定の方法は、

セレクタ {プロパティ:値;}

という形を取ります。見栄えの対象となるタグを宣言する部分がセレクタです。例を出しましょう。

p {color:#ff0000;}

これは最も簡単なスタイルの設定です。この設定は、

pタグの及ぶ範囲の文字色を赤く（16進数では#ff0000で示される）せよ

という命令になっています。pタグは段落ですから、そのHTMLの段落の文字全てが赤くなります（読みづらいと思いますので、下記のサイトを参考にするなどして、適宜色は調整してください）。

参考となるサイト：

ウェブカラーと呼ばれる、256色環境でWindows,Macintosh 両方に共通する216色についての説明を行っています。

次にページ全体に色を設定してみましょう。

body {background-color:#ff0000;}


これでHTML全体の背景色が赤くなります。見づらいので適宜色は調整してください。

スタイルシートを用いてページの装飾を行う（応用編）

基本編から少し先に進んでみましょう。先ほどの例では、色を変えるだけしか行っていませんでした。しかし、他に色々なプロパティを指定することができます。pタグやh1タグであれば、

  • フォントの大きさを変える

font-size : 120%;

  • 文字の配置位置を変える

text-align : center (right, left);

  • 行間の設定を変える

line-height : 150%;

  • フォントの色を変える

color : #ff0000;

というような具合に設定できます。実際の記述は以下のようになります。

p {
font-size : 120%; /* フォントのサイズを120%に設定 */
text-align : center; /* テキストを中央揃えに*/
line-height : 150%; /* 行の高さを150%にして読みやすく */
color : #ff0000; /* フォントの色を赤に設定 */
}

なお、各行の最初に複数のスペースが入っていますが、これはあっても無くても構いません。

文脈セレクタ

例えば箇条書きの中の強調にだけスタイルを付けたい場合などは、

li em {color : #ff0000;}

という形で設定できます。

クラスセレクタ

同じタグでも違う装飾を施したい場合に使われます。「強調（emタグ）」などは、同じ強調でも何種類か用意したいこともよくあります。

「何に対する（セレクタ）」の部分について、タグの名称だけではなく、サブタイトル（クラス）で設定することが可能です。クラスセレクタを利用する際には、

スタイルシート上では、

em.red {color ： #ff0000; }
em.blue {color : #0000ff; }


のようにタグ名の後に「ドット　クラス名」と記述します。

HTML ファイル上では、

<em class="red">赤で強調したい部分</em>
<em class="blue">青で強調したい部分</em>

という形で開始タグの中に属性を書き込みます。もちろんHTMLファイルとCSSのファイルできちんと対応ができていないといけません。これによって同じタグでも見栄えを調整することができます。

上記の例ですが、ブラウザで規定されているスタイルが反映されています。それをリセットするには、

em.blue {color:#0000ff;
text-decoration:none;
font-style:normal;
font-weight:normal;}


em.red {color:#ff0000;
text-decoration:none;
font-style:normal;
font-weight:normal;}

という記述をする必要があります（斜体、太字、下線などの、さまざまなテキストの修飾要素を排除しています）。参考にしてください。

リファレンスサイトを活用しよう

スタイルシートには様々なプロパティがあります。
ウェブ上に様々なリファレンスサイトがありますので、そちらを調べて活用してみてください。


ネットワークサービス基礎

ネットワークの新しい活用（SkypeとP2P）

参考文献

課題

見栄えも含めて締め切りまでにWebサイトが完成されている。相互評価課題を締め切りまでに提出すること。相互評価については以下の通り。

今回のウェブページ作成課題については、「そのページを読むだけで必要充分な情報が伝えられること」が大事な用件でした。
さて、相互評価課題ですが、以下の作業を指定された期間（講義によって異なります）に行ってください。
また、相互評価の結果は講師宛てにメールで送ってください。

評定作業

まず、みなさんにはリンク集から各ページをブラウズしてもらいます。ブラウズしたら以下に挙げる評価項目5項目に対してそれぞれ評価を行なってください。

評価項目

1)形式面

    • 表現内容にふさわしい（適切な）タグやスタイルシートが使われているか、著作権に配慮しているか、表示されない画像やリンクがないか、などを評価します。

2)内容面

    • テーマが適切、かつ読み手の興味を惹くものか、きちんと面白さや魅力を伝えられているか、読み手の理解を助けるような表現、表、画像などが的確に利用されているか、などを評価します。

3)ユーザビリティ（操作性）
読み手が操作しやすく、全体の構造が把握しやすいメニュー構成となっているか、またページ構成やリンクの張り方が内容の理解を助けるように作成されているか、などを評価します。

4)総合評価
上記の１）〜３）を基本とし、（もしあれば）他の視点に基づいて評価します。

以上の１）〜４）は５段階（５が最も良い）で評価します。全体の平均がおよそ3程度になるように調整してください。（全部1とか全部5とかは認めません。全部3も認めません）

5)コメント
それぞれのページに対して30字程度でコメントしてください。

また、評価しようとした時点でページが表示されない場合は、すべての項目を０点とした上で、コメント欄に表示されなかった旨を記入してください。

評価の記入方法

評価は名簿順に、それぞれの項目を一行で書き込んでください。
名前の後に改行を入れずに評価対象となる5項目をそれぞれ記すことになります。項目と項目の間は「半角スペース1つ」で区切ってください。具体的には以下の例のようになります。

名前 形式 内容 操作 総合 コメント
ササキヤスナリ 3 4 3 4 コメントコメントコメントコメント。
オオクマシゲノブ 4 3 1 4 コメントコメント。コメント。

また表示されない人に関しては、

ササキヤスナリ 0 0 0 0 表示されません。

というようになります。詳しくは講義中に解説を行います。