2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」 スタイルシート 外国語学部 千葉 ([email protected]) 0. 内容 • • • カスケーディング・スタイルシート (CSS) とは スタイルの記述方法 スタイルシート利用のコツ 1. Cascading Style Sheet (CSS) とは (教科書 p.52—61) • • HTML を用いた Web ページでは，コンテンツの内容によってタグを使い分ける。WWW ブ ラウザは，各タグにふさわしい文字の大きさやフォントの種類，色でコンテンツを表示して くれるが，印象深いページをつくる際には，そのようなお仕着せのレイアウトではなく，独 自にレイアウトやデザインを細かく決め，オリジナリティを出す必要がある。 そのような要求に応えるため，テキストや画像などの配置，文字の色や大きさ，デザインな どを細かく設定できるよう，特別なタグや属性が HTML3.2 に導入され，デザイン的な要素 を指定できるようになった (HTML4.01 Transitional でも使える)： font タグ：文字のデザインを指定する 1 例： <font face=”ＭＳ ゴシック” color=”red” size=”2”>お知らせ</font> center タグ：要素を中央に配置する 例： <center><p>英語学科のページへようこそ！</p></center> align 属性：要素を {左：中央：右} に配置する 例： <p align=”center”>英語学科のページへようこそ！</p> • • しかし，このようなデザイン志向のタグが HTML のテクニックとして急速に広まった結果， 文字の大きさやデザインが指定できない <h1> や <p> といったタグの代わりに <font> を 使うことが推奨されるようになってしまった (教科書 p.104 も参照) 2。また，コンテンツを ページ内に上手に配置するために <br> を何度も使うなど，HTML 文書のデザインのために だけタグを濫用する習慣ができてしまった。 そもそも，Web ページは，文章を一定のタグを使って規則化し，構造化して表現するのがそ の目的だった。そこで，HTML では文書の構造 文書の構造のみを記述し，文書のレイアウトは HTML 文書の構造 から切り離し， 「スタイルシート スタイルシート」という別のしくみで扱おうというアイディアが生まれた。 スタイルシート いくつかのスタイルシートが実用化されているが，現在，最も応用が進んでいるのが「カス ケーディング・スタイルシート」(Cascading Style Sheet, CSS)である。 CSS を使ってレイアウトを分離する利点は，Web ページのデザインの修正が簡単になること である。<font> タグや align 属性を使う方法では，テキストを同じデザインにするために， 同じタグを何百箇所にも張らなければならない。また，内容をちょっと変更しようとするだ けで，そのタグを修正することになってしまう。CSS を使うと，1 箇所にそのページで使う スタイルを記述しておけばよく，スタイルの修正も 1 箇所だけで済む。 1 「ＭＳ ゴシック」のフォント名の「ＭＳ」 「ゴシック」は全角， 「ＭＳ」と「ゴシック」の間のスペ ースは半角である。全角・半角を間違うとうまくフォントが使われないので注意。 2 Adobe GoLive5.0 という Web ページ作成ツールのマニュアルには，フォントサイズに関して「段 落スタイル [h1 などのこと] … でテキストを書式設定してヘッダを作成しないで下さい。ページレイ アウトが崩れる可能性があります」(p.124) というページデザインのガイドラインが載っている。h1 などの代わりに font タグを使え，ということらしい。教科書 p.101—106 とは正反対の記述である。 1/8 授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/ 2002/11/11 • 第 5 回資料 ただし，CSS にも欠点がある。最も重大なのは，CSS のサポートが WWW ブラウザによっ てまちまちであることである。従って，自分が使っているブラウザでたまたまうまく表示さ れているとしても，他の人が使うブラウザで正しく表現される保証がない。現時点で， 現時点で，CSS1 現時点で， を完全にサポートしているブラウザはない。課題作品でスタイルシートを使うときには，少 を完全にサポートしているブラウザはない。 なくとも大学の PC にインストールされている Internet Explorer5.5 と Netscape Navigator 4.7 で表示してみて，ページがどちらを使っても問題なく閲覧できることを確認する必要があ る (２つのブラウザで，かなり表示が異なって感じられることに驚くはずだ)。 ※ ブラウザのスタイルシートのサポート状況については，バージョン間の違いを含めた諸ブ ラウザの詳細なチェックリストのサイト (URL: http://www.webreview.com/style/) が 参考になる (英語ページ)。 ※ 特に，大学のパソコンにインストールされている Netscape4.7 は，スタイルシートのサポ ートが不完全である。重大な例：line-height プロパティのバグ (参考資料 1 枚目参照)； border プロパティのバグ (参考資料 261 ページ参照) • CSS は HTML と同様，WWW コンソーシアム(W3C)によって策定，勧告された規格で，最 新バージョンは Cascading Style Sheet, Level2 (CSS2) である。しかし，現在のところ最も 普及し，またブラウザのサポートが充実しているのはその前に勧告された Level1 (CSS1) で ある。CSS1 が視覚的レイアウトに絞ったコンパクトな設計になっているのに対し，CSS2 は音声や印刷媒体など多くの用途やメディアを考慮に入れ，テキストのレイアウトもさらに 細かく指定ができるように拡張されている。CSS1 の内容は，CSS2 にもそのまま取り入れ られているので，まずは CSS1 に触れ，スタイルシートの利用方法を理解しよう。 ※ Cascading Style Sheets, level 1 (W3C 勧告) URL: http://www.w3.org/TR/CSS1 ※ CSS の文法チェックをオンラインでおこなうサービスを，W3C がおこなっている。 「W3C CSS 検証サービス」URL: http://jigsaw.w3.org/css-validator/ 2. スタイルの記述 (教科書 p.56—59) CSS の指定を記述する場所は，(1) style 属性を使う方法，(2) <style>タグ タグを使う方法，(3)スタイルシ 属性 タグ ートを外部ファイルとして作成し，HTML 文書でファイルを指定する方法，の３つがある。 重要： 重要：CSS を使う場合には，head 要素に meta タグを記述し，CSS を使うことを宣言する。 <meta http-equiv="Content-Style-Type" content="text/css"> CSS では，スタイルの指定に， 1. スタイルを指定する場所を表す「セレクタ」 2. スタイルの種類を指定する「プロパティ」 3. スタイルの指定内容を表す「値」 という 3 つの情報を使う。CSS1 のプロパティと，その値の詳細は，参考資料や各自のリファレンスを 参考にすること。 2.1. スタイルを指定したいタグに，style=”スタイル指定 スタイル指定” スタイル指定 という形で記述する (インライン方式) 例： <h1 style=”text-align: center”>自己紹介</h1> ※ h1 要素を中央揃えにする 2/8 2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」 • • • ページ内の特定の部分にスタイルを指定したい場合，この方法を用いる。align 属性 (例：<h1 align=”center”>) のような従来のスタイル指定と同じ感覚で使える。 「スタイル指定」部には，スタイルの種類 (プロパティ プロパティ) 値を半角のコロン「:」で区切 プロパティ とその値 って指定する。style=”text-align: center” の場合， text-align がテキストの配置を表すプロ パティで，その値が center (中央) である。 複数のスタイルを同時に指定したいときには，半角のセミコロン「;」で区切る。 例： <h1 style=”text-align: center; font-size: large; color: green”>自己紹介</h1> ※ h1 要素を中央揃えにし，文字を大きくし，色を緑にする 2.2. head 要素の中に <style> タグを使ってスタイルを記述する (埋め込み embed 方式) • • §2.1. の style 属性を用いる方法では，同じスタイルを複数の場所で使いたい場合でも，指 定したい全ての箇所にいちいち style 属性を記述する必要がある。同じスタイルを適用する場 合は，スタイルを一括して記述すると便利である。 スタイルを一括して記述する主な方法として，まず，HTML 文書の head 要素 (<head> … </head>) の間に，style 要素 (<style> … </style>) として記述する方法がある。 ※ <style>タグには CSS であることを明示する type 属性をつける。 <style type=”text/css”> <html> <head> … <meta http-equiv="Content-Style-Type" content="text/css"> <style type=”text/css”> … ここにスタイルの指定を書く </style> </head> <body> … </body> • style 要素には，スタイルを指定したい場所 (セレクタ セレクタ) セレクタ ごとに，スタイルを記述する。 スタイルを記述する書式： セレクタ { プロパティ : 値 } セレクタプロパティと 値はコロン (:) で区切り，中括弧 { … } で囲む h1 { text-align: center } ※ h1 要素を中央揃えにする プロパティと値のペアは，セミコロン (;) で区切って複数並べることができる。 h1 { text-align: center; font-size: large; color: green } ※ h1 要素を中央揃えにし，文字を大きく，色を緑にする 複数のセレクタに同じスタイルを指定することができる。 h1, h2, h3 { text-align: center; font-size: large; color: green } ※ h1, h2, h3 要素を中央揃えにし，文字を大きく，色を緑にする 3/8 授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/ 2002/11/11 第 5 回資料 スタイル指定は複数一度におこなうことができる。また，同じセレクタに複数回スタ イルを指定することもできる。 body { color: black; background: #99FF99 } h1, h2, h3 { color: green } h1 { text-align: center; font-size: x-large } h2, h3 { text-align: left; font-size: large } p { font-size: medium } address { font-style: smaller; text-align: right; font-size: 9pt; color: green } CSS のコメントは /* と */ の間に書く。HTML のコメントの書き方 (<!-- と --> の間に書く) とは異なることに注意。 body { color: black; background: #99FF99 } /* 背景は明るい緑 */ • 注意：スタイルシートに対応していないブラウザでは，スタイルの指定がそのままブラウザ で表示されてしまうので，スタイル指定部分は全体をコメントアウトしておく。 例： <head> <meta http-equiv="Content-type" content="text/html; ... <meta http-equiv="Content-Style-Type" content="text/css"> <title>自己紹介</title> <style type=”text/css”> <!-body { color: black; background: #99FF99 } h1, h2, h3 { color: green } h1 { text-align: center; font-size: x-large } h2, h3 { text-align: left; font-size: large } p { font-size: medium } address { font-style: smaller; text-align: right; font-size: 9pt; color: green } --> </style> </head> 2.3. 外部スタイルシートファイルを作成し，HTML 文書にリンクさせる (リンク方式) • §2.3. では，HTML 文書内に style 要素を置き，一括して同じスタイルを指定する方法を紹 介した。一括してスタイルを指定するもう一つの方法は，HTML 文書とは別にスタイルシー トを記述したファイルを作成し，HTML 文書をそのファイルにリンクさせることである。 トを記述したファイルを作成し， 文書をそのファイルにリンクさせる スタイルシートの内容は，css という専用の拡張子 (第 1 回資料§2.2.1.) をつけて保 存する。例えば，sample.css という名前で以下の内容を保存したとする (§2.2. で <style> タグを使う際に必須のコメント <!-- --> は不要)。 body { color: black; background: #99FF99 } h1, h2, h3 { color: green } h1 { text-align: center; font-size: x-large } h2, h3 { text-align: left; font-size: large } p { font-size: medium } address { font-style: smaller; text-align: right; font-size: 9pt; color: green } 4/8 2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」 以下のような link タグを使って sample.css を利用するためのリンクを作る。これ タグ で，スタイルの指定を HTML 文書に適用することができる。 <head> <meta http-equiv="Content-type" content="text/html; ... <meta http-equiv="Content-Style-Type" content="text/css"> <title>自己紹介</title> <link rel=”stylesheet” type=”text/css” href=”sample.css”> </head> ※ sample.css と HTML 文書が同じフォルダにある場合。スタイルシートファイル が別のフォルダにある場合は，スタイルシートファイルを正しく参照させる必 要がある (第 4 回資料§1. 参照)。 • 外部スタイルシートファイルを作成し，link タグを使ってリンクする方法の最大の利点は， スタイルシートファイルを複数の HTML 文書で共通に使えるということである。 これにより， 文書で共通に使える スタイルシートのファイルを変更するだけで，全てのページのスタイルを一度に変更できる ようになる。 3. スタイルシート利用のコツ 3.1. 要素にクラス名をつけ，スタイルを使い分ける (教科書 p.59—61) 例えば，メモとして書いた p 要素だけを，他の p 要素よりも小さめに表示したいとする。§2.2, 2.3. の方法で一括表示する場合，p { font-size: smaller } とすると，困ったことに全ての p 要素 が小さい文字になってしまう。<p style="font-size: smaller"> と style 属性を使う方法もあ るが，メモが HTML 文書のあちこちにある場合，全ての箇所に style 属性を書かなければいけない。 そこで，小さめに表示したい p 要素に，あらかじめ class 属性を使って名前をつけ，他の p 要素と区 属性 別することができる。 <p>ここは，普通のテキストです。</p> <p class="note">ここは，メモです。小さく表示します。</p> note というクラス名がついている p だけにスタイルを指定するには，CSS を以下のように記述する。 p.note { font-size: smaller } これで，class=”note”がついている p 要素の文字だけを小さめにすることができる。 また，タグの名前を省略すると，そのクラス名をつけた要素全てにそのスタイルが適用される。 .note { font-size: smaller; background-color: #FFFF99; color: #669900 } ※ class=”note” というクラス属性をもつ要素は小さ目の文字に黄色の背景，文字色は緑になる このようにスタイルを指定しておくと，異なる要素に note というクラス名をつけ，同じスタイルを適 用することが可能になる (§3.2.の例を参照)。 5/8 授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/ 2002/11/11 第 5 回資料 3.2. div 要素と span 要素を使いこなす • • HTML には，特にスタイルの指定を目的にした汎用的な要素として，ブロックレベル要素 div とインラインレベル要素の span を用意している。 div は，他のブロックレベル要素を含むことができ，また div の中に div を入れ子にし て使うことも可能である。span も他のインライン要素と併用したり，複数の span 要 素を入れ子にして使うことができる。 div と span に class 属性をつけて使うことで，スタイルの使い分けがより柔軟にできる。 class 属性の値には，ひと目で何に対するスタイルであるかが分かるように分かりやすい名前 をつけるとよい。例えば，目次として利用する部分に <div class=”mokuji”> のように mokuji というクラス名をつけ，スタイルシートでスタイルを記述すると，以下のようになる。 div.mokuji { background-image: url(back.gif); margin: 5pt, 10%, 5pt, 10% } ※ 目次の部分は，上下 5 ポイント，左右 10％の余白をとり，HTML 文書と同じフォルダに ある back.gif という画像を背景に表示させる。 <h1>エジプト紹介</h1> <div class=”mokuji”> <h2>目次</h2> <ul> <li>エジプトってどこにある？</li> <li>エジプトの主要都市と観光地</li> <li>エジプトおすすめリンク</li> <ul> </div> <hr> <h2>エジプトってどこにある？</h2> エジプト紹介 目次 • エジプトってどこにある？ • エジプト主要都市と観光地 • エジプトおすすめリンク エジプトってどこにある？ 同様に，以下はテキスト中に挿入するメモを <span class=”memo”> と memo というクラ ス名をつけてマークアップし，スタイルシートでメモにふさわしいスタイルを指定する例。 span.memo { font-size: smaller; color: #663300; background: #CCFF99 } ※ インラインのメモは，文字を小さめ，薄い黄色の背景色にあずき色のテキストで表示 <p>エジプトの国旗は，上から赤，白，黒の 三色で，中央にワシのエンブレムが入ってい ます。<span class=”memo”>[エンブレムのデ ザインや配色は，旗によって若干異なるそう です]</span></p> エジプトの国旗は，上から赤，白，黒の三色で， 中央にワシのエンブレムが入っています。[ エンブ レムのデザインや配色は，旗によって若干異なるそうです] レムのデザインや配色は，旗によって若干異なるそうです] ◆応用例：例えば欧文だけフォントを変えたい，といった場合，class の名前のみスタイルを登録 しておき(§3.1.)，span や div などを使ってフォントを切り替えることができる。例えば， <h2 class=”en” lang=”en”>My Favorite Novels</h2> <p>私は英語でムーミンを読むのが好きです。シリーズで一番好きなのは，何といっても <span class=”en” lang=”en”><i>Moominpappa at Sea</i></span> (『ムーミンパパ海へ行く』) で すね。</p> 6/8 2002 年度情報処理演習Ｂ「マルチメディアウェブページ作成」 とマークアップしておき，スタイルシートを以下のように記述すると，class=”en” というクラ ス属性があるテキスト (この場合は h2 要素と span 要素) が Comic Sans MS フォントで表示さ れる (ただし，Netscape4.7 ではフォントがうまく切り替わらない)。 .en { font-family: “Comic Sans MS”, sans-serif } My Favorite Novels 私は英語でムーミンを読むのが好きです。シリーズで一番好きなのは，何といっても Moominpappa at Sea (『ムーミンパパ海へ行く』) ですね。 3.3. スタイルシートの呼び出し方法の使い分け：カスケード 統一したテーマのサイトを作る場合には，見栄えをできるだけ統一するのが望ましい。そこで，一般 的なスタイルをまとめて外部スタイルシート (§2.3.) に記述しておき，各 HTML 文書で link タグを 使って呼び出す。その上で，特定のページだけで使うスタイルや，臨時に使いたいスタイルを，ペー ジ内の head 要素に <style> タグを使って指定したり (§2.2.) ，タグに直接 style 属性を使って記述 する (§2.1.)。こうすると，サイト内の全てのページの基本的なスタイルを一括管理することができる。 このように，スタイルを指定する場所が複数あるので，同じ要素に対して複数の場所でスタイルを指 定することが可能である。この場合に，どれが「より重要か」を判断して実際のスタイルを決める仕 組みを「継承 (カスケード)」cascade といい，CSS (Cascading Style Sheet) の名前の由来となってい る。原則として，より限定的に用いられているスタイル指定ほど，優先される。 スタイルが適用される要素内で直接指定されたスタイル 高 ― 優 先度 ― 低 <p style=“font-size: 10pt; color=red”> head要素内で指定されたスタイル <style><!-- p { color: black } --></style> 外部スタイルシート <link rel=“stylesheet” type=“text/css” href=“mystyle.css”> ユーザの指定スタイル ブラウザの標準スタイル 3.4. CSS1 で指定できる属性の種類 (参考資料参照) • • • • 7/8 フォントに関する指定 (教科書第 3 章も参照) 色，背景の指定 テキスト単位の指定 「ボックス」の設定： 授業 URL: http://www.fl.reitaku-u.ac.jp/~schiba/2002web/ 2002/11/11 第 5 回資料 ボックスの例 padding (内容と枠の間の詰め物) padding-top margin-right 要素の内容 margin (隣のボックスと枠との隙間) border-right border (枠) • その他：リストのスタイルなど 8/8
© Copyright 2024 Paperzz
