Laravelで、bootstrapのCSSパッケージをインストールすると、元々反映させてあった通常のCSSファイルが、反映されなくなる問題

Question

・Laravelで、サイトを作っていて、bladeファイルに、

<link rel="stylesheet" type="text/css" href="{XXXXX}.css"> ...①

を読み込んでいました。追加で、お問い合わせフォームを作ろうと思い、お問い合わせフォームのbladeファイル作成したのと、以下のようにbootstrapの「Laravel Collective」の「Forms & HTML」

composer require laravelcollective/html

をインストールし、

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">...②

を読み込ませたところ、上記の①のcssが反映されなくなりました(②は反映されました)。以下のコマンド

php artisan view:clear 
php artisan cache:clear

を試してみましたが、改善はされませんでした。また、②をコメントアウトすると、①が反映しなおされました。
bootstrapのcssパッケージと通常のcssは、どちらかしか反映できないのでしょうか？

初心者で申し訳ありませんが、参考になるサイトやご回答などありましたら、ご連携いただけますでしょうか？
よろしくお願いいたします。

Answer 1

bootstrapのcssパッケージと通常のcssは、どちらかしか反映できないのでしょうか？

CSS同士が干渉する場合は、うまくいかないこともありえます。

なお、詳細度が等しい場合、CSSはあとから書いたほうが優先されますので、自作のCSSをBootstrapより後で読み込むことで状況が変わる可能性もあります。

Comments

[hiroki0907]

maisumakunさん。ご回答ありがとうございます。
通常のCSSファイルをbootstrapのCSSの後に全て持っていって、キャッシュクリアさせてみましたが、
bootstrapがどうも強いみたいで、boostrapしか反映されませんでした、、、

[maisumakun]

自作のCSSの中身はどのようなものですか？

[hiroki0907]

はい、こちらになります。common.css(ヘッダ、フッタ、本文共通)とportal.css(ログイン直後のページ)とあります。

common.css
```
/*全体*/
html {
text-align: center;
font-family: "Comic Sans MS";
width: auto;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

.title {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
}
.title:before, .title:after {
border-top: 1px solid;
content: "";
width: 3em; /* 線の長さ */
}
.title:before {
margin-right: 1em; /* 文字の右隣 */
}
.title:after {
margin-left: 1em; /* 文字の左隣 */
}

/*ヘッダー全体*/
header {
width: auto;
background-color:#FFFFFF;
position: fixed;
top: 0;
left: 0;
right: 0;
border-style: solid;
}

/*ボディ全体*/
body {
width: auto;
margin-top: 150pt;
}

/*フッター全体*/
footer {
width: auto;
margin-top: 500pt;
background-color: gray;
padding-top: 30pt;
padding-bottom: 30pt;
}
```

portal.css
```
/*ロゴ*/
.logo {
position: relative;
border-style: solid;
float: left;
padding-left: 0; /* 上 | 右 | 下 | 左 */
padding-right: 0; /* 上 | 右 | 下 | 左 */
width: 14%;
margin-top: 10pt;
margin-left: 50pt;
margin-right: 37pt;
}

/*メニューリンク*/
.sub_menu1 {
margin-left: -20pt;
margin-right: -20pt;
}

.sub_menu2 {
border-style: solid;
padding-right: 550pt;
}

.news {
border: 1pt solid;
padding-right: 800px;
margin-left: -10pt;
}

.sub_menu3 {
float: left;
padding-left: 810px;
font-size: 1mm;
border-style: solid;
margin-bottom: -20px;
}

.small_nav {
float: left;
padding-left: 40pt; /* 上 | 右 | 下 | 左 */
padding-right: 40pt;
margin-left: 10pt; /* 上下 | 左右 */
margin-right: 10pt;
margin-top: 15.5px;
margin-bottom: 15.5px;
}

.sub_menu_menu {
font-size: 3mm;
}

.sub_menu_nav {
display: flex;
position: absolute;
padding-left: 375pt;
padding-right: 100pt;
font-size: 3mm;
}

.sub_menu_nav li {
position: relative;
right: 0;
bottom: 0;
padding-left: 20pt;
padding-right: 5pt;
border-style: solid;
}

.nav {
margin-left: auto; /*borderを中央から短くしたいときはこう。*/
margin-right: auto; /*borderを中央から短くしたいときはこう。*/
width: 91.4%; /*短くする*/
position: relative;
padding-left: -10pt;
padding-right: -10pt;
overflow: hidden;
border-top: 1px solid;
border-bottom: 1px solid;
clear: both;
}

.nav ul {
position: relative;
padding-top: -5pt;
left: 50%;
float: left;
}

.nav li {
position: relative;
left: -53%;
float: left;
margin-left: 12pt;
margin-right: 12pt;
padding-left: 30pt;
padding-right: 30pt;
border-style: solid;
}

/*ボディ*/

.container {
text-align: center;
border-style: solid;
display: inline-block;
width: 100%;
}

.title {
border-style: solid;
margin-top: 40pt;
margin-bottom: 40pt;
}

.contents {
border-style: solid;
position: relative;
overflow: hidden;
width: 100%;
z-index: -1;
}

.content_link {
position: relative;
left: 10.3%;
float: left;
border-style: solid;
}

.content_link_menu {
border-style: solid;
}

.content_link1 {
position: relative;
left: 10.3%;
float: left;
border-style: solid;
}
.content_link2 {
position: relative;
left: 17.5%;
float: left;
border-style: solid;
}
.content_link3 {
position: relative;
left: 25%;
float: left;
border-style: solid;
}

.content_link1 {
box-shadow: 10px 10px 15px -10px;
}

.content_link2 {
box-shadow: 10px 10px 15px -10px;
}

.content_link3 {
box-shadow: 10px 10px 15px -10px;
}

/*フッター*/

.footer_nav {
margin: auto;
width: 100%;
border-style: solid;
}

.footer_menu_nav1 {
border-style: solid;
display: inline-block;
padding-left: 180pt;
padding-right: 180pt;
padding-top: 80pt;
padding-bottom: 80pt;
margin-right: 40pt;
}

.footer_menu_nav2 {
border-style: solid;
display: inline-block;
padding-left: 180pt;
padding-right: 180pt;
padding-top: 80pt;
padding-bottom: 80pt;
margin-left: 40pt;
}
```

[maisumakun]

ブラウザの開発ツールから、CSSの指定状況が確認できます。意図しない表示になっている要素を選んで、指定状況を確認してみましょう。