2010年5月19日水曜日

zoomeマイページの右と左を区別する方法 - CSSカスタマイズ

要素を移動させる
zoome
同じ名前(idやクラス名)の要素を他のページでも使っていても、そのページの要素だけレイアウト変更出来る場合があります。
zoomeマイページなら、右と左。「右にある名刺カード」と「左にある名刺カード」は、名前が同じでも別のスタイル指定が可能です。


**** 原理
o zoomeマイページの場合、要素の親を辿っていくと、マイページの右にあるか左にあるか、クラス名で指定している要素があります。そのクラス名を利用します。


**** 書き方
o 要素が左側にある場合、幅が広い時は、 div.leftside_w。 幅が狭い時は、div.leftside が必ずあります。
   + 「<div class="leftside_w"」のような書き方をしている所です。
o 要素が右側にある場合、幅が広い時は、 div.rightside_w。 幅が狭い時は、div.rightside が必ずあります。

# 幅が広い方は _w 付き。幅が狭い方は、 _w 無しです。( 先頭の divは無くても、多分大丈夫です。)
#

**** 具体的な指定例
o トップページ右にあるコメントリスト内容は div.rightside_w .commentlist_body
o 日記ページ左にあるコメントリスト内容は div.leftside_w .commentlist_body

o トップページ左にある名刺カードの内容は div.leftside .name_body
o 日記ページ右にある名刺カードの内容は div.rightside .name_body


**** メモ
o CSSの最新仕様を使うと、更に区別する事が出来ますが、サポートしていないブラウザーがありますので、注意が必要です。
o 例えば、Internet Explorer 6は、今でも良く使われているブラウザーです。(= 2010年5月現在)
o でも、子供セレクター(A > B)は、Internet Explorer 6ではサポートされていません。
o ですから、なるべく多くの人達にみて欲しいサイトでは、Internet Explorer 6でも動くような書き方に改めます。


==
関連ページ:
    ▼要素を移動させる
    ▼zoome
    ▼CSSカスタマイズ
    ▼制作メモ
    > 表示を他の要素に重ね合わせる。marginのマイナス指定
    > zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする
    周囲に影響を与えずに表示場所を移動させる。position
    CSSで表示の並びを入れ替える。positionと margin
    デザインの邪魔になる要素への対応方法
(2010年5月25日追加。CSSの最新仕様とブラウザーのサポートについて)