ヘッダ内でcssを適用する際

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
jaljal

ヘッダ内でcssを適用する際

#1

投稿記事 by jaljal » 6年前

ヘッダ内でdivにcssを指定する際に、
あるdivのクラスの構成を、div.oneclass{~}
{}内に記述しますよね?この時に、~内に、divの要素にクラスが指定されたpがある場合、
~内にp#onep{~}(id)やp.onep{~}(class)とcssを適用しても反映されないのは何故ですか?
独立して、p#onep{~}と書くと適用されます。
divの要素でも、cssを指定するときは、親ブロックとインラインは独立してるんでしょうか?

アバター
nullptr
記事: 239
登録日時: 8年前

Re: ヘッダ内でcssを適用する際

#2

投稿記事 by nullptr » 6年前

オフトピック
もうこの掲示板なんでもありだな…

そもそも{}の前に指定するのは「セレクタ」と呼ばれるものであり、{}内に指定されたスタイルを適用する範囲を指定するものです。
{}内にはスタイルを記述するのであって、そこにp#onep{~}(id)やp.onep{~}(class)などといった他のセレクタを含める事はできないし、する必要もありません。

おそらくセレクタの使い方を理解されていないのだと思います。親ブロックとインラインなどという用語はCSSには存在しません。

セレクタの記法はたくさんありますが、例として「div.oneclassの子孫要素のp#onepの適用するスタイル」を指定する場合、

コード:

div.oneclass p#onep{
    適用するスタイル
}
です。

「CSS セレクタ」と検索して勉強して下さい。
 
 
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
?
Is the は :
order C++? ✜
     糸冬   
  ――――――――
  制作・著作 NHK
 
 

jaljal

Re: ヘッダ内でcssを適用する際

#3

投稿記事 by jaljal » 6年前

つまり、入れ子関係にあっても、head内では別々にcssを指定しなければいけないということでしょうか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: ヘッダ内でcssを適用する際

#4

投稿記事 by softya(ソフト屋) » 6年前

問題の有る具体例を書いて下さい。
ちなみにidに関しては、html内において1回しか登場してはいけません。
オフトピック
一応、htmlなら問題なしじゃなかいと。株とかの話をされても困りますが。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
nullptr
記事: 239
登録日時: 8年前

Re: ヘッダ内でcssを適用する際

#5

投稿記事 by nullptr » 6年前

jaljal さんが書きました:つまり、入れ子関係にあっても、head内では別々にcssを指定しなければいけないということでしょうか?
そうです。面倒くさいと思うかもしれませんが、セレクタで実現されるのは入れ子だけでなく隣接要素や直下要素、n番目の要素など豊富です。つまり入れ子構文より柔軟な選択が可能になります。
また、スタイルの指定はstyle属性とhead内のstyleタグ以外に、外部のCSSファイルにする方法もあります。外部ファイルでも同じ記述方法です。

ソフト屋さんが書いていますが、IDは重複が許されないものです。ですのでdiv.oneclass p#onepという指定は実際は冗長なものです。
ID指定の場合、#onepとだけ指定するのが最も正しく、また最も高速に動作します。
 
 
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
?
Is the は :
order C++? ✜
     糸冬   
  ――――――――
  制作・著作 NHK
 
 

jaljal

Re: ヘッダ内でcssを適用する際

#6

投稿記事 by jaljal » 6年前

コード:

ヘッダ
div.abc{
p#children{text-indent: 3em}
}
ヘッダ

ボディー
<div class="parents">
<p>こんにちは</p>
<p id="children">子供です。</p>
</div>
ボディー

アバター
nullptr
記事: 239
登録日時: 8年前

Re: ヘッダ内でcssを適用する際

#7

投稿記事 by nullptr » 6年前

コード:

<html>
    <head>
        <style>
            #children{
                text-indent: 3em;
            }
        </style>
    </head>
    <body>
        <div class="parents">
            <p>こんにちは</p>
            <p id="children">子供です。</p>
        </div>
    </body>
</html>
 
 
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
?
Is the は :
order C++? ✜
     糸冬   
  ――――――――
  制作・著作 NHK
 
 

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: ヘッダ内でcssを適用する際

#8

投稿記事 by softya(ソフト屋) » 6年前

classのabcがそもそも無いのと、css自体のブロック入れ子構造と言うのは出来ましたっけ?
こう思うになった元ネタサイトがあったら教えて下さい。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

jaljal

Re: ヘッダ内でcssを適用する際

#9

投稿記事 by jaljal » 6年前

すいません、abc→parentsに訂正です。

jaljal

Re: ヘッダ内でcssを適用する際

#10

投稿記事 by jaljal » 6年前

コード:

