（９）スタイルシートを使ったページ･デザイン

スタイル・シートとは
　もともとHTMLは文書の構造を定義するものとして登場し、その見栄えを整える機能は副次的なものでした。それを補うものとして、HTMLにページをより美しくするためのタグを追加する代わりに、スタイル・シート（Cascading Style Sheet)が考え出され、近年徐々に発展してきました。

　言い換えれば、本来文書の論理構造を記述するHTMLからスタイル指定を分離する」というのがスタイルシートの目的の一つです。

　現在、Internet ExplorerやNetscape Navigatorがこの機運に沿ってスタイル・シート機能への対応を進めていますが、十分な実装や標準化が進んでいないのが現状です。

それでも、このスタイル・シートが普及してきている理由は：

（１）編集するに当たって、HTMLだけでデザインまでこなしてしまうより分かりやすい
（２）HTMLと分けて書けるので、デザインならデザイン、内容なら内容に集中できる
（３）デザインを一つ決めれば、他のHTML文書に簡単に流用できる
（４）スタイルシートでまとめて書いておけば、デザインの変更も楽にできる

といった点が挙げられるからでしょう。
スタイル・シートの利用例
（１） フォントの指定
フォントの書体、太さ、大きさ、色、や行間隔がよりきめ細かく指定できる
（２） 背景の指定
背景の色、背景画、背景画の敷き詰め方、スクロール方法などを指定する
（３） 文章の表示
単語間の間隔、文字間の間隔、下線･上線・取消線・点線等、文章の縦・横方向の位置、均等割付、インデント、禁則処理の強さ、ルビの表示方法などを指定する
（４） 余白と境界線の指定
上下左右の余白、上下左右の境界線、境界線の種類や太さなどをよりきめ細かく指定することが出来る
（５） リストの表示の指定
行頭記号、行頭記号に使用する画像、行頭記号の表示位置を指定する
（６） フィルタ
テキストや画像に陰を付ける、半透明にする、グラデーションをかける、その他の効果をつける
（７） その他
テキストの回りこみ、文書を右から左ひ表示、テーブルの枠線の表示方法、マウスを載せたときのカーソルの形状、入力欄での日本語変換（IME)の動作のON/OFFなどなどの指定
スタイル・シート使用上の注意点
（１） スタイル・シートが利用出来ない環境がある（中でも古いバージョンのNetscapeで)
（２） ブラウザによって動作が異なる（中でも古いバージョンのNetscapeでは対応が不安定)
（３） ページを保存すると見栄えがおかしくなることがある（特に外部スタイル・シートに注意）
スタイル・シートの設定方法には３通りのやり方があります
（１） HTMLのタグの属性としてスタイルを設定する
スタイル属性が記述されているタグにのみ効果が及ぶ局所的なスタイル設定
（２） 内部スタイル・シートとしてスタイルを設定する
HTML頁のヘッダー・セクションにスタイル・シートを定義し、同一頁内の条件が一致する全てのタグに指定されたスタイルが適用される
（３） 外部スタイル・シートとしてスタイルを設定する
HTMLとは別のファイルとして保存されるスタイル・シートで、それを参照している全ての頁の条件が一致している全てのタグに設定しているスタイルが適用される。　HTMLファイルからの参照は<link>タグでなされる。　このスタイル・シートは一つのサイト全体の統一的なデザインには非常に有効的です。
ez-HTMLによる内部スタイル・シートの作り方
① HTMLのタグの属性としてスタイルを設定する方法

左側のファイル階層ペインで編集対象ページをダブルクリックして編集状態にし、サンプルのテキストを入力する。　下の例では「この頁全体のフォント・・・」と入力し、その入力した字句通りに<body>全体のフォント色と背景色を設定する。

その為には、<body>タグの属性入力する時のように”>”の前に半角スペースを入れてから「CSS編集ボタン」（左から１０番目のボタン）をクリックする。すると、CSS編集ダイアログ画面が表示されるので、その上端に表示されるタブからfont-sizeや背景色を設定する。ダイアグラム画面右端の「セッティング」 ボタンをクリックすると、下の例のように指定したStyle（書式）がコーディングされる。
② 内部スタイル・シートとしてスタイルを設定する方法

左側のファイル階層ペインで編集対象ページをダブルクリックして編集状態にし、サンプルのテキストを入力する。

<head>セクションの<title>・・・</title>の次のブランク行の先頭にカーサーをもっていき、メニュー・バーから：
「標準」ー→「スタイルシート」ー→「埋め込みスタイルシート」と選んでいくと；

　　　 <style type="text/css">

　　　<!--

　　　//-->

　　　 </style>

というコードが生成されます。この　<!--　　と　　//-->の間に
　　　　

<style type="text/css">

　　　<!--　　body {font-size: 18px; background-color: #FFFF00;"}

　　　//-->

　　　</style>

のように該当タグと設定したい書式を入力すればよい。

　
③ 外部スタイル・シートとしてスタイルを設定する方法

先ず、外部CSSファイルを新規に作成するには、メニュー・バーから：
「ファイル」ー→「作成タイプを指定して新規作成」ー→「CSS」と選んでいくと；CSS編集画面が表示されます。

この画面に：　body {font-size: 18px; background-color: #FFFF00;"}

のように該当タグと設定したい書式を入力し、「out_common」のような名前を付けて保存すればよい。

次に、特定の編集対象ページから、この外部CSSファイルを参照するには、そのページを編集状態にしておき、<head>セクションの<title>・・・</title>の次のブランク行の先頭にカーサーをもっていき、ツール・ボタンの「外部文書参照」をクリックすると「外部文書参照<link>」ダイアログ画面が表示されます。

そのダイアログ画面で、次のように指定します。

「標準」タグの設定が終わったら、次に「高度」タグで「メディア」を「screen」に指定して、「OK」ボタンをクリックすると、以下のようなコードが<head>セクションの中に生成されて、外部CSSファイルにリンクを付けることが出来ます。

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>タグにCSSを設定する</title>

<link rel="stylesheet" href="out_common.css" type="text/css" media="">

</head>