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

typingCSS

こちらの記事では、

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

を解説します

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

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

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

一発で解決します!

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

筆者プロフィール

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

【現職】プロマネ/システムプランニング

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

【元】外資系金融機関の営業

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

ChatGPTでLINEボット

【今なら無料】ChatGPTでLINEボットを作りました!

友だち追加

早速、本題のコード!!

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をコピーしました