<html>
    <head>
        <style>
            #children{
                text-indent: 3em;
            }
        </style>
    </head>
    <body>
        <div class="parents">
            <p>こんにちは</p>
            <p id="children">子供です。</p>
        </div>

       <div class="parents2">
            <p>こんにちは</p>
            <p id="children2">子供だよ。</p>
        </div>
    </body>
</html>
[code/]


こういう場合も#一個で大丈夫なんですか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: ヘッダ内でcssを適用する際

#11

投稿記事 by softya(ソフト屋) » 6年前

プレビューで確認して下さいね。

コード:

[code/]
ではなく[/code]です。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
nullptr
記事: 239
登録日時: 8年前

Re: ヘッダ内でcssを適用する際

#12

投稿記事 by nullptr » 6年前

先述の通り入れ子構造は出来ません。
その場合は、#children2もスタイルを個別に記述します。もし2つに同じスタイルを指定したいのなら、

コード:

<html>
    <head>
        <style>
            .Children{
                text-indent: 3em;
            }
        </style>
    </head>
    <body>
        <div class="Parents">
            <p>こんにちは</p>
            <p id="children" class="Children">子供です。</p>
        </div>

        <div class="Parents2">
            <p>こんにちは</p>
            <p id="children2" class="Children">子供だよ。</p>
        </div>
    </body>
</html>
とするのはどうでしょうか。
 
 
✜ で C ご ✜
: す + 注 :
¦ か + 文 ¦
?
Is the は :
order C++? ✜
     糸冬   
  ――――――――
  制作・著作 NHK
 
 

jaljal

Re: ヘッダ内でcssを適用する際

#13

投稿記事 by jaljal » 6年前

しんなづきさん、ありがとうございました。
スッキリしました。
それで何とかいけそうです。

アバター
milfeulle
記事: 47
登録日時: 6年前
住所: マリーランド
連絡を取る:

蛇足ながら…

#14

投稿記事 by milfeulle » 6年前

解決なさっているそうなのでよいのかもしれませんが、念のため補足しておきます。

> ヘッダ内でdivにcssを指定する際に、
head要素内でなくてもCSSは書けます。外部ファイルにしても同じです。

> あるdivのクラスの構成を、div.oneclass{~}
> {}内に記述しますよね
“divのクラス"というよりも、「div要素のうち、class属性がoneclassであるもの」ですね。

>~内にp#onep{~}(id)やp.onep{~}(class)とcssを適用しても反映されないのは何故ですか?
> 独立して、p#onep{~}と書くと適用されます。
> divの要素でも、cssを指定するときは、親ブロックとインラインは独立してるんでしょうか?
ご質問は要素Xがあって、その要素X内に子供要素Cが含まれるとき、CSSでどう書いたらいいか? ということですよね。

ルール
  • CSS(大文字です)では、{ から }のなかに宣言「プロパティ:値」を0個以上並べることができます。それ以外は書けません。区切りは;を使います。最後のものだけ省略できます。
  • セレクタ { 宣言(複数) }のようにセレクタを{}の前に書きます。セレクタはCSSを適用する要素を限定するためのルールです。
  • セレクタはさまざまな構文がありますが、そのうち1つはスペースで区切ってある親の子孫要素であることを指定するものがあります。
A B { }

は、BがAの孫(BがAの中にある)であるときにCSSを適用する構文です。

以上のルールによりjaljalさんが求めるCSS, CSSは、

コード:

div.oneclass { クラス属性oneclassを持つdivに適用するCSS }
div.oneclass p.childlen { divの子孫の内、クラス属性childlenを持つp要素に適用するCSS }

コード:

<div class="oneclass">
<p class="childlen"></p>
</div>
となるでしょう。もそも同じchildlenでも親のdiv要素のクラス属性によってCSSを変えたい場合も

コード:

div.oneclass { クラス属性oneclassを持つdivに適用するCSS }
div.oneclass p.childlen { CSSa }
div.anotherclass p.childlen { CSSb }
と簡単に指定できます。皆さんも仰っているとおり、class属性は複数の実態を表す抽象的な総称です。何回でも使い回せます。id属性はその要素をファイル内で一意に特定するための名称です。1回しか使えません。childlen(複数)なんてidはあんまりよろしくないかと……。

versionが古いですが、正しい知識を得たい人の爲のCSS2リファレンスなどに詳しく書かれていますので、これに限らず「自分の中の独自ルール」を持たないで「定められたルールだけ」を参照して頂けると今後も疑問が減るかもしれません。即ち、“とcssを適用しても反映されないのは何故ですか”ではなく「~の理由により(~と書かれているので)反映されるはずですが、反映されないのはなぜですか」まで突き詰められるといいと思います! (私もまだまだですが……)
ζ*'ヮ')ζプログラミングはみんなで奏でるシンフォニー

閉鎖

“C言語何でも質問掲示板” へ戻る