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

こちらの記事では、

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

を解説します

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

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

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

一発で解決します！

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

運営者プロフィール

現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。

Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。

Githubでは、趣味で作成したアプリなどを公開しています。

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

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

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

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

created by Rinker

早速、本題のコード！！

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

でした！