wiki:pne-xhtmlcss/tips
 ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 4 (modified by takai, 13 years ago) (diff)

スタイル指定の例を記述

TOC

OpenPNE2.12でできる見栄えの変更

OpenPNE2.12では、テンプレートのマークアップとスタイル指定を見直しています。
ここでは、カスタムCSSでどのように見栄えが変更できるかを紹介します。

マークアップの見直しでは、各部位にクラス(class属性)を与え、パーツ化することを行いました。
この項目のノートページにパーツ化の方針を掲載しています。

あるページのパーツのクラス名は、ページのソースを表示して「parts」などと検索すれば、パーツの構造で示しているようにクラス名が記述されているのでそこから知ることができます。

CSSでどのような指定ができるのかについては、CSSガイド - http://w3g.jp/css/などの解説サイトを参照ください。

スタイル指定の例

カスタムCSSでスタイル指定する際に、セレクタとして何を用いればよいのか具体例を挙げて説明します。

全体に背景画像を表示する

body {
        background-image: url(画像のURL);
}
#Body, #Container {
        background-color: transparent;
}

body要素に対して背景画像を指定します。 配色設定から指定できる背景色が"#Body"と"#Container"に適用されているので、背景色を透明に指定します。

全体をセンタリングする

#Container {
        margin: 0 auto;
}

marginプロパティは外側の余白を指定します。 左右のmarginをautoにすることで、ボックスは中央に配置されます。

#Container {
        margin-left: auto;
}

左のmarginだけをautoにすることで、ボックスは右寄せになります。

home系のメインテーブルの見出し部分を変える

home系とは、h_home, f_home, c_home のことです。

#Body .homeMainTable th {
        border-color: #FF0000;
        background-color: #000000;
        color: #FFFFFF;
        font-weight: bold;
}
#Body .homeMainTable tr:first-child th,
#Body .homeMainTable tr.first-child th {
        border-color: #00FF00;
}

"#Body"は詳細度を高めるための記述です。 "homeMainTable"クラスのパーツの中にある、th要素(テーブルの見出しセル)に対するスタイル指定です。

"first-child"と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。

日記やトピック記事の画像をセンタリングする

#Body ul.photo {
        text-align: center;
}
#Body ul.photo li {
        margin: 0 10px;
}

"photo"クラスのul要素に対して、インラインをセンタリングする指定を記述します。 li要素は既存のスタイルで display: inline が指定されています。li要素の左右のmarginを指定して画像の間隔を調整します。

日記は"diaryDetailBox"クラス、トピックは"topicDetailBox"クラスですが、共通の"ul.photo"をセレクタにすることでスタイル指定を共有できます。

特定のページだけのパーツを指定する

あるページのパーツにスタイルを指定したいとき、そのパーツが他のページで使われていた場合、他のページのパーツまでスタイルが適用されてしまいます。

例えば、home系にはメイン写真表示部がありますが、h_homeのメイン写真表示部のみを指定したい場合、次のようにします。

#pc_page_h_home .homePhotoBox .parts {
        background-color: #FFFFCC;
}

セレクタの頭にそのページのIDをつけることで、そのページ以外にはスタイルが適用されないようにします。 ページのIDは、body要素のid属性として与えられています。

OpenPNE2.12のHTML構造

HTMLの構造がどのようになっているかを説明します。

ページの構成

ログイン後のページは大きく3つのレイアウトがあり、各ページはいずれかのレイアウトで構成されています。

  • LayoutA - ホーム、マイページ確認
    • Left : 270px
    • Center : 440px
  • LayoutB - 日記、メッセージ、ランキング
    • Left : 180px
    • Center : 540px
  • LayoutC - あしあと、レビューなど
    • Center : 650px

HTMLは次のような構造になっています。

<body id="pc_page_h_home">
        <div id="Body">
                <div id="Container">
                        <div id="Header">
                                <div id="globalNav"></div>
                                <div id="topBanner"></div>
                        </div>
                        <div class="parts localNav" id="hLocalNav"></div>
                        <div id="LayoutA">
                                <div id="Top">
                                        ナビ下部
                                </div>
                                <div id="Left">
                                        左カラム
                                </div>
                                <div id="Center">
                                        右(中央)カラム
                                </div>
                        </div>
                        <div id="Footer"></div>
                        <div id="sideBanner">
                                サイドバナー
                        </div>
                </div><!-- Container -->
        </div><!-- Body -->
