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

Changes between Version 6 and Version 7 of pne-xhtmlcss/tips


Ignore:
Timestamp:
Jul 3, 2008, 5:33:08 PM (13 years ago)
Author:
takai
Comment:

簡単な内容(説明)に書き換え

Legend:

Unmodified
Added
Removed
Modified
  • pne-xhtmlcss/tips

    v6 v7  
    11[[TOC]]
    22= OpenPNE2.12でできる見栄えの変更 =
    3 OpenPNE2.12では、テンプレートのマークアップとスタイル指定を見直しています。[[br]]
    4 ここでは、カスタムCSSでどのように見栄えが変更できるかを紹介します。
    5 
    6 マークアップの見直しでは、各部位にクラス(class属性)を与え、パーツ化することを行いました。[[br]]
    7 [wiki:pne-xhtmlcss/tips-note この項目のノートページ]にパーツ化の方針を掲載しています。
    8 
    9 あるページのパーツのクラス名は、ページのソースを表示して「parts」などと検索すれば、[wiki:pne-xhtmlcss/tips#パーツの構造 パーツの構造]で示しているようにクラス名が記述されているのでそこから知ることができます。
    10 
    11 CSSでどのような指定ができるのかについては、[http://w3g.jp/css/ CSSガイド - http://w3g.jp/css/]などの解説サイトを参照ください。
     3ここでは、HTMLやCSSに詳しくない方も対象に、OpenPNE2.12で見栄えを変更する方法を説明します。
     4管理画面の デザイン > 配色・CSS変更 の下部にある「カスタムCSS追加」にスタイル指定を追加することで見栄えを変えることができます。
     5
     6{{{
     7#Container {
     8        margin: 0 auto;
     9}
     10}}}
     11この上の記述を追加すると、全体をセンタリングすることができます。
     12
     13{{{
     14#Body .partsHeading {
     15        color: #008000;
     16        background-color: #FFFF00;
     17}
     18}}}
     19この上の記述を追加すると、各パーツの見出し部分の文字色を緑に、背景色を黄にすることができます。
     20
     21以下では、好きなように見栄えを変えるにはどうすればいいのかについて、より詳しい説明をします。
     22
     23== OpenPNE2.10以前との違い ==
     24OpenPNE2.12では、XHTML+CSS化と称してHTMLとCSSを見直しました。
     25
     26見栄えは、『どこ』を『どうする』と記述することで指定することができます。
     27OpenPNE2.10以前では、
     28{{{
     29<p><img src="icon_title_1.gif"><span class="b_b c_00">マイフレンドリスト</span></p>
     30}}}
     31のようにHTMLが記述されており、CSSで「マイフレンドリスト」(=見出し)の部分をスタイル指定の対象としたくても『どこ』と言うことができませんでした。
     32OpenPNE2.12では、
     33{{{
     34<div class="partsHeading"><h3>マイフレンドリスト</h3></div>
     35}}}
     36のように記述しているので見出し部分をスタイル指定の対象としたいときには、「クラス名が "partsHeading" の部分」とCSSで言うことができます。
     37
     38XHTML+CSS化では、HTMLに書かれているスタイル指定や不要なタグを取り除き、構造を示すために適切な要素タグでマークアップしたりクラス名を付ける作業を行いました。
     39CSSで『どこ』と言えるようにHTMLを記述しているので、見栄えに関する指定(スタイル指定)は全てCSSで行うことができます。
     40
     41なお、見栄えに関する指定を全てCSSで行っていることと、HTMLを見直した(書き換えた)ことによって、今までできていた方法で見栄えが変更できなくなっているものがあります。
     42しかしながら、それに対応するスタイル記述を書くことで理想とする見栄えを実現できます。
     43
     44=== 以前の配色設定をOpenPNE2.12で適用する ===
     45HTMLを書き換えたため、管理画面の配色設定で変更できる見栄えがOpenPNE2.10以前と若干異なっています。
     46
     47異なる点は[wiki:pne-xhtmlcss/upgrade#配色設定の変更内容一覧 配色設定の変更内容一覧]に示されています。
     48
     49具体的なスタイル指定の記述は[wiki:pne-xhtmlcss/upgrade/colorcode 2.12からのバージョンで2.10の配色を使用する方法]をご覧ください。
    1250
    1351== スタイル指定の例 ==
    14 カスタムCSSでスタイル指定する際に、セレクタとして何を用いればよいのか具体例を挙げて説明します。
     52追加するスタイル指定の記述の例を紹介します。
     53どんなセレクタを指定すればいいのかについては[#好きな場所の見栄えを変えたいとき 後述]します。
     54
     55始めに、セレクタについて簡単に説明をします。
     56{{{
     57body { スタイル宣言 }
     58.partsHeading { スタイル宣言 }
     59#Container { スタイル宣言 }
     60#Body .homeMainTable th { スタイル宣言 }
     61#Body, #Container { スタイル宣言 }
     62}}}
     63開き中括弧 { の前に body や .partsHeading などと書いてあります。
     64この部分をセレクタといいます。
     65セレクタは、スタイル指定の対象が『どこ』なのかを指します。
     66
     67 * 1行目はセレクタが body です。これは「body要素(bodyタグに囲まれた範囲)」を対象とします。
     68 * 2行目はセレクタが .partsHeading です。これは「クラス名が "partsHeading" の要素」を対象とします。
     69 * 3行目はセレクタが #Container です。これは「ID名が "Container" の要素」を対象とします。
     70 * 4行目はセレクタが #Body .homeMainTable th です。これは「#Body の中の .homeMainTable の中の th 要素」を対象とします。
     71 * 5行目はセレクタが #Body, #Container です。これは「#Body と #Container」を対象とします。
    1572
    1673=== 全体に背景画像を表示する ===
     
    2481}}}
    2582body要素に対して背景画像を指定します。
    26 配色設定から指定できる背景色が"#Body"と"#Container"に適用されているので、背景色を透明に指定します。
    27 
    28 === 全体をセンタリングする ===
     83
     84配色設定から指定できる背景色が #Body と #Container に適用されているので、背景色を透明に指定します。
     85
     86=== 全体をセンタリングする(右揃えにする) ===
    2987{{{
    3088#Container {
     
    3290}
    3391}}}
    34 marginプロパティは外側の余白を指定します。
    3592左右のmarginをautoにすることで、ボックスは中央に配置されます。
    3693{{{
     
    4299
    43100=== home系のメインテーブルの見出し部分を変える ===
    44 home系とは、h_home, f_home, c_home のことです。
     101home系とは、h_home, f_home, c_home のことです。プロフィール確認ページ h_prof にも反映します。
     102
    45103{{{
    46104#Body .homeMainTable th {
     
    55113}
    56114}}}
    57 "#Body"は詳細度を高めるための記述です。
    58 "homeMainTable"クラスのパーツの中にある、th要素(テーブルの見出しセル)に対するスタイル指定です。
    59 
    60 "first-child"と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。
     115homeMainTable クラスのパーツの中にある、th要素(テーブルの見出しセル)に対するスタイル指定です。
     116
     117"first-child" と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。
    61118
    62119=== 日記やトピック記事の画像をセンタリングする ===
     
    69126}
    70127}}}
    71 "photo"クラスのul要素に対して、インラインをセンタリングする指定を記述します。
    72 li要素は既存のスタイルで display: inline が指定されています。li要素の左右のmarginを指定して画像の間隔を調整します。
    73 
    74 日記は"diaryDetailBox"クラス、トピックは"topicDetailBox"クラスですが、共通の"ul.photo"をセレクタにすることでスタイル指定を共有できます。
     128photo クラスのul要素に対して、インラインをセンタリングする指定を記述します。
     129li要素は既存のスタイルで display: inline が指定されています。
     130li要素の左右のmarginを指定して画像の間隔を調整します。
     131
     132日記は diaryDetailBox クラス、トピックは topicDetailBox クラスですが、共通の ul.photo をセレクタにすることでスタイル指定を共有できます。
     133日記記事、トピック記事以外に、同じクラスが使われているイベント記事にも適用されます。
    75134
    76135=== 特定のページだけのパーツを指定する ===
     
    86145ページのIDは、body要素のid属性として与えられています。
    87146
    88 == OpenPNE2.12のHTML構造 ==
    89 HTMLの構造がどのようになっているかを説明します。
    90 
    91 === ページの構成 ===
     147=== LayoutAのカラムを左右逆にする ===
     148LayoutAとは、home系、マイページ確認のページ(のレイアウト)です。
     149{{{
     150#LayoutA #Left {
     151        float: right;
     152}
     153#LayoutA #Center {
     154        float: left;
     155}
     156}}}
     157カラムの位置が左右逆になります。
     158既存のスタイルでは、#Left に left、#Center に right が指定してあります。
     159
     160{{{
     161#LayoutA #Left,
     162#LayoutB #Left {
     163        float: right;
     164}
     165#LayoutA #Center,
     166#LayoutB #Center {
     167        float: left;
     168}
     169}}}
     170LayoutBとは、日記、メッセージ、ランキングなどのページ(のレイアウト)です。
     1712カラムのレイアウトは、LayoutA と LayoutB の2つです。
     172
     173== 好きな場所の見栄えを変えたいとき ==
     174スタイル指定するには、CSSで『どこ』と言えなければなりません。
     175これをセレクタと言いましたが、実際にどのようにセレクタを書けばいいのかを説明します。
     176
     177ある部分を『どこ』と指定したいとき、その部分(パーツ)のクラス名をセレクタにすることで指定できます。
     178
     179その部分のクラス名を知るには、
     180 1. そのページのソースを表示する
     181 2. 該当する部分の文字列を検索する
     182 3. 該当する部分のHTMLに書かれているclass属性値を見る
     183クラス名とはclass属性値のことです。
     184HTMLの構造については、[#ページの構造 ページの構造]、[#パーツの構造 パーツの構造]をご覧ください。
     185
     186OpenPNE2.12では、いくつかのパーツとしてクラス名を付けています。
     187パーツの種類については、[wiki:pne-xhtmlcss/parts パーツリスト]をご覧ください。
     188
     189=== ページの構造 ===
    92190ログイン後のページは大きく3つのレイアウトがあり、各ページはいずれかのレイアウトで構成されています。
    93191 * LayoutA - ホーム、マイページ確認
     
    131229=== パーツの構造 ===
    132230ログイン後のページは、主に2重線で囲まれた四角いパーツで構成されています。
    133 パーツについては[wiki:pne-xhtmlcss/tips-note/#パーツの分類 パーツの分類]を参照ください。
    134231
    135232パーツは、ページの構造の中の<div id="Left">や<div id="Center">の中に記述されています。
     
    154251}}}
    155252
    156 [wiki:pne-xhtmlcss/parts/23 23.searchResultList(検索結果リスト)]を見てみると、次のようなマークアップとなっています。
    157 {{{
    158 <div class="dparts searchResultList"><div class="parts">
    159         <div class="partsHeading"><h3>日記検索結果一覧</h3><p>*** 1件が該当しました。</p></div>
    160 
    161         <div class="pagerRelative">
    162                 <p class="number">1件~1件を表示</p>
    163         </div>
    164 
    165         <div class="block">
    166                 <div class="ditem"><div class="item"><table><tbody><tr>
    167                 <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>
    168                 <th>ニックネーム</th><td>ヤマダ (男性)</td>
    169                 </tr><tr>
    170                 <th>タイトル</th><td>example (0)</td>
    171                 </tr><tr>
    172                 <th>本文</th><td>Hello!</td>
    173                 </tr><tr class="operation">
    174                 <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>
    175                 </tr></tbody></table></div></div>
    176         </div>
    177 
    178         <div class="pagerRelative">
    179                 <p class="number">1件~1件を表示</p>
    180         </div>
    181 </div></div>
    182 }}}
    183 
    184 == スタイルの書き方(セレクタの説明) ==
    185 {{{
    186 セレクタ { スタイル宣言 }
    187 }}}
    188 スタイル記述について、開き中括弧の前の部分をセレクタといいます。
    189 セレクタの書き方が豊富なためにCSSでは複雑なスタイルの指定ができるようになっています。
    190 
    191 ここでは、基本的なセレクタの紹介をします。
    192 
    193 === タイプセレクタ ===
    194 {{{
    195 h2 { スタイル宣言 }
    196 p { スタイル宣言 }
    197 }}}
    198 HTMLの要素をセレクタとしたものです。
    199 全てのh2要素、p要素にスタイルが適用されます。
    200 
    201 === 全称セレクタ(ユニバーサルセレクタ) ===
    202 {{{
    203 * { スタイル宣言 }
    204 }}}
    205 アスタリスクをセレクタとしたものです。
    206 全称セレクタは全ての要素を指します。
    207 このように書くと、全ての要素にスタイルが適用されます。
    208 
    209 === クラスセレクタ ===
    210 {{{
    211 h2.system { スタイル宣言 }
    212 .purpose { スタイル宣言 }
    213 }}}
    214 1つ目の記述では、class属性値が"system"のh2要素にスタイルが適用されます。
    215 ピリオドの前にセレクタ、後にクラス名を書きますが、セレクタを省略した場合、全称セレクタを書いたのと同様に扱われます。
    216 2つ目の記述は、*.purposeと同等です。
    217 
    218 === 一意セレクタ(IDセレクタ) ===
    219 {{{
    220 div#Header { スタイル宣言 }
    221 #Footer { スタイル宣言 }
    222 }}}
    223 クラスセレクタと同様で、id属性が与えられている要素にスタイルが適用されます。
    224 
    225 === 子孫セレクタ ===
    226 {{{
    227 div.system p { スタイル宣言 }
    228 #LayoutA .homePhotoBox p.text { スタイル宣言 }
    229 }}}
    230 セレクタを半角スペースで区切って記述すると、適用する要素を絞ることができます。
    231 1つ目の記述では、class属性値が"system"のdiv要素の中にある、p要素にスタイルが適用されます。
    232 
    233 2つ目の記述では、id属性値が"LayoutA"の要素の中にある、class属性値が"homePhotoBox"の要素の中にある、class属性値が"text"のp要素にスタイルが適用されます。
    234 {{{
    235 <div id="LayoutA">
    236         <div class="hogehoge">
    237                 <div class="homePhotoBox">
    238                         <h2>見出し</h2>
    239                         <p class="point">100 Point</p>
    240                         <p class="text">OpenPNE君さん</p>
    241                 </div>
    242         </div>
    243 </div>
    244 }}}
    245 このようなHTML構造であれば『OpenPNE君さん』という部分のp要素のみにスタイルが適用されます。
    246 #LayoutAの中に.homePhotoBoxがあればよいので、class="hogehoge"というdiv要素があるように間に別の要素が存在しても適用されます。
    247 
    248 {{{
    249 <div id="boxA">
    250         <p>boxAの子の段落</p>
    251         <div id="boxB">
    252                 <p>boxAの孫の段落</p>
    253         </div>
    254 </div>
    255 }}}
    256 このようなHTML構造の場合、『boxAの子の段落』だけにスタイルを適用したくても、
    257 {{{
    258 #boxA p { スタイル宣言 }
    259 }}}
    260 のように記述してしまうと、『boxAの孫の段落』にも適用されてしまいます。
    261 
    262 これに関しては次のような「子セレクタ」というものがありますが、一部のブラウザが子セレクタに対応していないという問題があります。
    263 {{{
    264 #boxA > p { スタイル宣言 }
    265 }}}
    266 
    267 代替策として、スタイルを打ち消すような宣言ができる場合は、
    268 {{{
    269 #boxA p { スタイル宣言 }
    270 #boxA * p { 上のスタイルの打ち消し }
    271 }}}
    272 のように記述することで、子セレクタと同じような結果を得ることができます。
    273 
    274 === セレクタのグループ化 ===
    275 {{{
    276 h2, p { スタイル宣言 }
    277 #LayoutA h2, #LayoutA p { スタイル宣言 }
    278 #LayoutA h2, p { スタイル宣言 }
    279 }}}
    280 セレクタをカンマで区切ると、複数の要素をスタイル適用の対象とすることができます。
    281  * 1つ目の記述は、h2要素とp要素が対象になります。
    282  * 2つ目の記述は、「#LayoutAの中のh2要素」と「#LayoutAの中のp要素」が対象になります。
    283  * 3つ目の記述は、「#LayoutAの中のh2要素」と「全てのp要素」が対象になります。
    284 
    285 === セレクタの詳細度 ===
    286 スタイル指定が重複した場合の扱いについて説明します。
    287 {{{
    288 <div id="boxA">
    289         <div id="boxB">
    290                 <p class="text">テキスト</p>
    291         </div>
    292 </div>
    293 }}}
    294 このようなHTMLに対して、次のようなスタイル指定をすると『テキスト』は何色になるでしょうか。
    295  case1::
    296    {{{
    297 #boxA p { color: red; }  /* id属性が"boxA"の要素の中にあるp要素 */
    298 p.text { color: blue; }  /* class属性が"text"のp要素 */
    299 }}}
    300  case2::
    301    {{{
    302 p { color: red; }        /* p要素 */
    303 *.text { color: blue; }  /* class属性が"text"の全ての要素 */
    304 }}}
    305  case3::
    306    {{{
    307 p { color: red; }        /* p要素 */
    308 * { color: blue; }       /* 全ての要素 */
    309 }}}
    310  case4::
    311    {{{
    312 #boxB p { color: red; }  /* id属性が"boxB"の要素の中にあるp要素 */
    313 #boxA p { color: blue; } /* id属性が"boxA"の要素の中にあるp要素 */
    314 }}}
    315  case5::
    316    {{{
    317 #boxA { color: red; }    /* id属性が"boxA"の要素 */
    318 p { color: blue; }       /* p要素 */
    319 }}}
    320 
    321 この答えは詳細度というものによって決められます。
    322 詳細度は個別性や優先度とも呼ばれることがありますが、詳細度が高いものが適用されます。
    323 
    324 用いているセレクタに関して、次の値を計算します。
    325  * a = 一意セレクタの個数
    326  * b = クラスセレクタの個数(+属性セレクタの個数+擬似クラスの個数)
    327  * c = タイプセレクタの個数(+擬似要素の個数)
    328 
    329 セレクタの詳細度の大小は次のように決まります。
    330  1. aが多い方が詳細度が高い
    331  2. aが同じなら、bが多い方が詳細度が高い
    332  3. a,bが同じなら、cが多い方が詳細度が高い
    333 a,b,cが同じ場合は詳細度では決まりませんが、後に記述されている方が適用されます。
    334 
    335 よって、それぞれのcaseの答えは次のようになります。
    336  * case1 : #boxA p { color: red; } が適用される
    337  * case2 : *.text { color: blue; } が適用される
    338  * case3 : p { color: red; } が適用される
    339  * case4 : 後に記述されている #boxA p { color: blue; } が適用される
    340 
    341 case5は詳細度の問題ではなく適用する要素の問題です。
    342 セレクタ"#boxA"に該当するものは、今回の例ではdiv要素です。
    343 親にされた指定よりも自分に直接された指定の方が適用されます。
    344  * case5 : p { color: blue; } が適用される
    345 
    346 OpenPNE2.12では、既存のスタイルの中で重複がいくつか生じています。
    347 そのため、カスタムCSSでは詳細度が高くなるようにスタイルを記述しないと適用されないことがあります。
    348 
    349 記述したスタイルの詳細度が、既存のスタイルより低いと思われた場合は以下のように記述してください。
    350 {{{
    351 #Body セレクタ { スタイル宣言 }
    352 }}}
    353 既存のスタイルの中に、"#Body"セレクタを用いているものがあります。
    354 そのスタイルより詳細度を高める場合は次のようにします。
    355 {{{
    356 #Body #Container セレクタ { スタイル宣言 }
    357 }}}
    358 
    359253[[WikiInclude(DIRECTORYNAVI)]]