１０．スタイルシートとは？

１０．スタイルシートとは？
　　スタイルシートは、HTML言語だけでは、デザイン能力に限界があるので、デザインレベル（表現力）を上げるために、
　 HTMLを拡張するものとして設計されている。HTML言語自体のバージョンをバージョンアップするとサポートされてい
　ないブラウザでは、エラーになるためHTML言語のバージョンアップは難しい。
　　 HTML言語のタグの属性（プロパティ）は、存在しない属性は、無視されることを利用して、この属性に埋め込むことで
　実現している。しかし、ブラウザ自身がスタイルシートやJavascriptなどに対応していないといけない。当然、スタイルシ
　ートを属性に埋め込んで無視されることは、そのブラウザは、スタイルシートがサポートされいないことになる。
　　現在、ほとんどのブラウザではサポートされているが、ブラウザのバージョンによってサポート具合が異なるので
　十分注意する必要がある。

　１）スタイルシートの読み込み方
　　　スタイルシートをホームページで繁栄させるためには、スタイルシートを定義して、その定義を読み込むことで、
　　繁栄させている。
　　 ①任意のタグのｓｔｙｌｅ属性で定義する。（インラインスタイル）
　　　　ＨＴＭＬ言語のタグの属性でｓｔｙｌｅ属性を定義するが、単純な定義であればよいが、複雑な定義であれば、
　　　書くのが大変になる。また、ここで定義されたスタイルシートは、このタグ内だけ有効で再利用ができない。
　　　＜例＞<h1 style="font-size:50pt;color:red">フォントサイズが５０ｐｔで色は赤</h1>

　　 ②ｓｔｙｌｅ要素内で定義する。
　　　　ＨＴＭＬ言語のプログラムの中でｓｔｙｌｅ要素を構成して、そこにスタイルシートを定義する。このことで、
　　　定義したスタイルシートがこのホームページの中だけで再利用することができる。
　　　＜例＞<html>
　　　　　　　 <head>
　　　　　　　 <title>スタイルシート要素内で定義する</title>
　　　　　　　 <style type="text/css">
　　　　　　　 
　　　　　　　 </style>
　　　　　　　 </head>
　　　　　　　 <body>
　　　　　　　スタイルシートは、<head>～</head>の間に定義するのが一般的です。

　　 ③スタイルシートファイル（CSSファイル）を読み込む。
　　　　スタイルシートの定義をファイル化することで、どのホームページからでも再利用することができる。
　　　＜例＞<html>
　　　　　　　 <head>
　　　　　　　 <title>スタイルシート要素内で定義する</title>
　　　　　　　 <link rel="stylesheet" type="text/css" href="s00.css" >
　　　　　　　</head>
　　　　　　　 <body>
　　　　　　　スタイルシートのファイル名の拡張子は、「.css」うを使用します。

　２）スタイルシートの定義のフォーマット
　　　スタイルシートのフォーマットは、以下のようになる。
　　　セレクタ（適用先）｛プロパティ：値｝　・・・プロパティが一個の場合

　　　セレクタ（適用先）｛プロパティ：値；プロパティ：値；・・・｝　・・・　プロパティが複数ある場合

　　　セレクタ（適用先）｛プロパティ：値；　　　　　　　　　　　　　・・・　複数行にわたって書いてもよい。
　　　　　　　　　　　　　　プロパティ：値；
　　　　　　　　　　　　　　プロパティ：値；
　　　　　　　　　　　　　　　　　　｜
　　　　　　　　　　　　　　　　　　｜
　　　　　　　　　　　　　　｝

　　　セレクタ１，セレクタ２，・・・｛・・・・｝　・・・　複数のセレクタに同じスタイルシートを適用する場合
　　　
　３）セレクタの種類
　　　セレクタの種類は、大別とすると５種類ある。
　　 ①基本セレクタ
　　　　 HTML言語の要素（タグ）にスタイルシートを適用する方法であるが、同じ要素にはすべてに適応されてします。
　　　＜フォーマット＞　適用先要素名｛プロパティ：値｝
　　　＜例＞ h1{font-size:50pt}　・・・　h1タグにスタイルシートが適用される。
　　　　　　　　p{color:red}　・・・　pタグにスタイルシートが適用される。
　　　　　　　　*{font-size:50pt}　・・・　すべての要素に適用される。

