第10回 - 08年度秋学期
スタイルシートの基礎
スタイルシートは、見栄えを記すための規格です。
HTMLが文書の構造に特化していたのは以前の説明の通りです。しかし、見栄えが設定されていないことには、どのように文字や画像を配置していいかもわからない訳です。
そこでウェブブラウザでは、それぞれのブラウザにおける基本的な見栄えが設定されています。これらの設定は、他に見栄えが設定されていない場合に使われる設定だと考えて下さい。
歴史的にはこの「ブラウザに搭載された見栄え」に合わせてHTMLを調整するということが行われて来たのですが、現在ではそのようなHTMLの構築は時代遅れだと考えて良いでしょう。HTMLにスタイルシートで見栄えを与え、自由な見栄えを行うことができるのが近年のウェブデザインになっています。
スタイルシートを用いるメリット
スタイルシートを用いることには明確なメリットがあります。文書構造と見栄えを分離することで、見栄えのみを調整することが容易になっています。また、多数のページからなるウェブサイトの修正は、従来時間がかかるものでしたが、スタイルシートを用いることで、見栄えの修正は格段に手間を減らすことができます。
スタイルシートを用いてページの装飾を行う
最も単純に言えば、スタイルシートは、HTMLの要素ごとに見栄えを設定します。そしてスタイルシート側で見栄えが設定されていない場合には、ウェブブラウザに内蔵されている見栄えが適用されます。
- 何に対して(例えば p タグの要素に対する)
- 何を(例えば文字色について)
- どうするか(例えば赤くする)
という形で記されます。
もっと具体的に書くならば、スタイルの設定の方法は、
セレクタ {プロパティ:値;}
という形を取ります。見栄えの対象となるタグを宣言する部分がセレクタです。例を出しましょう。
p {color:#ff0000;}
これは最も簡単なスタイルの設定です。この設定は、
pタグの及ぶ範囲の文字色を赤く(16進数では#ff0000で示される)せよ
という命令になっています。pタグは段落ですから、その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; /* フォントの色を赤に設定 */
}
なお、各行の最初に複数のスペースが入っていますが、これはあっても無くても構いません。
divタグを使ってブロック要素のまとまりを作る
ここまでできた人は、ページの中にたとえば
見出し
段落
段落
という形からなる、意味によるまとまり(いわゆる意味段落)を、視覚的にブロックとして表示したくなるかもしれません。このような場合は、見出しや複数の段落を<div>で囲うことで、ひとつのブロックとして扱うことができるようになります。divタグはこのようなブロックを作成するためのタグです。
クラスセレクタ
同じタグでも違う装飾を施したい場合に使われます。「強調(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;}
という記述をする必要があります(斜体、太字、下線などの、さまざまなテキストの修飾要素を排除しています)。参考にしてください。
また、先ほど説明したように、HTML中にdivタグを用いることによって、ブロック要素を複数まとめることができます。また、divタグに対応するクラスセレクタを設定することによって、さまざまな表現手法が実現できます。たとえば段組を使ったレイアウトなどがそれにあたります。詳しくは各自調べてみましょう。
たとえば以下のページは、スタイルシートだけで段組などを実現しています。
http://www.cis.twcu.ac.jp/~yasunari/2008a/
このページのスタイルシートは以下のとおりです。
参考文献
- 作者: スタジオイースペース
- 出版社/メーカー: ソーテック社
- 発売日: 2006/04
- メディア: 単行本
- 購入: 1人 クリック: 3回
- この商品を含むブログ (10件) を見る
ノンデザイナーズ・ウェブブック〈2001〉今日からはじめるWebデザイン
- 作者: Robin Williams,John Tollett
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2001/02/01
- メディア: 単行本
- クリック: 8回
- この商品を含むブログ (6件) を見る
課題
- 見栄えも含めて締め切りまでにWebサイトが完成されている。
- 最終課題を提出する。
最終課題は相互評価課題を締め切りまでに提出するというものです。
相互評価については以下の通り。
今回のウェブページ作成課題については、「そのページを読むだけで必要充分な情報が伝えられること」が大事な用件でした。
さて、相互評価課題ですが、以下の作業を指定された期間(講義によって異なります)に行ってください。また、相互評価の結果は講師宛てにメールで送ってください。
評定作業
まず、みなさんにはリンク集から各ページをブラウズしてもらいます。ブラウズしたら以下に挙げる評価項目5項目に対してそれぞれ評価を行なってください。
評価項目
1)形式面
2)内容面
-
- テーマが適切、かつ読み手の興味を惹くものか、きちんと面白さや魅力を伝えられているか、読み手の理解を助けるような表現、表、画像などが的確に利用されているか、などを評価します。
3)ユーザビリティ(操作性)
-
- 読み手が操作しやすく、全体の構造が把握しやすいメニュー構成となっているか、またページ構成やリンクの張り方が内容の理解を助けるように作成されているか、などを評価します。
4)総合評価
-
- 上記の1)〜3)を基本とし、(もしあれば)他の視点に基づいて評価します。
以上の1)〜4)は5段階(5が最も良い)で評価します。全体の平均がおよそ3程度になるように調整してください。(全てのページに対して全部1をつけるとか全部5をつける、などは認めません。全部3も認めません。そのような評価が行われた場合には課題評価点が最低得点となります)
5)コメント
それぞれのページに対して30字程度でコメントしてください。すべてのページを実際にブラウズした証拠になりますので、きちんと内容に基づいたコメントを行うこと。
また、評価しようとした時点でページが表示されない場合は、すべての項目を0点とした上で、コメント欄に表示されなかった旨を記入してください。