スタイルシートでホームページをレイアウト　
　　　　　　　　　 　　　　　　　　　　　　　

 　　スタイルシートの利用　

■スタイルシートの種類 ：
　　　スタイルシートの役割・・・・・・・ブラウザ側に影響されない 文字・画像寸法での表示を出来るようにする
　　　　　　　　　　　　　　　　　　　　　 文字サイズ・行間・文字間などを ポイントやｍｍ単位で指定する
　　　３種のスタイルシート
　　　　　外部スタイルシート・・・・・・ 外部ファイル（拡張子＊．ｃｓｓ）にスタイルを登録しておき 各所から利用する
　　　　　　　　　　　　　　　　　　　　　 ホームページのスタイルを 統一することができる
　　　　　埋め込みスタイルシート・・・ページ内ＨＴＭＬヘッダー部分にスタイルを設定しておき ページ内各所で利用
　　　　　　　　　　　　　　　　　　　　　 ページ内で同じタグを使用している部分の段落を 統一することが出来る
　　　　　インラインスタイルシート・・・ＨＴＭＬタグの属性（ｓｔｙｌｅ属性）として スタイルを記述する
　　　　　　　　　　　　　　　　　　　　　 個々の要素に対して 正確にスタイルを指定することが出来る
　　　スタイルシートを併用する
　　　ブラウザへの対応・・・・・・・・・・Ｗ３Ｃの提案するＨＴＭＬ４．０提唱規格になっているが 各種ブラウザで確認要す
　　　　　　　　　　　　　　　　　　　　　 未対応のブラウザがある場合には ＨＴＭＬ文の中にコメントしておくとよい


　　埋め込みスタイルシートの利用 （ページ全体へ）　
■埋め込みスタイルシートのコマンド設定 ：
　　　コマンドによる設定・・・・・・・・・【書式】→〔スタイル〕→『スタイルシートマネジャー：追加』→『スタイルの設定』
　　　　　　　　　　　　　　　　　　　　　 →（現在部分のＨＴＭＬタグが表示される）→《ＨＴＭＬタグによる設定》を選択
　　　　　　　　　　　　　　　　　　　　　 この＜タグ＞で ページ内全体にスタイルが設定される
　　　パネル内設定
　　　＜フォント＞パネル内設定・・・ 《使用するフォント》 《フォントサイズ》 《文字飾り》 《文字の属性》 《寸法単位》
　　　＜カラーと背景＞ 〜　・・・・・・
　　　＜文字のレイアウト＞ 〜 ・・・・
　　　＜レイアウト＞ 〜 ・・・・・・・・・・
　　　＜リスト＞ 〜 ・・・・・・・・・・・・・
　　　＜位置＞ 〜 ・・・・・・・・・・・・・・
　　　＜その他＞ 〜 ・・・・・・・・・・・・
　　　ＨＴＭＬによる設定・・・・・・・・・ <HEAD>〜ここに記述する〜</HEAD>
■埋め込みスタイルシートのＨＴＭＬ設定 ：
　　　<HEAD> 〜 </HEAD>内に・・・下の例は ＜Ｈ３＞タグのスタイルを設定している ・ ページ全体に適用される
　　　　　<Style>〜</Style>・・・・・・<HEAD>タグ内で <Style>タグをもって定義する
　　　　　　　　　　　　　　　　　　　　　 <HEAD> 〜 〜
　　　　　　　　　　　　　　　　　　　　　 　　<Style>
　　　　　　　　　　　　　　　　　　　　　 　　　　<!コメント：適用外ブラウザなどについて 注意事項>
　　　　　　　　　　　　　　　　　　　　　 　　　　H3{
　　　　　　　　　　　　　　　　　　　　　 　　　　font-size:18pt;
　　　　　　　　　　　　　　　　　　　　　 　　　　font-family:HG正楷書体-PRO,serif;
　　　　　　　　　　　　　　　　　　　　　 　　　　color:gray;
　　　　　　　　　　　　　　　　　　　　　 　　　　〜
　　　　　　　　　　　　　　　　　　　　　 　　　　}
　　　　　　　　　　　　　　　　　　　　　 　　</Style>
　　　　　　　　　　　　　　　　　　　　　 </HEAD>