　　 ②IDセレクタ
　　　　 IDセレクタのIDは、HTML言語の中の属性やセキュリティのかかったところにログインするときのIDと同じ意味を
　　　持っているので、1つのホームページの中に同じIDが存在してはいけません。すべて異なるIDをつける必要があ
　　　ります。しかし、HTML言語レベルでは、チェックしてないようなのでエラーにならないようです。
　　　＜フォーマット＞　適用先要素名＃ID名｛プロパティ：値｝
　　　＜例＞ h1#abc{font-size:50pt}　・・・　<h1 id="abc">　このタグ内で適用される。（これ一回しか使えない。）
　　　　　　　　*#xyz{font-size:50pt}　・・・　<p id="xyz">　すべての要素に対して適用できる。（一回使えば終わり。）
　　　　　　　　「*」は、省略できる。

　　 ③クラスセレクタ
　　　　クラスセレクタもIDセレクタとほぼ同じですが、異なる点は、同じクラス名を何度も使用できる点です。
　　　　クラスセレクタのほうが、IDセレクタより使いやすいのでこちらのほうがよく使われます。
　　　＜フォーマット＞　適用先要素名．クラス名｛プロパティ：値｝
　　　＜例＞ h1.abc{font-size:50pt}　・・・　<h1 class="abc">　h1タグすべてで適用できる。
　　　　　　　　 *.abc{font-size:50pt}　・・・　<p class="abc"> すべての要素に対して適用できる。
　　　　　　　　「*」は、省略できる。

　　 ④疑似クラス
　　　　ハイパーリンクに関するスタイルシート
　　　・ページ全体のリンクを同じスタイルシートにする。
　　　　　 a:link｛・・・｝　リンクする前（キャッシュされていない。）のデフォルトのリンクの状態を定義する。
　　　　　 a:visited｛・・・} 　リンク後（キャッシュされている。）のリンクの状態を定義する。
　　　　　 a:hover｛・・・｝　リンクにポインタがオーバーしたときの状態を定義する。
　　　　　 a:active｛・・・｝　リンクの上でマウスボタンを押している間の状態を定義する。

　　　・特定のクラスが指定されているところだけスタイルシートを適用する。
　　　　　 a.クラス名:link｛・・・｝　リンクする前（キャッシュされていない。）のデフォルトのリンクの状態を定義する。
　　　　　 a.クラス名:visited｛・・・} 　リンク後（キャッシュされている。）のリンクの状態を定義する。
　　　　　 a.クラス名:hover｛・・・｝　リンクにポインタがオーバーしたときの状態を定義する。
　　　　　 a.クラス名:active｛・・・｝　リンクの上でマウスボタンを押している間の状態を定義する。

　　　・特定のクラスが指定された要素に含まれるリンクにスタイルシートを適用する。
　　　　　 .クラス名 a:link｛・・・｝　リンクする前（キャッシュされていない。）のデフォルトのリンクの状態を定義する。
　　　　　 .クラス名 a:visited｛・・・} 　リンク後（キャッシュされている。）のリンクの状態を定義する。
　　　　　 .クラス名 a:hover｛・・・｝　リンクにポインタがオーバーしたときの状態を定義する。
　　　　　 .クラス名 a:active｛・・・｝　リンクの上でマウスボタンを押している間の状態を定義する。

　　 ⑤子孫セレクタ
　　　　適用先を複数指定することができ、親子関係を持つセレクタである。
　　　　＜例＞p i b ｛・・・｝　pタグの中に含まれるｉタグの中に含まれるbタグにスタイルシートが適用される。
　　　　　　　　 #nisi .yama ｛・・・｝　id="nisi"が指定されているタグに含まれるclass="yama"が指定されている
　　　　　　　　　　　　　　　　　　　　タグに適用される。