Context Navigation

ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Version 2 (modified by takai, 13 years ago) (diff)
2.12でのカスタムCSSの説明(メイン)

TOC

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

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

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

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 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でスタイル指定する際に、セレクタとして何を用いればよいのか具体例を挙げて説明します。

ページをセンタリングする

#Container { margin: 0 auto; }

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

#Container { margin-left: auto }

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

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

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

スタイル記述について、開き中括弧の前の部分をセレクタといいます。セレクタの書き方が豊富なために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要素」が対象になります。

Download in other formats:

Plain Text