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

typingCSS

こちらの記事では、

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

を解説します

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

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

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

一発で解決します!

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

早速、本題のコード!!

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

でした!

おススメ記事!興味ある方はこちらもどうぞ!

【超簡単】RaspberryPIでUbuntu搭載のPCを作る
【DigitalOcean】Dropletsを作成する5ステップ
当ブログは、「プログラミング初心者が一からWebアプリを作り、ネットで公開するまで」を解説しているサイトです。

日報アプリを一から開発し、ウェブに公開するまではこちらにまとめています

また、公開したウェブアプリはこちら(https://nippo.itc-app.site)でご覧いただけます(公開後もアップデート中)

 

その他、各分野別に

  1. Pythonについて
  2. HTML・CSSについて
  3. Djangoフレームワークについて
  4. Webサーバーについて
  5. 実際に公開をする方法

を記載したページも用意しています

 

ご自身の目的に合わせて、お好きな箇所からご覧ください

404 NOT FOUND | ITCブログ
今の自分にチャレンジする
タイトルとURLをコピーしました