★ ホームページを作ってみよう
�� ★
ス タ イ ル シ ー ト （ＣＳＳ）の 定 義 方 法 |
管理人が勉強するためのページです
よかったら参考にしてね♪ ★ ホームページを作ってみよう
�� ★
お 知 ら せ ・・・ 07/11/18 ページの一番下から、表のＴＯＰの行へジャンプするようにしてみました。。ＣＳＳのお勉強とは関係ないんだけど (^ー^ゞ
※ ＨＴＭＬの本を参考にしています
|
内 容 |
ポイント |
|
|
このページでは、スタイルシートとして適用するための、定義方法（記述の仕方）を勉強しています
※ 「 定 義 」とは？ （Ｙａｈｏｏ！辞書で調べました） ≪ 物事の意味・内容を他と区別できるように、言葉で明確に限定すること。 「敬語の用法を―する」 ≫ → （引用） 「スタイルシートの定義方法」とは、スタイルシートとして反映させるための内容（タグ）を記述（指定）する方法、ということになります 管理人は「定義」の意味がよく理解できていなかったので、調べてみました・・・ 恥ずかしいっす (^_^ゞ |
||
|
ス タ イ ル 定 義 |
ＳＴＹＬＥ 定義 の 基 本 形 ・・・ ｛ Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ ｝ |
「 ｛ 」 左中括弧 「 ｝ 」 右中括弧 「 ： 」 コロン 「 ； 」 セミコロン 「 ． 」 ピリオド 「 ， 」 カンマ |
|
★ スタイルシートファイル （定義ファイル）の中身の記述 |
要 素 タ グ ｛ Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ ｝ ↑ ※ 要素タグの他に、キーワード、「要素 ．キーワード」を指定する |
|
|
◆ 要 素 （ タ グ ） ごとに スタイルを定義
|
要素（タグ）ごとに、スタイルを定義する方法
別ファイルとして作成した「スタイルシートファイル（拡張子 ．ｃｓｓ）」（定義ファイル）の中での指定や、ヘッダー情報としての＜ ＳＴＹＬＥ ＞タグの中で指定する方法です
例えば、＜Ｐ＞や＜ＤＩＶ＞などの具体的な要素タグに「＜」や「＞」を付けず その後にスタイル定義｛ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ｝を記述して指定します
要 素 タ グ （具体的なタグ） ｛ Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ ｝
|
★ この指定をしておけば、そのページ内で指定した要素タグを使った場合、自動的にそのスタイルが適用されるようになります |
|
◆ 同 じ 要 素 タ グ に 複 数 のスタイルを定義 （ 要素タグ ＋ キーワード ）
|
同じ要素タグに対して個々のキーワードを付けて設定し、複数のスタイルを指定
要 素 タ グ ．キ ー ワ ー ド ｛ Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ ｝
※ キーワードは、スタイルの名前という考え方で、任意に決めます
例えば、＜Ｐ＞や＜ＤＩＶ＞などの具体的な要素タグに「＜」や「＞」を付けず その後にピリオド「．」を付けてキーワードを続けて記述し、その後に スタイル定義｛ＰＲＯＰＥＲＴＹ ： ＶＡＬＵＥ｝を記述して指定します
※ 上記の記述を、＜ＨＥＡＤ＞と＜／ＨＥＡＤ＞の間に配置して 本文（＜ＢＯＤＹ＞）に反映させます
|
|
|
◎ 適 用 方 法
|
上記のスタイルを適用する方法 （同じ要素タグに複数のスタイルを適用する）
下記のタグを本文（＜ＢＯＤＹ＞）に記述して、上記のスタイルを反映させます
＜ 要 素 タ グ Ｃ Ｌ Ａ Ｓ Ｓ ＝ ” キーワード ”＞ 〜 ＜ ／ 要 素 タ グ ＞
|
|
|
◆ 複数の要素タグに スタイルを定義 （ キーワード で指定 ）
|
要素（タグ）を限定しないで、複数の要素に適用させる方法
．キ ー ワ ー ド ｛ Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ ｝
※ 「 ．」（ピリオド）の後ろにキーワードを指定し スタイル定義を続けます
※ 上記の記述を、＜ＨＥＡＤ＞と＜／ＨＥＡＤ＞の間に配置して 本文（＜ＢＯＤＹ＞）に反映させます
|
|
|
◎ 適 用 方 法 |
上記のスタイルを適用する方法 （同じ要素タグに複数のスタイルを適用する）
下記のタグを本文（＜ＢＯＤＹ＞）に記述して、上記のスタイルを反映させます
＜ 要 素 タ グ Ｃ Ｌ Ａ Ｓ Ｓ ＝ ” キーワード ”＞ 〜 ＜ ／ 要 素 タ グ ＞
|
|
|
◆ 同じスタイルを指定する 複数の要素タグをまとめて スタイルを定義 （ タグをグループ化する ） |
同じスタイルを指定する複数の要素タグを、まとめてグループ化して定義する方法
要 素 タ グ ， 要 素 タ グ ，・・・・ ｛ Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ ｝
※ それぞれの要素タグを、「 ，」（カンマ）で区切って記述し その後ろにスタイル定義を続けて記述します
※ 上記の記述を、＜ＨＥＡＤ＞と＜／ＨＥＡＤ＞の間に配置して 本文（＜ＢＯＤＹ＞）に反映させます
|
「 ｛ 」 左中括弧 「 ｝ 」 右中括弧 「 ： 」 コロン 「 ， 」 カンマ
★ この指定をしておけば、そのページ内で指定した要素タグを使った場合、自動的にそのスタイルが適用されるようになります |
|
|