【CSS/Bootstrap】一文追加するだけ!独自CSSが読み込まれない場合にcss優先順位を書き換える超簡単な方法

※本サイトにはプロモーション・広告が含まれています。

こちらの記事では、

一文追加するだけでCSS読み込みの優先順位を変える方法

を解説します

Bootstrapなどを使用している際に、独自CSSを読み込んでも反映されない!

後に読み込んだほうを優先するんじゃないの?!やっているのにできない!!

という方は、ぜひこちらをお読み下さい!

一発で解決します!

(※こちらはDjangoフレームワークを使った例で記載していますが、通常のCSSでも問題なく対応可能です)

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

早速、本題のコード!!

a{
    color:black !important;
}

a:hover {
    color:blue !important;
}

そうです!

!important をつけるだけ!

です

ただ、これだけだと新たな問題が出てくるのでその解決策も紹介!

問題点と解決策

【問題点】

おおもとのcssなどで書き換えると対象となるタグやクラス全て、全ページで変わってします

【解決策】

その際は、Djangoを例に取れば、base.htmlなどで

{% extra_css block %}{% endblock %}

など、ブロックを作成し、対象のページに必要なcssをlinkするようにしましょう!

【例】

{% extra_css block %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'leads/css/people_list.css' %}" >
{% endblock %}
{% load static %}

を忘れずに!!

以上、CSSの優先順位を書き換える!

でした!

タイトルとURLをコピーしました