2003年度 基礎ゼミ 【知的システムデザイン研究室】

第2回 ホームページゼミ

ゼミ担当者: 平井 聡,狩野 浩一,下村 大輔

指導院生: 伏見 俊彦,長野 林太郎,中山 靖一

開催日: 2003年5月19日





1 スタイルシート


1.1 スタイルシートとは


スタイルシートとは,Webページをデザインするための仕組みである.HTMLが文書の構造を記述するのに対し,スタイルシートはWebページのデザインを記述する.HTMLが本来は文書の構造を現すことを目的としていることから,近年「Webページ上のデザインに関する機能はHTMLとは切り離すべき」という考え方が主流となってきている.スタイルシートとは,その「Webページ上のデザインに関する機能」のことである.後述するJavaScriptへの対応なども考慮して,文書の構造はHTMLで,デザインはスタイルシートで記述するのが望ましいとされている.

スタイルシートの一種にCSS(Cascading Style Sheet)がある.CSSはHTMLの標準化を進めるW3Cが仕様を定義し勧告しているものである.スタイルシートにはCSSの他に数種類のスタイルシートが存在するが,単に「スタイルシート」といった場合,このCSSを指すのが一般的である.なお本レジュメでも,「スタイルシート」の記述はCSSを指すものとする.

1.2 スタイルシートでできること


1.3 スタイルシートの書き方


1.3.1 HTMLタグの指定


スタイルシートでスタイルを定義する際の基本的な書き方をFig1.1に示す.

セレクタ{属性:値;}
Fig1.1 スタイルシートの基本的な書き方

セレクタとは,スタイルを適用する対象のことである.また,属性は適用したいスタイルの種類であり,値はその設定値である.
例をFig1.2に示す.

H1{font-size:14pt;}
Fig1.2 スタイルシートの例

Fig1.1にFig1.2を対応させると,セレクタがH1,属性がfont-size,値が14ptとなる.これはHTMLのタグH1のスタイルを継承しつつフォントサイズは14にする,という意味になる.

このようにスタイルシートはタグのスタイルを定義する
なお,良く使う属性と値を紹介する.
  • 文字の色指定 color:[色];

  • [色]
    red 赤
    blue 青
    green 緑
    purple 紫

  • 文字の水平位置指定 text-align:[場所];

  • [場所]
    left 左寄せ
    center 中央寄せ
    right 右寄せ

  • 文字の太さ指定 font-weight:[太さ];

  • [太さ]
    bold 太字
    bolder 一段階太字
    lighter 一段階細字

  • 文字の斜体指定 font-style:[斜体];

  • [斜体]
    italic 斜体

  • 文字の背景指定 background-color:[色];

  • [色]
    red 赤
    blue 青
    green 緑
    purple 紫

  • 文字のフォント指定 font-family:[フォント];

  • [フォント]
    MS ゴシック 書き方:"MS(全角)"+"(半角スペース)"+"ゴシック(全角)"
    MS 明朝   書き方:"MS(全角)"+"(半角スペース)"+"明朝(全角)"
    Arial

  • 行間の指定 line-height:[数値];

  • [数値]
    (数字)pt 15pt,16ptなど これは(数字)pt - (文字のサイズ)が行間となる.
    (数字)% 120%,150%など これは文字のサイズを100%としたときの数値で,(数字)% - 100%が行間となる.

例としてFig1.3にスタイルシートを用いたHTMLファイルと,Fig1.4にその実行結果を示す.


<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1{font-size:14pt;}
</STYLE>
</HEAD>
<BODY>
<H1>
スタイルシート
</H1>
<BODY>
</HTML>
Fig1.3 スタイルシートを用いたHTMLファイル

Fig1.4 Fig1.3の実行結果

Fig1.4の文字のサイズは14ptになっている.また,<H1>タグのスタイルを継承しているため太字である.

他の書き方をFig1.5〜1.7に示す.

 セレクタ1,セレクタ2 {属性:値;} 
