2024.06.18

効率的なCSS記述になる！inherit の使い方

CSSには「継承」という概念があることを知っていますか？
今回は、この「継承」に関する便利なプロパティをご紹介したいと思います！

CSSの継承

CSSの継承とは、「親要素に指定した値が小要素に引き継がれる」ことです。

See the Pen inherit by spiqa design (@spiqa_design) on CodePen.

上の例では、親要素のdiv.parentにテキスト色を指定していますが、小要素のp.childも同じテキストの色になっています。

一方、borderなどのプロパティは値が継承されません。

See the Pen inherit by spiqa design (@spiqa_design) on CodePen.

上の例では、borderをCSSで指定している親要素には枠線がついていますが、子要素のp.childにはborderがついていません。
CSSが継承されるかどうかはプロパティによって最初から決まっています。

子要素のp.childにもborderをつけたい場合、以下のような指定が考えられます。

See the Pen inherit by spiqa design (@spiqa_design) on CodePen.

通常では継承されないCSSを継承したい時に使用するのが「inherit」です。
先ほどのborderの例の場合、.child{border:inherit}という指定ができます。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

p.childはborderの指定について、親要素のdiv.parentの指定をそのまま引き継いでいます。

それでは、inheritの便利な活用方法をご紹介します。

文章内のリンク（aタグ）の場合、本文の文章と同じ文字色を指定することがよくありますよね。

基本となる文字色をhtmlやbodyに指定していても、リンク部分はデフォルトの青色になってしまうので、別途指定していることもあると思います。

body{
  color:#333;
}
a{
  color:#333;
}

この指定の場合、テキスト色が変更になったときに2ヶ所変更しなければならないし、aタグのcolor指定変更を忘れてしまう可能性もあります。

body{
  color:#333;
}
a{
  color:inherit;
}

このようにinheritを使用すると、bodyのテキスト色1ヶ所のみを変更することでリンクのテキスト色も自動的に変更されます。
似た案件をコーディングする時には、CSSを使い回すことも多いので、このように指定しておくことで効率UPにもつながります！

もうひとつおすすめしたいのがfont-familyへの指定です。

WEBサイト全体は游ゴシックなのに、フォーム部分はデフォルトのヒラギノになっているというサイトをよく見かけます。
フォームのコーディングでよく使用するselectやinput、buttonなどのfont-familyが指定できていないからです。

こちらもinheritを使用することで、全体設定を引き継ぐことができます。

body{
  font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", sans-serif;
}
select,input,textarea,button{
  font-family:inherit;
}

リセットCSSに記述しておくことで、毎回気にすることなくコーディングを進めることができるのでおすすめです。

わかりやすく、修正しやすいコードを書いておくことで全体の効率が上がります！

可能なところから効率化していきたいですよね！ぜひinheritを活用してみてください。

この記事をシェアする

【HTML5】ふりがなを振ろう！ruby要素などルビ関連要素の使い方

HTMLでtableタグのセルを結合する方法