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

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

スポンサーリンク

20150609_1

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

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

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

スタイルシートには

.btnStyle{
スタイルスタイルスタイル
}
.btnStyle a{
スタイルスタイルスタイル
}

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

解決方法は超絶簡単

20150419_1

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

これが

<div class="btnStyle">
    <a href="#">ボタンでっせ</a>
</div>

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

こうなる

<div class="btnStyle">
    <p class="btn">ボタンでっせ</p>
</div>

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

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

.btnStyle{
スタイルスタイルスタイル
}
.btnStyle .btn{
スタイルスタイルスタイル
}

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

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

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

<a href="#">
    <div class="box">
        <div class="inner">
            <h3>見出し見出し</h3>
            <div class="btnStyle">
                <a href="#">ボタンでっせ</a>
            </div>
        </div>
    </div>
</a>

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

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

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法