zoomeマイページの右と左を区別する方法 - CSSカスタマイズ
同じ名前(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の最新仕様とブラウザーのサポートについて)