★ ホームページを作ってみよう
�� ★
ス タ イ ル シ ー ト （ＣＳＳ）の 適 用 方 法 |
管理人が勉強するためのページです
よかったら参考にしてね♪ ★ ホームページを作ってみよう
�� ★
☆ ＨＴＭＬの本を参考にしています
お 知 ら せ ・・・ 07/09/03 『適用方法 ３』に、個別のタグに定義して部分的にスタイルを適用する方法の実践ページのリンクを張りました♪
☆ 07/11/18 ページの一番下から、表のＴＯＰの行へジャンプするようにしてみました。。ＣＳＳのお勉強とは関係ないんだけど (^ー^ゞ
|
内 容 |
ポイント |
|
|
◆ スタイルシートの適用方法 ◆ ≪別ファイルを作ってページ全体に反映させる方法≫≪ヘッダーに記述して、ページ全体に反映させる方法≫≪タグに直接指定する方法≫の 基本的な３つの方法があり、さらに≪ＳＰＡＮタグで細かく行内レベルで範囲指定≫することもできます |
||
|
◆ 適 用 方 法 １
別ファイルとして作成し ページ全体に適用する方法 |
◆ ページ全体に適用する方法 （ 複数のページに適用する場合）
別ファイルとして作成した「スタイルシートファイル（拡張子 ．ｃｓｓ）」（定義ファイル）を、ヘッダー情報の中に＜ＬＩＮＫ＞タグで指定して、ページ全体に反映させます
何個かのスタイル定義（ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ）したものを 一つのファイルにまとめて、そのファイル名（ＵＲＬ）を指定して反映させる
＜ ＬＩＮＫ ＲＥＬ ＝ ”ｓｔｙｌｅｓｈｅｅｔ ” ＴＹＰＥ ＝ ”ｔｅｘｔ／ｃｓｓ ” ＨＲＥＦ ＝ ”スタイルシートファイルのＵＲＬ ”＞
☆ 実践ページ ⇒ 別ファイル（ＣＳＳファイル）に定義してページ全体に適用する方法
|
この適用方法は、複数のページに利用することができます |
|
★ スタイルシートファイル （定義ファイル）の中身の記述
|
要素タグ ｛ ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ｝
※ 要素タグの他に、キーワード、「要素 ．キーワード」を指定する
|
「｛ 」左中括弧 「 ｝」右中括弧 「：」コロン 「；」セミコロン 「 ．」ピリオド |
|
◆ 適 用 方 法 ２
ヘッダーに記述して ページ全体に適用する方法
|
◆ 指定したページだけに適用する方法 （そのページ全体に適用する場合）
ヘッダー（＜ＨＥＡＤ＞）に記述して、そのページ全体に反映させる
＜ ＳＴＹＬＥ ＴＹＰＥ ＝ ”ｔｅｘｔ／ｃｓｓ ”＞ ＜！−− 要素タグ ｛ ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ｝ −−＞ ＜ ／ ＳＴＹＬＥ＞
※ 上記の記述を、＜ＨＥＡＤ＞と＜／ＨＥＡＤ＞の間に配置して 本文（＜ＢＯＤＹ＞）に反映させます ※ ヘッダーにスタイルを適用するタグを記述した場合 スタイルシート未対応ブラウザで見ると、ソースがそのまま表示されてしまうので スタイルの定義部分を＜！−− −−＞（コメントタグ）ではさみます
☆ 実践ページ ⇒ ヘッダーに定義してページ全体に適用する方法
|
|
|
◆ 適 用 方 法 ３
タグに直接指定して その範囲のみ適用させる方法
|
◆ 指定した範囲のみに適用する方法
ＨＴＭＬの個々のタグに、ＳＴＹＬＥ属性を使って指定し、反映させる
＜ 要素（タグ） ＳＴＹＬＥ ＝ ”ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ スタイルを指定するテキストや画像 ＜ ／ 要素（タグ）＞
※ 要素タグは、＜Ｈ＞（見出しタグ）や＜Ｐ＞（段落指定タグ） ＜ＤＩＶ＞（範囲指定タグ）など、あらゆるタグが指定できます
※ 適用方法１から３までの適用方法を、複数使って指定した場合 この「適用方法 ３」（タグに直接指定）が最優先で指定されます
☆ 実践ページ ⇒ 個別のタグに直接定義して部分的に適用する方法
|
|
|
◎ 適 用 方 法 ４
≪ ＳＰＡＮ ≫タグで 適用範囲を指定する方法 |
◆ ≪ ＳＰＡＮ ≫タグで、適用範囲を指定する方法
＜ ＳＰＡＮ ＳＴＹＬＥ ＝ ”ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ ”＞ スタイルを指定するテキストや画像 ＜ ／ ＳＰＡＮ ＞
※ ＳＰＡＮタグの特徴 前後が改行されない行内レベルでのまとまりの範囲指定ができること ＜Ｐ＞や＜ＤＩＶ＞などが定義する「まとまり」と違い、細かい範囲で指定 する事ができるので、段落の中の一部だけに反映させる場合などに便利です
|
★ ＳＰＡＮ ＜ＤＩＶ＞と同じ「まとまり」を定義するタグで、ＳＴＹＬＥ属性を追加してスタイル設定をするために使われるタグ 単体では、表示には影響しないタグ
|
|
|
|
|
アクセスしないで、ページをのぞいちゃお〜♪
インラインフレーム非対応ブラウザの方は、こちら ⇒ 実践ページ ヘッダーに定義してページ全体に適用する方法
|
|