こちらの記事では、
一文追加するだけでCSS読み込みの優先順位を変える方法
を解説します
Bootstrapなどを使用している際に、独自CSSを読み込んでも反映されない！
後に読み込んだほうを優先するんじゃないの？！やっているのにできない！！
という方は、ぜひこちらをお読み下さい！
一発で解決します！
（※こちらはDjangoフレームワークを使った例で記載していますが、通常のCSSでも問題なく対応可能です）
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
created by Rinker
¥2,640
(2024/11/22 13:53:13時点 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の優先順位を書き換える！
でした！