　　インラインスタイルシートの利用 （ページ内一部へ）　
■インラインスタイルシート ：
　　　コマンドによる設定・・・・・・・・・・（スタイルを設定したい部分を選択）→【書式】→〔文字装飾〕→〔スタイル〕
　　　　　　　　　　　　　　　　　　　　　 　　　　または　　（当該部選択）→｛右クリック：属性変更｝→〔スタイル〕
　　　ＨＴＭＬによる設定・・・・・・・・・・ 行間内において <Span>タグによって 定義する
　　　　　<Span>〜</Span>・・・・・・・ <P>
　　　　　　　　　　　　　　　　　　　　　 　　<Span>
　　　　　　　　　　　　　　　　　　　　　 　　　　<!コメント：適用外ブラウザなどについて 注意事項>
　　　　　　　　　　　　　　　　　　　　　 　　　　H3{
　　　　　　　　　　　　　　　　　　　　　 　　　　font-size:18pt;
　　　　　　　　　　　　　　　　　　　　　 　　　　font-family:HG正楷書体-PRO,serif;
　　　　　　　　　　　　　　　　　　　　　 　　　　color:gray>
　　　　　　　　　　　　　　　　　　　　　 　　　　〜文章〜　　（設定のスタイルが適用される）
　　　　　　　　　　　　　　　　　　　　　 　　　　}
　　　　　　　　　　　　　　　　　　　　　 　　</Span>
　　　　　　　　　　　　　　　　　　　　　　 </P>
　　　他のＨＴＭＬタグと併用の例・・・・<H1>〜タグ段落内に対して スタイルシートを適用する場合
　　　　　　　　　　　　　　　　　　　　　 　<H1>
　　　　　　　　　　　　　　　　　　　　　　 　　<Span style="font-size:18pt;"> 〜文章〜　</Span>
　　　　　　　　　　　　　　　　　　　　　 　</H1>
■タグを限定しないスタイルの設定 ：
　　　クラススタイルの設定・・・・・・・・・範囲でスタイルを設定する場合に 利用する
　　　　　コマンドによる設定・・・・・・・・・【書式】→〔スタイル〕→『スタイルシートマネジャー：追加』→『スタイルの設定』
　　　　　　　　　　　　　　　　　　　　　　　→（現在部分のＨＴＭＬタグが表示される）→《クラスにスタイルを設定》を選択
　　　　　　　　　　　　　　　　　　　　　　　→《クラス名》を入れる
　　　　　作成クラスの適用・・・・・・・・・｛右クリック:詳細属性｝→《クラス名》を入れる
　　　　　ＨＴＭＬによるクラス設定・・・・ <H3 class="Red"> 〜文章〜 </H3>
　　　ＩＤ使用でのスタイル設定・・・・・・ページ内の一個所にしか適用しないときの設定方法 ・ 設定内容を残しておく
　　　　　コマンドによる設定・・・・・・・・・【書式】→〔スタイル〕→『スタイルシートマネジャー：追加』→『スタイルの設定』
　　　　　　　　　　　　　　　　　　　　　　　→（現在部分のＨＴＭＬタグが表示される）→《ＩＤにスタイルを設定》を選択
　　　　　　　　　　　　　　　　　　　　　　　→《ＩＤ名》を入れる
　　　　　作成ＩＤの適用・・・・・・・・・・・ ｛右クリック:詳細属性｝→《ＩＤ名》を入れる


　　外部スタイルシートの利用　

■スタイルシートファイルの作成 ：
　　　コマンドによる設定
　　　スタイルシートファイルの作成
　　　スタイルの設定
　　　スタイルの追加・完了
　　　ＨＴＭＬによる設定
　　　外部Ｓ．Ｓ．を他ページへ適用
■素材集の外部スタイルシート ：
　　　テストモードで探す
　　　素材集の表示
　　　テストモードへの切替え
　　　お気に入りの適用
　　　保存の方法
　　　サイトにスタイルシートの他方法


　　スタイルシートの編集　

■インラインスタイルシートの編集 ：
　　　設定の確認
　　　設定の変更
　　　設定の解除
■埋め込みスタイルシートの編集 ：
　　　設定の確認
　　　設定の変更
　　　設定の解除
■外部スタイルシートの編集 ：
　　　設定の確認
　　　設定の変更
　　　設定の解除