【ワレコの講座】CSSの !important の意味 – 初めて知ったわ

この記事は約8分で読めます。
スポンサーリンク

HTMLを記述してWEBサイトを作成していると、CSS の設定に

!important

と言うのが出て来る。

この存在は数か月前から知っていたのだが、意味を今まで知らなかった。

コピペして来たCSSの中に !important が有っても良く分からないままそのまま使っていた。

で、今日こんな場面に遭遇した。

以下の赤い四角にマウスを持って行くとボタンが出る仕組みだ。

そのボタンを押すと今日の日時が表示出来る。

例えば何かの設定ボタンなど、普段は使用頻度の少ないボタンなどを通常は非表示にしておいて、必要な時にマウスを持って行くと表示する小細工だ。

Chrome, Firefox, IE で試したらうまく動いた。





で、このアイディアは、

Show div on hover with CSS stackoverflow

から借用したのだが、stackoverflow の例では自動で隠すモードのみのやり方だ。

ワテとしては、それを改造して、

自動で隠すモード

常時表示モード

を切り替えたい。

それで即席で、こんな JavaScript を作成してみた。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ボタンを自動で非表示にしたり、あるいは常時表示にするJavaScript実験</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <style type="text/css">
        #parent_div:hover #child_div {
            /* display: block; */
            display: block!important;
        }
 
        #child_div {
            display: none;
        }
    </style>
 
    <div id="parent_div" style="width:300px;height:300px;border:2px solid red">
        <div id="child_div">
            <label id="labelID">自動で隠すモード</label><br />
            <button onclick=" alert(new Date())">今の日時は?</button>
            <button onclick="button_click_func()">表示モード切替</button>
        </div>
    </div>
 
    <script type="text/javascript">
        var toggle = false;
        function button_click_func() {
            if (toggle) {
                $('#child_div').css('display', 'none');
                $('#labelID').text('自動で隠すモード');
            } else {
                $('#child_div').css('display', 'block');
                $('#labelID').text('常時表示モード');
            }
            toggle = !toggle;
        }
    </script>
 
</body>
</html>

いちおう、これが完成版なので、期待通りの動きをする。

試してみたい人は、上記の HTML をメモ帳にでもコピペして test.html と言うような適当なファイル名で保存してブラウザーで開いてみると良い。ファイル保存する場合は文字コードは UTF-8 にする。

さて、当記事ではこのJavaScriptコードを作成した過程で、cssの!importantの挙動で新しい発見があったので、ワテの備忘録としてこの記事に残す事にした。

では、本題に入ろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

JavaScriptコードの説明

CSSの設定において、当初は stackoverflowの例をそのまま参考にしてdisplay: block;と記述していた。

つまり、赤枠 (parent_div) にマウス hover すると内側の child_div をdisplay: block;で表示するのだ。

        #parent_div:hover #child_div {
            display: block;
         /* display: block!important; */
        }

child_div は以下の設定がされているので、通常は非表示。

        #child_div {
            display: none;
        }

それが mouse hover で display:block に変更されるので、その中にあるボタンが表示される仕組みだ。

[表示モード切替]ボタンのクリックでdisplay:blockとdisplay:noneをトグルに切り替えるようにしたのが以下の JavaScript だ。

        function button_click_func() {
            if (toggle) {
                $('#child_div').css('display', 'none');
                $('#labelID').text('自動で隠すモード');
            } else {
                $('#child_div').css('display', 'block');
                $('#labelID').text('常時表示モード');
            }
            toggle = !toggle;
        }

[表示モード切替]ボタンクリックでこの関数が実行されて child_div が display:block になると(elseの場合)、常時表示される。

さらにもう一回[表示モード切替]ボタンをクリックすると、child_div は display:none になり非表示になる。

問題はここだ。

ここで display:none に設定すると、

#parent_div:hover #child_div に設定している display: block; が効かなくなってしまった。

その結果、二度とchild_divやその中の二つのボタンが表示されない。

解決方法は以下の通り。

display: block!important;にした

この

display: block;

の部分を

display: block!important;

に変更すると期待通りの動きになった。

つまり、無事にchild_divを display;none と display:block!important で表示をトグル出来るようになった。

!important の正確な意味については、こういう公式の解説が良いかもしれない。
http://w3.org/TR/CSS2/cascade.html#important-rules

英語なので良く分からん。

兎に角、important (重要) なので注意してちょうと、ブラウザに指示するようだ。

こうしておくと、JavaScript の中で、

         $('#child_div').css('display', 'none');

を実行して一旦child_divが非表示になっても、その後、parent_divにmouse hoverイベントが発生した場合には、以下の設定が効いて

        #parent_div:hover #child_div {
            /* display: block; */
            display: block!important;
        }

無事に display: block!important; が実行される。

その結果、display:none;で消えていたchild_divが再び表示されるのだ。

なるほど。

!importantはこう言う場合に使うといいんだな。

ワテの場合、兎に角!importantを使う癖が有ったのだが、むやみやたらに使うのではなく、必要な場所にのみ!importantは使うべきなのだ。

CSSを勉強する

ほんまにスラスラ分かるのかな?まあランクも高いし読んでみるのも良いかも。

ワテはプロじゃなくて素人なのだが、一応プロを目指したい。犬が可愛いな。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

CSSHTMLJavaScriptjQuery
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント