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

Changes between Version 3 and Version 4 of pne-xhtmlcss/tips


Ignore:
Timestamp:
Jun 19, 2008, 8:20:12 PM (11 years ago)
Author:
takai
Comment:

スタイル指定の例を記述

Legend:

Unmodified
Added
Removed
Modified
  • pne-xhtmlcss/tips

    v3 v4  
    66マークアップの見直しでは、各部位にクラス(class属性)を与え、パーツ化することを行いました。[[br]]
    77[wiki:pne-xhtmlcss/tips-note この項目のノートページ]にパーツ化の方針を掲載しています。
     8
     9あるページのパーツのクラス名は、ページのソースを表示して「parts」などと検索すれば、[wiki:pne-xhtmlcss/tips#パーツの構造 パーツの構造]で示しているようにクラス名が記述されているのでそこから知ることができます。
     10
     11CSSでどのような指定ができるのかについては、[http://w3g.jp/css/ CSSガイド - http://w3g.jp/css/]などの解説サイトを参照ください。
     12
     13== スタイル指定の例 ==
     14カスタムCSSでスタイル指定する際に、セレクタとして何を用いればよいのか具体例を挙げて説明します。
     15
     16=== 全体に背景画像を表示する ===
     17{{{
     18body {
     19        background-image: url(画像のURL);
     20}
     21#Body, #Container {
     22        background-color: transparent;
     23}
     24}}}
     25body要素に対して背景画像を指定します。
     26配色設定から指定できる背景色が"#Body"と"#Container"に適用されているので、背景色を透明に指定します。
     27
     28=== 全体をセンタリングする ===
     29{{{
     30#Container {
     31        margin: 0 auto;
     32}
     33}}}
     34marginプロパティは外側の余白を指定します。
     35左右のmarginをautoにすることで、ボックスは中央に配置されます。
     36{{{
     37#Container {
     38        margin-left: auto;
     39}
     40}}}
     41左のmarginだけをautoにすることで、ボックスは右寄せになります。
     42
     43=== home系のメインテーブルの見出し部分を変える ===
     44home系とは、h_home, f_home, c_home のことです。
     45{{{
     46#Body .homeMainTable th {
     47        border-color: #FF0000;
     48        background-color: #000000;
     49        color: #FFFFFF;
     50        font-weight: bold;
     51}
     52#Body .homeMainTable tr:first-child th,
     53#Body .homeMainTable tr.first-child th {
     54        border-color: #00FF00;
     55}
     56}}}
     57"#Body"は詳細度を高めるための記述です。
     58"homeMainTable"クラスのパーツの中にある、th要素(テーブルの見出しセル)に対するスタイル指定です。
     59
     60"first-child"と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。
     61
     62=== 日記やトピック記事の画像をセンタリングする ===
     63{{{
     64#Body ul.photo {
     65        text-align: center;
     66}
     67#Body ul.photo li {
     68        margin: 0 10px;
     69}
     70}}}
     71"photo"クラスのul要素に対して、インラインをセンタリングする指定を記述します。
     72li要素は既存のスタイルで display: inline が指定されています。li要素の左右のmarginを指定して画像の間隔を調整します。
     73
     74日記は"diaryDetailBox"クラス、トピックは"topicDetailBox"クラスですが、共通の"ul.photo"をセレクタにすることでスタイル指定を共有できます。
     75
     76=== 特定のページだけのパーツを指定する ===
     77あるページのパーツにスタイルを指定したいとき、そのパーツが他のページで使われていた場合、他のページのパーツまでスタイルが適用されてしまいます。
     78
     79例えば、home系にはメイン写真表示部がありますが、h_homeのメイン写真表示部のみを指定したい場合、次のようにします。
     80{{{
     81#pc_page_h_home .homePhotoBox .parts {
     82        background-color: #FFFFCC;
     83}
     84}}}
     85セレクタの頭にそのページのIDをつけることで、そのページ以外にはスタイルが適用されないようにします。
     86ページのIDは、body要素のid属性として与えられています。
    887
    988== OpenPNE2.12のHTML構造 ==
     
    54133パーツについては[wiki:pne-xhtmlcss/tips-note/#パーツの分類 パーツの分類]を参照ください。
    55134
     135パーツは、ページの構造の中の<div id="Left">や<div id="Center">の中に記述されています。
     136
    56137{{{
    57138<div class="dparts パーツクラス名"><div class="parts">
     
    101182}}}
    102183
    103 == スタイル指定の例 ==
    104 カスタムCSSでスタイル指定する際に、セレクタとして何を用いればよいのか具体例を挙げて説明します。
    105 
    106 === 全体をセンタリングする ===
    107 {{{
    108 #Container { margin: 0 auto; }
    109 }}}
    110 marginプロパティは外側の余白を指定します。
    111 左右のmarginをautoにすることで、ボックスは中央に配置されます。
    112 {{{
    113 #Container { margin-left: auto }
    114 }}}
    115 左のmarginだけをautoにすることで、ボックスは右寄せになります。
    116 
    117184== スタイルの書き方(セレクタの説明) ==
    118185{{{