こんにちは。制作部の吉田です。

今日は普段使わないけどよくコードが指定されているinheritについてです。前にググってみたのですが、「継承」と出てきて、今いち使い方がわからず、何のためにあるんだろう?と思っていました。そろそろ解決しよう。

文字通りinheritは「継承」なので、親要素の指定を引き継ぐ指定です。aタグがわかりやすいと思うのですが、

<p style=”color:red;”>あいうえお<a href=””>リンク</a>かきくけこ</p>

この指定の場合、行指定に文字が赤でも「リンク」だけ青になります。それはaタグに直接設定されているデフォルトのスタイルが青だからです。p a{color:red;}で指定すると解決するのですが、

p a { color: inherit; }の方が指定色を確実に引き継いでくれてテンプレート化にも便利です。(クラス名をつけたaを指定すれば区別も出来るし)また、色だけでなく、borderなどの装飾も引き継いでくれるようです。

aタグの色が変わらない、これは親と同じスタイルだな、と思った時に思い出して使ってみようと思います。便利な指定がまだまだたくさんあると思うので、気づいたら書いていきます。

Leave a Comment