</body>

パーツの構造

ログイン後のページは、主に2重線で囲まれた四角いパーツで構成されています。 パーツについてはパーツの分類を参照ください。

パーツは、ページの構造の中の<div id="Left">や<div id="Center">の中に記述されています。

<div class="dparts パーツクラス名"><div class="parts">
        <div class="partsHeading"><h3>パーツ見出し</h3></div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
</div></div>

<div class="dparts">と<div class="parts">によってパーツの外枠の2重線を表現しています。 1本線あるいは外枠がないパーツも次のような構造になっています。

<div class="parts パーツクラス名">
        <div class="partsHeading"><h3>パーツ見出し</h3></div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
        <div class="xxxxxxxx">パーツの内容</div>
</div>

23.searchResultList(検索結果リスト)を見てみると、次のようなマークアップとなっています。

<div class="dparts searchResultList"><div class="parts">
	<div class="partsHeading"><h3>日記検索結果一覧</h3><p>*** 1件が該当しました。</p></div>

	<div class="pagerRelative">
		<p class="number">1件~1件を表示</p>
	</div>

	<div class="block">
		<div class="ditem"><div class="item"><table><tbody><tr>
		<td rowspan="4" class="photo"><a href="./?m=pc&amp;a=page_fh_diary&amp;target_c_diary_id=5"><img alt="" src="./img.php?filename=skin_no_image.gif&amp;w=76&amp;h=76&amp;m=pc"/></a></td>
		<th>ニックネーム</th><td>ヤマダ (男性)</td>
		</tr><tr>
		<th>タイトル</th><td>example (0)</td>
		</tr><tr>
		<th>本文</th><td>Hello!</td>
		</tr><tr class="operation">
		<th>作成日時</th><td><span class="text">05月29日 15:18</span> <span class="moreInfo"><a href="./?m=pc&amp;a=page_fh_diary&amp;target_c_diary_id=5"><img alt="詳細を見る" src="./skin/default/img/button_shosai.gif"/></a></span></td>
		</tr></tbody></table></div></div>
	</div>

	<div class="pagerRelative">
		<p class="number">1件~1件を表示</p>
	</div>
</div></div>

スタイルの書き方(セレクタの説明)

セレクタ { スタイル宣言 }

スタイル記述について、開き中括弧の前の部分をセレクタといいます。 セレクタの書き方が豊富なためにCSSでは複雑なスタイルの指定ができるようになっています。

ここでは、基本的なセレクタの紹介をします。

タイプセレクタ

h2 { スタイル宣言 }
p { スタイル宣言 }

HTMLの要素をセレクタとしたものです。 全てのh2要素、p要素にスタイルが適用されます。

全称セレクタ(ユニバーサルセレクタ)

* { スタイル宣言 }

アスタリスクをセレクタとしたものです。 全称セレクタは全ての要素を指します。 このように書くと、全ての要素にスタイルが適用されます。

クラスセレクタ

h2.system { スタイル宣言 }
.purpose { スタイル宣言 }

1つ目の記述では、class属性値が"system"のh2要素にスタイルが適用されます。 ピリオドの前にセレクタ、後にクラス名を書きますが、セレクタを省略した場合、全称セレクタを書いたのと同様に扱われます。 2つ目の記述は、*.purposeと同等です。

一意セレクタ(IDセレクタ)

div#Header { スタイル宣言 }
#Footer { スタイル宣言 }

クラスセレクタと同様で、id属性が与えられている要素にスタイルが適用されます。

子孫セレクタ

div.system p { スタイル宣言 }
#LayoutA .homePhotoBox p.text { スタイル宣言 }

セレクタを半角スペースで区切って記述すると、適用する要素を絞ることができます。 1つ目の記述では、class属性値が"system"のdiv要素の中にある、p要素にスタイルが適用されます。

2つ目の記述では、id属性値が"LayoutA"の要素の中にある、class属性値が"homePhotoBox"の要素の中にある、class属性値が"text"のp要素にスタイルが適用されます。

<div id="LayoutA">
        <div class="hogehoge">
                <div class="homePhotoBox">
                        <h2>見出し</h2>
                        <p class="point">100 Point</p>
                        <p class="text">OpenPNE君さん</p>
                </div>
        </div>
</div>

