◆第六章◆使えるスタイルシート

---

１：スタイルシートとは？

• スタイルシートとは？
• 賢いスタイルシート活用

２：スタイルシートの基本

• スタイルシート適用法
• 「どこに」「どういう効果」の書き方
• タグ名を使わない記入方法
• よく使う記入例

３：文章を読みやすくさせるには

• 注意すること
• 文章を読みやすくさせるには

４：枠線を使って強調する

５：リンクの文字色設定

★スタイルシートとは？★

スタイルシートとは、ＨＴＭＬ文書などに追加記述でレイアウトを定義するマークアップ言語です。 平たく言えばＨＴＭＬなどのタグ名に様々なレイアウト効果をまとめて付け加えることができます。また、言い換えれば、自分で好きなレイアウトタグが作れるというわけです。現在は、ＨＴＭＬなどで文章を製作し、スタイルシートでレイアウトする という流れになってます。しかし、古いブラウザ（ＩＥ３、ＮＮ４.７）ではスタイルシートをサポートしきれていないため全てのレイアウトをスタイルシートで記述してしまうと 殺風景なサイトになってしまいます。また、最新のブラウザ（ＮＮ７.１など）でしか対応していないスタイルシートの宣言も多々あるので困ったものです。

★賢いスタイルシート活用★

一度ホームページを完成させます。そこでスタイルシートを使いより見やすいホームページにします。そうすることによりスタイルシートが未対応のブラウザでも レイアウトが崩れて見にくくなることはないでしょう。ＩＥをお使いの方はＮＮ７.１をダウンロード（無料）して両方で見比べながらスタイルシートを記述していくと良いでしょう。

ＮＮ７.１ダウンロードサイトへ

★スタイルシートの適用方法★

スタイルシートの適用方法には、三通りあります。方法は、以下の通りです。

• 1つのファイルにスタイルシート適用。
  最も一般的な使い方です。

  ＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− この間に「どこに」「どうゆう効果」を書く −−＞ ＜／ＳＴＹＬＥ＞

  これをＨＴＭＬ文書の＜ＨＥＡＤ＞〜＜/ＨＥＡＤ＞間に記入します。

• 複数のファイルにスタイルシート適用。
  まずは、スタイルシート専用のファイルを作ります。拡張子は.cssにして下さい。そのファイルに「どこに」「どうゆう効果」を書くだけです。 頭にＨＴＭＬをつけるとか＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞をつけるとか余計なことは一切必要ありません。
  次に、適用したいＨＴＭＬ文書の＜ＨＥＡＤ＞〜＜/ＨＥＡＤ＞間に
  
  ＜ＬＩＮＫ　ＲＥＬ＝"ｓｔｙｌｅｓｈｅｅｔ"　ｔｙｐｅ＝"ｔｅｘｔ／ｃｓｓ"　ｈｒｅｆ＝"ファイル名"＞
  を記入するだけです。
• 部分的にスタイルシート適用。
  適用したい部分に
  ＜タグ名　Ｓｔｙｌｅ＝「どういう効果」＞〜＜/タグ名＞
  で挟むだけです。

★「どこに」「どういう効果」の書き方★

例えば、

＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− Ｈ１（どこに）｛ｃｏｌｏｒ（何を）：ｒｅｄ（どうしたいか）；｝（どういう効果） −−＞ ＜／ＳＴＹＬＥ＞

と、記入すると本文中のＨ１タグに挟まれた文字列は色が赤になります。
「どこに」のあとに中括弧 { } を付け、「どういう効果」は、その中に『何を』をまず書き、その後に : (コロン)をつけ、次に『どうしたいか』を書き、最後に ; (セミコロン)をつけます。 したいことがいくつかあるときは、順番に書いていくだけです。 記入時の大文字・小文字の区別はありません。ＨＴＭＬ文書のように自分に見やすく書くことができます。ただし、全角スペースは記入しないようにしましょう。

専門用語で呼ぶと、「どこに」をセレクタと呼びます。「どんな効果」を宣言と呼びます。『何を』を属性と呼びます。『どうしたいか』を値と呼びます。

★タグ名を使わない記入方法★

例えば、

＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− .aka｛ｃｏｌｏｒ：ｒｅｄ；｝ −−＞ ＜／ＳＴＹＬＥ＞

