スタイルを指定する時、CSSには直接タグ要素を指定しない方がいい。絶対いい

2015/6/9 CSS, WEB

最近とある罠にハマった。ちなみに、こんな罠です。

クリックで別ページに飛ばす為のボタン用のスタイルを、クリック領域でない箇所にも同じスタイルで使いたかったんです。でも、aタグにスタイルを指定していたが為に使えなかった。

ちろん大したことではないのだけども、ちりも積もれば山となると言うし。一度ならいざしれず、次も同じようなことがあるとうんざりします。そんなこんな。

スタイルシートには

<br />
.btnStyle{<br />
スタイルスタイルスタイル<br />
}<br />
.btnStyle a{<br />
スタイルスタイルスタイル<br />
}<br />

の様な書き方をしており、ボタンのスタイルにはaタグが入っているのが前提で作られていました。っていうかこんなスタイルの指定をしているから罠にハマったんじゃ。

解決方法は超絶簡単

ただ単にボタンのスタイル用のタグにclassを指定してやるだけです。

これが

<br />
&lt;div class=&quot;btnStyle&quot;&gt;<br />
    &lt;a href=&quot;#&quot;&gt;ボタンでっせ&lt;/a&gt;<br />
&lt;/div&gt;<br />

(a タグにclassを指定していない)

こうなる

<br />
&lt;div class=&quot;btnStyle&quot;&gt;<br />
    &lt;p class=&quot;btn&quot;&gt;ボタンでっせ&lt;/p&gt;<br />
&lt;/div&gt;<br />

(p タグにクラスを指定した。もちろんclass名は何でもいい)
ここで重要なのは、aタグでなくても今までと同じスタイルが適応されること。例ではpタグでやったけど、spanでもdivでもclassにbtnという名前がついて指定していればタグは何でもいい。

そんで、スタイルシートはこうする。

<br />
.btnStyle{<br />
スタイルスタイルスタイル<br />
}<br />
.btnStyle .btn{<br />
スタイルスタイルスタイル<br />
}<br />

p.btnと書くと意味ないので注意。こう書くと、結局pタグが無いとスタイルが適応しなくなるので、結局同じ罠にはまる。

今回はボタンのスタイルの例だったけど、なんにでも当てはまる。h2にmargin-topとか、そんなんはいいんですよ。いくつかのタグ要素が集まって1つのスタイルを型どっている、そんな場合です。

余談だけど、この例については、aタグのhref属性を消して、CSSでcursor:defaultしてやればいいやん。それならクリックできないボタンの出来上がりやん？と思うかもしれない。
まあこの記事で言いたいことは、そうじゃないのだが・・・

<br />
&lt;a href=&quot;#&quot;&gt;<br />
    &lt;div class=&quot;box&quot;&gt;<br />
        &lt;div class=&quot;inner&quot;&gt;<br />
            &lt;h3&gt;見出し見出し&lt;/h3&gt;<br />
            &lt;div class=&quot;btnStyle&quot;&gt;<br />
                &lt;a href=&quot;#&quot;&gt;ボタンでっせ&lt;/a&gt;<br />
            &lt;/div&gt;<br />
        &lt;/div&gt;<br />
    &lt;/div&gt;<br />
&lt;/a&gt;<br />

こんな風にする必要があった。aタグの中にaタグは含められないので、適切ではない。その為今回のように、リンクとしての機能が無いんだけどボタンのスタイルが必要になってしまい、その結果「あああああ面倒い！」な自体になった次第です。

本当に毎回毎回浅い沼にハマる。深い沼にもハマる。