2010年5月19日水曜日

デザインの邪魔になる要素への対応方法 - CSSカスタマイズ

要素を移動させる
CSSカスタマイズをする中で、自由に動かす事の出来ない要素が見つかる事があります。
そのような要素がレイアウトの邪魔をする時は、「表示しない」など、レイアウト以外の所で頑張ります。

例えば、zoomeマイページの場合、次の2つはCSSでは区別できません(= Internet Explorer 6の場合)。
o トップページの「動画のサムネイル(newclip 系の要素)」
o 「投稿の過去ログ(サムネイル表示)」ページ(サムネイルの右下の「すべてを見る」を押した先)

片方を動かすと、もう片方も同じ動きをします。ですので、目指すレイアウトによっては、ごまかす必要が出てきます。

to_dkのzoomeマイページの場合は、とりあえず、レイアウトに困った要素を背景の後ろに配置しました。
div.rightside_w div.newclip_head { position:absolute; z-index:-1; のように。

# この方法よりも、display: none;を使う方法や、text-indent: -9999px; を使う方法の方が有名です。
#


==
関連ページ:
    ▼要素を移動させる
    ▼CSSカスタマイズ
    ▼制作メモ
    > 背景画像固定のポイント
    CSSで表示の並びを入れ替える。positionと margin
    表示を他の要素に重ね合わせる。marginのマイナス指定
    周囲に影響を与えずに表示場所を移動させる。position