と記述して と本文中に記述すると「あいうえお」がＨ１タグの効果を受けなおかつ赤文字になります。
この方法をクラス分けと言います。
.aka｛ｃｏｌｏｒ：ｒｅｄ；｝の.akaの部分は自分にわかりやすい名前を付けてください。ただし「.」（ドット）は必ずつけます。

★よく使う記入例★

例えば、

＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− .aka｛ｃｏｌｏｒ：ｒｅｄ；｝ −−＞ ＜／ＳＴＹＬＥ＞

と記入し＜Ｄｉｖ＞か＜Ｓｐａｎ＞でＣｌａｓｓをつけて効果を適用させるやりかたをよく使います。 ＜Ｄｉｖ＞と＜Ｓｐａｎ＞は範囲指定のタグでそれ自体に意味はありません。スタイルシートやａｌｉｇｎ属性で位置を指定したりするのに使います。
＜Ｄｉｖ＞＜Ｓｐａｎ＞の違いは以下の通りです。わかりやすいように背景の色を変える宣言にしてます。

タグ	こう書くと	こうなる
＜Ｄｉｖ＞	＜ＨＴＭＬ＞ ＜ＨＥＡＤ＞ ＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− ．ｄｉｖ｛ｂａｃｋｇｒｏｕｎｄ−ｃｏｌｏｒ：ａｑｕａ；｝ −−＞ ＜／ＳＴＹＬＥ＞ ＜／ＨＥＡＤ＞ ＜ＢＯＤＹ＞ 前後に改行が＜Ｄｉｖ　Ｃｌａｓｓ＝"ｄｉｖ"＞入り行全体に＜／Ｄｉｖ＞効果をもたらします。 ＜／ＢＯＤＹ＞ ＜／ＨＴＭＬ＞	前後に改行が 入り行全体に 効果をもたらします。
＜Ｓｐａｎ＞	＜ＨＴＭＬ＞ ＜ＨＥＡＤ＞ ＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− ．ｓｐａｎ｛ｂａｃｋｇｒｏｕｎｄ−ｃｏｌｏｒ：ａｑｕａ；｝ −−＞ ＜／ＳＴＹＬＥ＞ ＜／ＨＥＡＤ＞ ＜ＢＯＤＹ＞ タグで挟まれた＜Ｓｐａｎ　Ｃｌａｓｓ＝"ｓｐａｎ"＞部分だけに＜／Ｓｐａｎ＞効果をもたらします。 ＜／ＢＯＤＹ＞ ＜／ＨＴＭＬ＞	タグで挟まれた部分だけに効果をもたらします。

★注意すること★

本題に入る前にサイズ指定に関して注意することを以下に述べます。

• サイズ指定を使うときには、必ず単位をつけます。
• 相対値を使っておくと利用している人が、好きなサイズに変更することができます。
• 絶対値を使うとこのようなことはできませんが、レイアウトが崩れる心配は減ります。

サイズ指定には、主に以下の単位があります。

• ｉｎ・インチ　１ｉｎ＝２５．４ｍｍ（絶対指定）
• ｃｍ・センチメートル（絶対指定）
• ｍｍ・ミリメートル（絶対指定）
• ｐｔ・ポイント　１ｐｔ＝１／７２ｉｎ （絶対指定）
• ％・パーセント（相対指定）
• ｐｘ・ピクセル＝画面の１ドット（相対指定）

★文章を読みやすくさせるには★

• 文章の行の間隔をあける
  文章の行と行の間をあけることにより文章が読みやすくなりなす。
  宣言は、

  ｛ｌｉｎｅ−ｈｅｉｇｈｔ：値；｝

  です。 ページ全体に効果をつけるには、

  ＜ＨＴＭＬ＞ ＜ＨＥＡＤ＞ ＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞ ＜！−− .abc｛ｌｉｎｅ−ｈｅｉｇｈｔ：値；｝ −−＞ ＜／ＳＴＹＬＥ＞ ＜／ＨＥＡＤ＞ ＜ＢＯＤＹ＞ ＜Ｄｉｖ　Ｃｌａｓｓ＝"ａｂｃ"＞ ここには本文 ＜／Ｄｉｖ＞ ＜／ＢＯＤＹ＞ ＜／ＨＴＭＬ＞

  または、
  

  ＜ＨＴＭＬ＞ ＜ＨＥＡＤ＞ ＜／ＨＥＡＤ＞ ＜ＢＯＤＹ＞ ＜Ｄｉｖ　Ｓｔｙｌｅ＝"ｌｉｎｅ−ｈｅｉｇｈｔ：値；"＞ ここには本文 ＜／Ｄｉｖ＞ ＜／ＢＯＤＹ＞ ＜／ＨＴＭＬ＞

  でも効果は同じです。
  意味がわからない方は、「２：スタイルシートの基本」と照らし合わせてお読み下さい。意味がわかれば、後は宣言を覚えていくだけです。