Fig1.5 複数のセレクタ定義

 セレクタ1 セレクタ2 {属性:値;}←コンマなし 
Fig1.6 セレクタ1に囲まれたセレクタ2の定義

 セレクタ{属性:値;属性:値;} 
Fig1.7 複数のスタイル定義

Fig1.5はセレクタ1,セレクタ2に同じスタイルを定義している.
Fig1.6はセレクタ1に囲まれたときのセレクタ2のスタイルの定義である.
Fig1.7はセレクタに複数のスタイルを定義する.

1.3.2 クラス指定


 .クラス名 {属性:値;} 
Fig1.8 クラス指定

Fig1.8は{}内のスタイルに名前(クラス名)をつけたものである.
スタイルシートでは,HTMLのタグに対しクラスを設定することができる.クラスを設定することにより,そのタグにクラス指定で定義したスタイルを付加することができ,同じタグで複数のスタイルを使い分けることができる.クラス名は基本的になんでも良いが,始めの文字を数字にするとブラウザに読み込まれない場合があるため数字は避けた方が良い.


クラスは,
         <タグ CLASS="クラス名">〜</タグ>
と呼び出す.

Fig1.9にクラスの使用具体例を,Fig1.10にその実行結果を示す.

(スタイルシート部分)
.iroG{color:Green;}
.iroP{color:Purple;}

(HTML部分)
<B CLASS="iroG">スタイルシートを使おう!</B>
<B CLASS="iroP">スタイルシートを使おう!</B>
Fig1.9 クラスの使用具体例

Fig1.10 Fig1.9の実行結果


Fig1.9とFig1.10より,同じタグに"iroG""iroP"クラスをそれぞれ設定することで,表示される文字の色が異なることがわかる.

1.4 スタイルシートの使い方



スタイルシートの代表的な使い方を3つ挙げる.

1.スタイルシートファイルを作っておき,それを外部ファイルとして使用する方法   

これはメモ帳などに記述したスタイルシートを”ファイル名.css”という形に保存したスタイルシートファイルを作り,外部ファイルとして呼び出す方法で,複数のページで同じスタイルシートを使いたいときに有効である.

スタイルシートを外部ファイルとして呼び出すときはHTMLファイルの>HEAD< 〜 >/HEAD<間でFig1.1のように定義する.

<LINK REL=STYLESHEET HREF="ファイル名.css" TYPE="text/css">
Fig1.11 スタイルシートファイルの呼び出し方

HREF="・・・"のところはファイルまでのパスであるため,"ファイル名.css"とするならばHTMLファイルと同じフォルダ内にスタイルシートファイルを保存する必要がある.パスは相対パスでも絶対パスでも良い.

2.HTMLファイルの<HEAD> 〜 </HEAD>タグ内に記述する方法. 

これはHTMLファイルの<HEAD> 〜 </HEAD>タグ内にスタイルシートを記述する方法で,1ページ内で同じスタイルシートを使いたいときに有効である.




記述の仕方は<HEAD> 〜 </HEAD>内にFig1.12のように定義する.


<STYLE TYPE="text/css"> ここにスタイルシートを記述する </STYLE>
Fig1.12 <HEAD> 〜 </HEAD>タグ内の記述




3.使用個所のタグに埋め込む方法

これは使用箇所のタグに埋め込む方法で,その場だけスタイルを変えたいときに有効.     
記述の仕方をFig1.13に示す.     

<セレクタ STYLE="属性:値;">〜</セレクタ>
例:<H1 STYLE="font-size:14pt;">〜</H1>

Fig1.13 タグに内の記述

なお,この3つの方法では方法1・2・3の順で表示の際適用される優先順位が高くなる.





2 JavaScript

2.1 JavaScriptとは

JavaScriptはオブジェクト指向スクリプト言語で,ブラウザ上で動作するプログラムの代表的存在である.HTMLファイルに直接記述してブラウザの機能をコントロールする.JavaScriptを用いることにより,動的なホームページを作成することが可能である.なお,JavaScriptは全くの別ものである.

2.2 JavaScriptでできること