06年度秋学期情報基礎演習第十二回

スタイルシートの基礎

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

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

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

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

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

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

まずは、授業の教室にログインし、授業用フォルダからスタイルシートのひな形をダウンロードしてください。

style.css

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

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

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

スタイルシートは

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

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

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

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

p {color:#ff0000;}

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

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

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

参考となるサイト：

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

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

body {background-color:#ff0000;}


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

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

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

  • フォントの大きさを変える
    • font-size : 120%;
  • 文字の配置位置を変える
    • text-align : center (right, left);
  • 行間の設定を変える
    • line-height : 150%;

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

p {font-size : 120%;
text-align : center;
line-height : 150%;
}

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

文脈セレクタ

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

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サイトが完成されている