• ウィンドウの幅を固定する
  固定することにより一行の文字数が限定され流し読みしやすくなります。
  宣言は、

  ｛ｗｉｄｔｈ：値；｝

  です。

• 文字の色を変える
  宣言は、

  ｛ｃｏｌｏｒ：色の値；｝

  です。便利な使い方としては、＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞＜！−−Ｂ｛ｃｏｌｏｒ：ｒｅｄ；｝−−＞＜／ＳＴＹＬＥ＞ と記述しておけば本文中で使った＜Ｂ＞タグで囲んだ文字列全てが太字で赤色になります。

枠線や背景を使うことにより他の文章との差別化をします。＜Ｈ１＞タグなどとの組み合わせでタイトルに使うこともできますし、見出しに使うこともできます。

• 枠線で文章を囲む
  重要な部分を枠で囲んだりして他の文章との差別化をします。 宣言と表示は以下の通りです。

  border：dotted；	border：dashed；	border：solid；	border：double；
  border：groove；	border：ridge；	border：inset；	border：outset；

• 枠線の太さ、色、形状
  一度に枠線の太さ、色、形状を指定することができます。

  ｛ｂｏｒｄｅｒ：３ｐｘ　ｒｅｄ　ｉｎｓｅｔ｝

  と、値を半角スペースで区切って記入します。

• 背景をつける
  宣言は、

  ｛ｂａｃｋｇｒｏｕｎｄ−ｃｏｌｏｒ：ｒｅｄ；｝

  です。
  文字に背景をつけるには、「よく使う記入例」に例があります。
• 枠や背景と文章の間の余白指定をする
  余白指定して文章を読みやすくさせます。
  宣言は、

  ｛ｐａｄｄｉｎｇ：値；｝

  です。また、値を：２ｐｘ　５ｐｘ　２ｐｘ　５ｐｘ；と指定すると：上　右　下　左；それぞれの余白を指定することができます。

• 枠や背景の外の余白指定をする
  間接的に枠や背景の長さを調節できます。枠、背景のバランスを整えます。
  宣言は、

  ｛ｍａｒｇｉｎ：値；｝

  です。また、値を：２ｐｘ　５ｐｘ　２ｐｘ　５ｐｘ；と指定すると：上　右　下　左；それぞれの余白を指定することができます。

リンクの文字色設定は、以下の通りです。

ａ：ｌｉｎｋ｛ｃｏｌｏｒ：色指定；ｔｅｘｔ−ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；｝ ａ：ｖｉｓｉｔｅｄ｛ｃｏｌｏｒ：色指定；ｔｅｘｔ−ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；｝ ａ：ｈｏｖｅｒ｛ｃｏｌｏｒ：色指定；ｔｅｘｔ−ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ；｝

を＜ＳＴＹＬＥ　ＴＹＰＥ＝"ｔｅｘｔ／ｃｓｓ"＞＜！−−−−＞＜／ＳＴＹＬＥ＞間に記入するだけで本文中の＜Ａ＞タグ全てに指定されます。
※ａ：ｌｉｎｋのように「：」で区切ったセレクタを定義済みクラスといいますが現在、 実際に使えるのはこの例ぐらいなので今は、深い意味は考えなくてもいいでしょう。

セレクタ（ＨＴＭＬタグ）の説明

• ｌｉｎｋが通常時です。
• ｖｉｓｉｔｅｄがクリック済み時です。
• ｈｏｖｅｒがポイント時です。

属性の説明

• ｔｅｘｔ−ｄｅｃｏｒａｔｉｏｎがテキストの装飾

値の説明

• ｎｏｎｅが装飾なしです。（標準）
• ｕｎｄｅｒｌｉｎｅが下線です。

---