情報サイト WIZ
スタイルシートの利用
最終更新：
匿名ユーザー
スタイルシートの利用
構造と表現の分離
HTML4の考え方
HTML4(HTML4.0およびHTML4.01)では、構造＝コンテクストの記述 と表現＝ビジュアルデザインの記述 を分離することが推奨されています。
HTMLはコンテクスト、つまりコンテンツの構造を記述するものだとする原理主義の教義にのっとったものです。
fontタグが使えない！
この考え方によれば下のようなHTMLは誤り(言い過ぎ？推奨されない)となります。
将来的に無効になるタグの例
| font | テキストのフォント、サイズ、色等を指定 |
| applet | Javaアプレットの呼び出し |
| center | センター揃え |
| sおよびstrike | 取り消し |
| u | アンダーライン |
将来的に無効になる属性の例
| background | ページの背景 |
| bgcolor | 背景色 |
| align | 配置 top,middle,bottom etc |
| height | テーブルセルの高さ等 |
| width | テーブルセルの幅・罫線の幅等 |
構造と表現を分離するには
将来的に使えないとされているタグや属性を使わずにHTMLを書くために、スタイルシートを利用することが求められています。一説によれば、スタイルシートはHTML自体より早く定義され、ワープロのレイアウト定義に使用されてきたとのことです。XMLでもスタイルシートの利用が推奨されています。
スタイルシートを利用すれば、文書の構造定義であるHTMLと分離して、文書のビジュアルデザインを定義することが可能になります。
スタイルシートの利用
スタイルシートの例
スタイルシートでは
のようにセレクタ(例ではh1タグ)を指定し、宣言と呼ばれる{}の中にプロパティ(例ではcolor)と値(red)をコロン:で区切って記述します。セミコロン;で区切れば複数のプロパティを指定することもできます。
h1タグを、色は赤で、フォントサイズ最大で、左に100ピクセルの空白を入れて表示する
スタイルシートの適用方法
| タグの中に直接書く | インライン方式 | <h1 style="font-size=32pt; color: red"> |
| HEADで定義しておく | エンベッド方式 | <head> <style="text/css"> <!-- h1 {font-size:32pt; color: red} --> </style> |
| 別ファイルで定義する | リンク方式 | <head> <link rel="stylesheet" type="text/css" href="default.css"> |
スタイルシートのメリット
- 複数の文書に一貫したデザインが適用できる
- デザインのメンテナンスが一括で行える(リンク方式で適用した場合)
- HTMLに比べて、細かな設定ができる
- デザイン要素がなくなるためHTMLがスッキリする
スタイルシート 文字
文字プロパティ
| スタイル | 設定方法 | コメント |
|---|---|---|
| フォントの設定 | 特殊な効果が必要な場合以外は使用しない | |
| 文字サイズ | font-size : XXXX | 絶対値指定と相対値指定の二種類あり 要注意 |
| 文字スタイル | font-style : italic / normal | 斜体・標準の指定 |
| 文字の太さ | font-weight : bold / normal | 太字・標準の指定 |
| 文字色 | color : COLOR_NAME or RGB | 色名指定に対応していないブラウザあり、要注意 |
サイズの値
絶対値と相対値
文字サイズの値には、絶対値指定と相対値指定がある。
- 絶対値指定 pt:ポイント px:ピクセル
- 相対値指定 7段階指定(xx-largex-largelargemediumsmallx-smallxx-small)
絶対値で指定するとユーザがブラウザの文字サイズを変更してもサイズが変わらないため、好みの文字サイズで表示できなくなってしまいます。これはWEB原理主義に反するため、相対値で指定することが望ましいと佐藤は考えています。
相対指定には現在の大きさにたいする比率指定もありますが、煩雑なので佐藤は使用していません。
相対値指定時のデフォルトサイズ
現状ブラウザのデフォルトの文字サイズは small となっていますが、HTMLの規格上は medium がデフォルトです。
Netscape6.0のみ標準規格に対応し、mediumがデフォルトサイズとなっています。また、解像度の違いによりマッキントッシュでは、ワンサイズ小さく表示されてしまいます。
| 7 | xx-large | 文字サイズ xx-large | 文字サイズ 36pt |
| 6 | x-large | 文字サイズ x-large | 文字サイズ 24pt |
| 5 | large | 文字サイズ large | 文字サイズ 18pt |
| 4 | medium | 文字サイズ medium | 文字サイズ 13.5pt |
| 3 | small | 文字サイズ small | 文字サイズ 12pt |
| 2 | x-small | 文字サイズ x-small | 文字サイズ 10pt |
| 1 | xxsmall | 文字サイズ xx-small | 文字サイズ 7.5pt |
表示=>文字サイズでサイズを変更すると左の文字はサイズが変わるが、右は変わらない。
色の値
red,navy等の色名による指定もできますが、HTMLの規格で決まっている色名は
Black,Silver,Gray,White,Maroon,Red,Purple,Fuchsia,Green,Lime,Olive,Yellow,Navy,Blue,Teal,Aquaの16色のみとなっています。他の色名はブラウザにより正確に表示できない可能性があるため、上記の16色以外の色は16進で指定することが推奨されています。
| Black #000000 | Silver #C0C0C0 | Gray #808080 | white #FFFFFF | Maroon #800000 | Red # FF0000 | Purple #800080 | Fuchsia #FF00FF |
| Green #008000 | Lime #00FF00 | Olive #808000 | Yellow # FFFF00 | Navy #000080 | Blue # 0000FF | Teal # 008080 | Aqua #00FFFF |
スタイルシート 段落
チョットしたクイズ
Ｑ１．<p>で改行され、１行空白行が入るのはなぜか？
Ｑ２．<br><br> あるいは<p></p> は許されるか？
Ｑ３．下のHTMLは正しいでしょうか？
<body>
<h1>佐藤のJavaサイト</h1>
JavaはC++より優れている
<body>
<p>社員健康順位
<table border=2>
<tr><td>第一位</td><td>佐藤</td></tr>・・・・・・
段落とは？
HTMLではBODY部は段落の集合であるとされています。いくつかの段落が組み合わされてBODY部となります。言い換えると、段落に所属しない要素はHTMLの規約に反していることになります。
ブロックレベルエレメントとインラインレベルエレメント
HTMLのタグは段落を作るタグと段落の中にあるべきタグの二つに分けられています。
ブロックレベルエレメント
段落を作成するタグです。ブロックレベルエレメントには以下のタグがあります。
- p
- h1,h2～h6
- ul,ol,dl
- blockquate
- form
- table
- div
- hr,pre,center
インラインレベルエレメント
段落の中にあるべきタグです。インラインレベルエレメントには以下のタグがあります。
- br
- em,strong
- sub,sup
- a
- img
- input
注意点
- ブロックレベルエレメントの中にブロックレベルエレメントを入れてはいけない
- ブロックレベルエレメントに対するスタイル指定はテキスト文字だけでなく、段落全体に影響する
クイズの答え 二つとも正しくない！
=>「JavaはC++より優れている」点は真実だが、この文がどの段落にも含まれていないので×
=>ブロックレベルエレメントであるtableタグがブロックレベルエレメントであるpタグの中にあるので×
pタグの使い方
- 基本的に段落ごとにpタグを入れ、段落の最後は/pで閉じる
- 見出しタグ(h1,h2等)やテーブルタグ、divタグの前にはpタグは不用、これらのタグの前では/pで段落を終らせる
- 空のpタグは許されない ブラウザで無視されることになるはず
スタイルシート 余白(パディングとマージン)
余白
タグの中身=コンテンツはパディングとマージンという余白で取り囲まれている。
パディングはコンテンツを内側で取り囲み、マージンはコンテンツを外側で取り囲む。
コンテンツに対するスタイルはパディングまで影響する。
上の段落 パディング:0 マージン:0
コンテンツ パディング:20px マージン:10px 背景色:アクア
枠の内側の水色の部分がコンテンツとパディング、枠の外側の上下の段落との間の空白の部分がマージン
下の段落 パディング:0 マージン:0
設定
| 上下左右一括指定 | magin:20px |
| 上指定 | magin-top:20px |
| 下指定 | magin-bottom:20px |
| 左指定 | magin-left:20px |
| 右指定 | magin-right:20px |
| 上はmargin指定の例、パディングの場合は padding:20px等々となる | |
| 注意！ 段落間の間隔は上下の段落のマージンのうち大きい方で決まる | |
行の横幅
ページ全体をテーブルで囲み、テーブルにwidthを設定して、行の横幅を制御するというような技は使わないこと。スタイルシートの width プロパティで設定します。とは言え、行の横幅を決めてしまうことはWEB原理主義に反する行為なので、好ましくないと考える人たちが存在することも知っておきましょう。誰もが1024×768の画面で、最大化してWEBを見ているとは限りません。ユーザの表示したいサイズに合せて柔軟に表示できるようなページを作ることが大切です。
preタグも画面のサイズに影響を与えます。乱用は避けるべきでしょう。
行揃え
text-align プロパティを使う。値は left,center,right
等間隔にそろえるには text-align:justify を使う。日本語では text-jutify:distribute もトライしてみる。
行の間隔
ブラウザのデフォルトは英文用の行間になっています。日本語では見ずらいという人もいます。行間を広げたい場合は、line-height プロパティを使用し、値はポイントによる絶対指定か現在の文字サイズに対する倍率指定で行います。ただ、いたずらに行間を広げると、間延びしたページになってしまいます。文章の構成を考え、段落に分割して、読みやすいページにする必要があります。
行の幅:300 中央揃え 行間２倍 の例
<divstyle="margin-left:20px;margin-right:10px;margin-top:15px;margin-bottom:10px;
line-height:2;text-align:center; width:300">
</div>
行の幅:300 中央揃え 行間２倍 で実際に設定した例
スタイルシート イメージと文字の関係
イメージと文字揃え
文字の回り込み
いずれも省略しました。誰か補足願います。
スタイルシート 罫線
罫線を引く
border-(top/bottom/left/right-)style : solid / none ;
罫線に色をつける
border-(...-)color : COLOR_NAME;
罫線の太さを変える
罫線の太さ ?? border-(...-)width : XXpx ;
スタイルシート 印刷
改ページ指定
page-break-before : always ;
メディア別指定
省略
スタイルシート タグ以外への設定
タグ以外へのスタイルの設定
設定したいスタイルに対応するタグがある場合はタグに対してスタイルを設定できますが、適当なタグがない場合は、DIV や SPAN にスタイルを書くことになります。前述の通り、DIVはブロックレベルエレメントなので段落を作成したい場合に記述し、SPANはインラインレベルエレメントなので段落中に記述することになります。
実例．この先の内容は赤で書きたいと思った
複数の要素にまとめてスタイルを設定したいときは、クラス名を使用します。リンク方式もしくはエンベッド方式で、クラスに対してスタイルを書き、HTML中にクラス名を入れます。
.sample {color:blue;font-weight:bold}
この先は<spanclass="sample">サンプルクラス</span>です
佐藤の標準スタイルシート
ページの構成の考え方
文 ＜ 段落 ＜ 章 ＜ ページ
文の集まりを段落、段落の集まりを章、章の集まりをページとする。
上記の主たる構成以外に、署名・コメント・強調・ナビゲーション・履歴に対してスタイルを設定する。
ページ
bodyタグにページ全体の本文エリアのマージンを設定する。(見出しは本文エリアからマイナスのマージンを取る)
body{ text-align: left; // テキスト左揃え margin-left: 30px; // 左マージン 30ピクセル margin-right: 5px // 右マージン 5ピクセル}
ページ見出し
タグ h1 を使用する。CSSの設定により文字サイズはx-large、中央揃えとなる。
h1{ text-align : center; // テキスト中央揃え font-size : x-large // 文字サイズ x-large}
章見出し
タグ h2 を使用する。CSSの設定により、左端に濃い色が、背景に薄い色がつき、強調して表示される。
h2{ margin-left : -20px; // bodyのマージンより左に 20ピクセル background-color: #e7e7e7; // 背景色 薄い灰色 border-color: #000080; // 境界線色 Navy border-top-style: none; // 境界線 上 なし border-bottom-style: none; // 境界線 下 なし border-right-style: none; // 境界線 右 なし border-left-style: solid; // 境界線 左 線 border-left-width : 13px; // 境界線 左 太さ 13ピクセル font-size : large; // 文字サイズ large padding: 3px // 内側余白 3ピクセル}
段落見出し
タグ h3 を使用する。CSSの設定により、テキストエリアより左に出て表示される。
h3{ margin-left : -10px; // bodyのマージンより左に 10ピクセル margin-bottom : 1px; // 段落の外側下余白 1ピクセル font-size : medium // 文字サイズ medium}
段落小見出し
必要により段落に小見出しをつける。小見出しはタグ h4 を使用する。CSSの設定により、テキストエリアより左に出て表示される。
margin-left : -5px; // bodyのマージンより左に 5ピクセル
margin-bottom : 1px; // 段落の外側下余白 1ピクセル
font-size : small // 文字サイズ small テキストと同じ
}
署名
WEB上のページは必ずしもホームページから順に読まれるとは限らない。検索エンジン等により、中間のページが最初に読まれるかもしれない。したがって各ページには、著者の署名が必須となる。このためHTMLは特別に署名用のアドレスタグを持っている。通常は署名として、ホームページのURLとメールアドレスが右詰めで書かれることが多い。
padding-right : 20px; // 右余白 20ピクセル
text-align : right // 右詰め
}
コメント
ページの最初のコメントや文中のコメントなど、地の文と区別して記述したい場合に使用する。HTMLにはコメント用の特別のタグがないため、div や span をコメントクラスとして使用する。
padding-left : 20px; // 左余白 20ピクセル
padding-right : 20px; // 右余白 20ピクセル
padding-top : 5px; // 上余白 5ピクセル
padding-bottom : 5px; // 下余白 5ピクセル
background-color : #FFF8DC // 背景色 薄い肌色 cornsilk
}
プログラムソース
クラス名としてsourceを指定するとプログラムソースとして背景に色を付けて表示できます。
フッター
ページの最後であることを明示するために入れる水平線hrのマージンを設定する。
.footer{ margin-left : -20px}
履歴
いつ書かれ、いつ修正加筆されたかわからないようなページの情報は読む価値がないともいえる。WEBページには更新情報は必須である。
現在は特別なスタイルは設定していないが、将来の備えて履歴にもクラスを入れておくこと。