このようなHTML構造であれば『OpenPNE君さん』という部分のp要素のみにスタイルが適用されます。 #LayoutAの中に.homePhotoBoxがあればよいので、class="hogehoge"というdiv要素があるように間に別の要素が存在しても適用されます。

<div id="boxA">
        <p>boxAの子の段落</p>
        <div id="boxB">
                <p>boxAの孫の段落</p>
        </div>
</div>

このようなHTML構造の場合、『boxAの子の段落』だけにスタイルを適用したくても、

#boxA p { スタイル宣言 }

のように記述してしまうと、『boxAの孫の段落』にも適用されてしまいます。

これに関しては次のような「子セレクタ」というものがありますが、一部のブラウザが子セレクタに対応していないという問題があります。

#boxA > p { スタイル宣言 }

代替策として、スタイルを打ち消すような宣言ができる場合は、

#boxA p { スタイル宣言 }
#boxA * p { 上のスタイルの打ち消し }

のように記述することで、子セレクタと同じような結果を得ることができます。

セレクタのグループ化

h2, p { スタイル宣言 }
#LayoutA h2, #LayoutA p { スタイル宣言 }
#LayoutA h2, p { スタイル宣言 }

セレクタをカンマで区切ると、複数の要素をスタイル適用の対象とすることができます。

  • 1つ目の記述は、h2要素とp要素が対象になります。
  • 2つ目の記述は、「#LayoutAの中のh2要素」と「#LayoutAの中のp要素」が対象になります。
  • 3つ目の記述は、「#LayoutAの中のh2要素」と「全てのp要素」が対象になります。

セレクタの詳細度

スタイル指定が重複した場合の扱いについて説明します。

<div id="boxA">
        <div id="boxB">
                <p class="text">テキスト</p>
        </div>
</div>

このようなHTMLに対して、次のようなスタイル指定をすると『テキスト』は何色になるでしょうか。

case1
#boxA p { color: red; }  /* id属性が"boxA"の要素の中にあるp要素 */
p.text { color: blue; }  /* class属性が"text"のp要素 */
case2
p { color: red; }        /* p要素 */
*.text { color: blue; }  /* class属性が"text"の全ての要素 */
case3
p { color: red; }        /* p要素 */
* { color: blue; }       /* 全ての要素 */
case4
#boxB p { color: red; }  /* id属性が"boxB"の要素の中にあるp要素 */
#boxA p { color: blue; } /* id属性が"boxA"の要素の中にあるp要素 */
case5
#boxA { color: red; }    /* id属性が"boxA"の要素 */
p { color: blue; }       /* p要素 */

この答えは詳細度というものによって決められます。 詳細度は個別性や優先度とも呼ばれることがありますが、詳細度が高いものが適用されます。

用いているセレクタに関して、次の値を計算します。

  • a = 一意セレクタの個数
  • b = クラスセレクタの個数(+属性セレクタの個数+擬似クラスの個数)
  • c = タイプセレクタの個数(+擬似要素の個数)

セレクタの詳細度の大小は次のように決まります。

  1. aが多い方が詳細度が高い
  2. aが同じなら、bが多い方が詳細度が高い
  3. a,bが同じなら、cが多い方が詳細度が高い

a,b,cが同じ場合は詳細度では決まりませんが、後に記述されている方が適用されます。

よって、それぞれのcaseの答えは次のようになります。

  • case1 : #boxA p { color: red; } が適用される
  • case2 : *.text { color: blue; } が適用される
  • case3 : p { color: red; } が適用される
  • case4 : 後に記述されている #boxA p { color: blue; } が適用される

case5は詳細度の問題ではなく適用する要素の問題です。 セレクタ"#boxA"に該当するものは、今回の例ではdiv要素です。 親にされた指定よりも自分に直接された指定の方が適用されます。

  • case5 : p { color: blue; } が適用される

OpenPNE2.12では、既存のスタイルの中で重複がいくつか生じています。 そのため、カスタムCSSでは詳細度が高くなるようにスタイルを記述しないと適用されないことがあります。

記述したスタイルの詳細度が、既存のスタイルより低いと思われた場合は以下のように記述してください。

#Body セレクタ { スタイル宣言; }

既存のスタイルの中に、"#Body"セレクタを用いているものがあります。 そのスタイルより詳細度を高める場合は次のようにします。

#Body #Container セレクタ { スタイル宣言; }