サポート » 使い方全般 » # とcontentの意味あいは?(style.css)

  • 解決済 WP_manabu

    (@wp_manabu)


    げんざい、ブログの文字を統一した大きさにするため、Style.cssファイルに、以下のような記述をしています。

    P{
    font-size:16px;
    }

    これで、うまくいっているのですが、グーグルの検索で以下のような記述をみつけました。

    #content p {
    font-size:16px;
    }

    ためしに、こちらを記述してみても、同様にうまくいくようです。

    両者のちがいはなんでしょうか。

    #とcontentを、pの前につけることで、ちがう意味あいになるのでしょうか。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • Honda

    (@rocketmartue)

    A:

    P{
    font-size:16px;
    }

    の場合は、全ての p 要素に対してfont-size:16px;が適用されます。

    B:

    #content p {
    font-size:16px;
    }

    の場合、id="content"の中の p 要素に対してfont-size:16px;が適用されます。

    <div id="content">
      <p>フォントサイズ16pxが適用される。</p>
    </div>
    <p>フォントサイズ16pxが適用されない。</p>

    css 入門
    css 書き方
    等で検索すれば、たくさん情報が出てきますよ。

    • この返信は7年、 3ヶ月前にHondaが編集しました。
    トピック投稿者 WP_manabu

    (@wp_manabu)

    RocketMartueさま

    ご回答、ありがとうございまーす!

    先のメールのいちぶを訂正させてください。
    しつもんが、ややこしくなる感じがしたので、ウソを書いてしまいました。す、すみません。

    先の質問では、以下の記述をグーグルの検索で見つけたと書きました。

    #content p {
    font-size:16px;
    }

    じつは、この記述は、げんざい採用しているテーマに関連したところから見つけた記述でした。

    ちょっと冗長になってしまいますが、ご容赦ください。

    たぶんテーマをアップロードしたからだとおもうのですが、
    ふと気づいたら、ダッシュボード > 外観 の中に、いつのまにか「CSSカスタマイズ」という項目ができていまして。

    そこには、(使っている)テーマの何種類かのカスタマイズ例が出ています。

    「本文の文字サイズを大きくする」では、

    #content p {
    font-size:16px;
    }

    というふうに例示されています。

    でも、これは(ご指摘のとおり)そのブログページなり、その固定ページなりに、

    <div id=”content”>
    <p>フォントサイズ16pxが適用される。</p>
    </div>
    と記述し、

    #content p {
    font-size:16px;
    }

    とマッチする書き方だとおもっているのです。これは、どうしたものかと。

    じぶんなりに理由をかんがえてみますと、以下のいずれかと思うのですが…

    1)CSSついて、かんちがいしているぞ。
    2)テーマ固有の書き方である
    3)そもそも上記の例示は、WordPressのすべての<P>の文字を対象にするものではなく、
    id属性値と要素をマッチさせる方法を示したものである。
    4)WordPress固有のものである。

    どうも、いろいろなことが、めぐってきて、うまく判断できません。
    乱文にて失礼します。

    CG

    (@du-bist-der-lenz)

    p を使うのは、殆どにおいて記事本文であることから、content が公式ディレクトリに掲載されているテーマでは基本にしているようです。テーマ制作のガイドラインに明示があるかもしれません。
    テーマ固有であまりにも相違があると、WordPress 4.7 にアップされて標準装備となったカスタマイズの『追加CSS』が効果を挙げませんからね。

    一例としての

    #content p {
    font-size:16px;
    }

    にしても汎用例としてで、
    一方ではスタイルシートの最初に、$rembase: 16;を定義して、

    #content p {
    font-size:1rem;
    }

    と「pxってなに?」「CSSがよくわからない?」という向きにも 1.1や0.9と相対的に全体のバランスを取りやすい書き方にも展開しているようです。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    なるほど、なるほど。

    P{
    font-size:16px;
    }

    は、Pを対象に、

    #content p {
    font-size:16px;
    }

    は、記事本文を対象にしている。

    P > #content P

    こういうイメージでしょうか ?

    CG

    (@du-bist-der-lenz)

    P > #content P という概念的イメージでは、その通り、とらえるのでも良いでしょう。
    p.content でも同じ動作をするケースも有りますので。

    でも、しっかり理解しておきたいのは。
    <P>タグはParagraphの略で、<P>~</P>で囲まれた部分がひとつの段落であることを表します。

    構文ルール上、P は Div より前に出られないことから、クラス内でのみの学級委員みたいなものでしょう。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    <p>タグと<div>タグの扱いには、要注意ということですね。ご注意、ありがとうございいまーす。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「# とcontentの意味あいは?(style.css)」には新たに返信することはできません。