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

こちらの記事では、

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

を解説します

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

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

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

一発で解決します！

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

筆者プロフィール

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

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

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

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

created by Rinker

¥2,640 (2024/04/26 14:20:57時点 Amazon調べ-詳細)

早速、本題のコード！！

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の優先順位を書き換える！

でした！