CSS-サイドメニューがクリックできない場合

サイドメニューがクリックできないとは

CSSレイアウトを作成した場合に、サイドメニュー（サイドバー）などのリンクがクリックできなかったり、テキストをマウスで選択できない状態となることがあります。

firefoxやoperaといったブラウザでは正常にリンクをクリックできても、chromeなどの一部のブラウザではリンクをクリックすることができないといった場合があります。

また、２カラム画面において、中央カラムの文章量が少量である場合に、左サイドメニューのリンクがクリックできないといった現象に悩まされる場合もあります。

ネガティブマージンを利用することで、重なった要素（カラム）が後方に位置してしまい、クリックなどの操作ができない状態になります。

例えば、左サイドメニューの２カラム画面HTMLを構成した場合に、中央カラムにネガティブマージンを設定していると、左サイドバーのマークアップが中央カラムより後方にあるため、左サイドバーのボックスが中央カラムの下に重なってしまいます。

このため、サイドメニューに対する操作が行えないといった状態になります。

クリックできないカラムに、「z-index」プロパティを与えます。

z-indexはボックスの重なりの順序を指定する際に使用します。


#sidebar {
    position: relative;
    z-index: 2;
}

z-index値は「0」を基準とし、値が大きいものが上に重なります。

中央カラム（z-index 指定なし）より上に重なるようにしています。

なお、z-indexはpositionプロパティでstatic以外の値が指定されている要素に適用されるため、positionプロパティを併せて設定する必要があります。

ネガティブマージンとは、マイナスの方向に値が入力されたマージンのことをいいます。

marginプロパティにマイナス値を入力することで、対象となる要素の位置をずらし、食い込んだような表現が可能になります。


#contents {margin-left:-100px;}

一時期、ネガティブマージンについて、否定的な意見が多くありました。

ブラウザが対応していないこともあり、表示が一定しなかったことが原因といえます。

しかしながら、ネガティブマージンはCSSとして適切な設定であり、W3Cに「マージンのプロパティにネガティブな値が許される」とあります。

ネガティブマージンはモダンブラウザ（IE6以降）で完全にサポートされるようになっています。

ただし、ブラウザに依存したプロパティといえますので、多用してしまうと発見しにくい不具合を抱える可能性があります。

IE（6）では、ネガティブマージンを取った場合、「position: relative;」とセットで使わないと、マイナス部分が表示されない現象がありました。