浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】cssでプロパティをオーバーライド(共通化」)して書くコードを減らす

セレクタ内の特定のプロパティを別セレクタでオーバーライドする

javaではクラスを継承して継承元の関数の内容を変更することができます。

このように元からある機能を上書きすることをオーバーライドと呼びますが

cssでもclassNameにセレクタを複数指定することでオーバーライドに似たことができます。

まず、共通化したいコンポーネントのレイアウトを書いていきます。

適当な四角ですが見本なので特に意味はないです。

 

[jaascript]

#sample-page .box-styles {
background: #3f51b5;
color: #FFF;
width: 80px;
height: 80px;
line-height: 20px;
border-radius: 10%;
text-align: center;
font-size: 12px;
margin: 5px;
padding: 5px; }

[/javascript]

 

次に、オーバーライドしたいセレクタを書きます。

上のコンポーネントのレイアウトをそのままで背景色だけ変えたいという場合は

以下のようにしてbackgroundのみ記載します。

 

</pre>
<span style="font-size: 1rem;">#top-page .pack {</span>

background: #3f51b5;
}

#top-page .import {
background: #3fb5a3;
}
<pre>

 

セレクタが二つできたので、これをclassNameに以下のように追加します。

通常のclassName設定と違い一つ目のセレクタの後ろを一つ空けて色を変更したいセレクタを入れこみます。

<button className=”box-styles pack”/>

<button styles=”box-styles import”/>

これで完了。同じコンポーネントを書くことなく共通化することができました。

複数のコンポーネントが必要になった時にムダなプロパティを書くことなく変えたいプロパティのみを設定する

ことで可読性・整合性を保つことができます。

  • この記事いいね! (0)