検証を見てみるとコードにないdisplay: flexが適用されてしまう

Question

解決したいこと

ページネーションを中央に当てたい
text-align: centerを書いたが適用されずでした。

現状

検証ツールを見てみると
display: flexを記述してないのに、cssが適用されている

解決したいこと

display: flexの適用を外したい

該当のコード

.Pagenation{
  margin: 0 auto;
  font-size: 18px;
  a {
    color: #1b1b1b;
    background: khaki;
    text-decoration: none;
  }
}

###　index.html.haml

.Main
  .Main__devise
    - if user_signed_in?
      = link_to "ログアウト", destroy_user_session_path, method: :delete
      = link_to "投稿する", new_card_path
    - else
      = icon("fas", "sign-in-alt")
      = link_to "ログイン", new_user_session_path
      = link_to "新規登録", new_user_registration_path
  .Main__header
    .Main__header__nav
      %h1 エンジニアのための本
      .hamburger
        %span
        %span
        %span
      %nav.nav-button
        %ul.menu
          %li 
            フロントエンド
            %ul.sub
              %li
                = link_to "①HTML", card_category_path(:card_id ,1)
              %li
                = link_to "②CSS", card_category_path(:card_id, 2)
              %li
                = link_to "③JavaScript", card_category_path(:card_id, 3)
          %li
            バックエンド
            %ul.sub
              %li
                = link_to "④Java", card_category_path(:card_id, 4)
              %li
                = link_to "⑤PHP", card_category_path(:card_id, 5)
              %li
                = link_to "⑥Python", card_category_path(:card_id, 6)
              %li
                = link_to "⑦Ruby", card_category_path(:card_id, 7)
          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
            = f.text_field :keyword, placeholder: "検索", class: "search-top"
            = f.submit "検索", class: "search-top"
  .Main__body
    .Main__body__left
      .Main__body__left__top
        フロントエンド
      .Main__body__left__text
        WebサービスやWebアプリケーションで直接ユーザーの
        %br 目に触れる部分のことです。
        フロントエンドの開発で利用する言語は主に、
        HTMLやCSS,JavaScriptです。
    .Main__body__left
      .Main__body__left__top
        バックエンド
      .Main__body__left__text
        サーバーサイドやデータベースのシステムなど、ユーザーの目に見えない部分のことです。
        %br バックエンドの開発で利用する言語には、JavaやJavaScript、PHP、Python、Rubyといったプログラミング言語があります。



.Pagenation
  .Pagenation__page
    = paginate @cards

.New
  .New__book
    = link_to "新しい本の追加", new_card_path

application.scss

@import "reset";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap/scss/bootstrap";


.mw-md {
  max-width: 576px;
}



.alert-notice {
  @extend .alert-info;
}

.alert-alert {
  @extend .alert-danger;
}

application.html.haml

  %body
    //devise関連のページのみ最大の横幅を576pxとして、それ以外は別の横幅にする
    //条件分岐で付与するクラスを付け替え
    %div{:class => "container-fluid px-0 #{devise_controller? ? 'mw-md' : 'mw-xl'}"}
      = yield

bootstrap4.6.0導入

画像の追加

index.scss

.Main {
  background-image: image-url("book1.jpg");
  background-size: cover;
  position: relative;
  &__devise {
    width: 20%;
    color: #f2f2f2;
    font-size: 20px;
    padding: 20px;
    a {
      color: #fff; //リンクの色の変更
    }
  }
  &__header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: bold;
    &__nav h1 {
      text-align: center;
      padding: 1em;
      border: 9px solid rgb(255,255,255);
      border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;  //手書き風の枠の作成
      color: #fff;
      font-size: 30px;
      margin-top: 10px;
      font-weight: bold;
    }
    &__nav ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      font-size: 20px;
      // display: none; // 縮小した時にハンバーガーメニュの表示
    }
    &__nav li {
      margin: 10px;
    }

  }
  &__body {
    font-size: 40px;
    display: flex;
    justify-content: space-between;
    &__left {
      margin: 40px;
      width: 50%;
      &__top {
        color: #fff;
      }
      &__text {
        color: #fff;
        font-size: 20px;
        line-height: 40px;
        letter-spacing: 5px;
        text-indent: 1em;
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }
}

.search-top {    //検索機能
  position: relative;
  left: 20px;
  padding-left: 5px;
}

.Content {
  margin: 2px;
  background: image-url('book2.jpg');
  background-size: cover;
  animation: SlideIn 7.6s;
  @keyframes SlideIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  &__like {
    color:#fff;
    h2 {
      padding: .5em;
      font-size: 32px;
      &:first-letter {
        margin-right: .1em;
        font-size: 1.5em;
      }
    }
    &__end {
      color:#fff;
      font-size: 24px;
      margin: 50px;
      
      .swiper-container {
        width: 40%;  //全体の幅の設定
        margin-top: 20px;
        padding: 20px; //画像と矢印の幅の設定
      }

      .swiper-slide {
        text-align: center;
      }
    }
  }
}


.categorys {
  color: #fff;
  &:hover {
    background:#fff;
    color: #555;
    box-shadow: 0 4px 7px rgba(0,0,0,0.5);
    transform: translateY(-5px);
    cursor: pointer;
  }
}

.img {
  height: 300px;
  transition-duration: 2s;
  &:hover {
    box-shadow: 0 4px 7px 0 rgba(0,0,0,0.5);
    transform: rotate(-10deg);
    cursor: pointer;
  }
}

//データの一覧表示
.Data {
  margin: 80px;
  &__categorys {
    margin: 20px;
    h2 {
      font-size: 30px;
      text-align: center;
      font-weight: bold;
    }
    &__category {
      display: flex;
      margin: 20px;
      &__id {
        color: blue;
      }
      &__title {
        width: 70%;
        color:red;
        margin: 0 30px 0 30px;
      }
      &__language {
        color: green;
      }
    }
  }
  &__table {
    margin-top: 15px;
    &__list {
      display: flex;
      margin: 40px;
      a {
        text-decoration: none;  //下線の消去
        color: #000;
      }
      &__id {
        width: 5%;
      }
      &__title {
        width: 70%;
        margin-right: 30px;
        position: relative;
        display: inline-block;
        color: #1b1b1b;
        text-decoration: none;
        &:hover {
          cursor: pointer;
          text-decoration: none;
        }
        &:after {
          position: absolute;
          bottom: -8px;
          left: 0;
          content: '';
          width: 100%;
          height: 2px;
          background: #333;
          opacity: 0;
          visibility: hidden;
          transition: .3s;
        }
        &:hover::after {
          bottom: -4px;
          opacity: 1;
          visibility: visible;
        }
      }
      &__language {
        width: 10%;
      }
      &__btn {
        margin-right: 30px;
        display: block;
        position: relative;
        text-decoration: none;
        color: #1b1b1b;
        background: #fff;
        border: 1px solid #fff;
        &:hover {
          background: #f2f2f2;
          cursor: pointer;
          text-decoration: none;
          transform: translateY(-0.3em);
        }
      }
    }
  }
}
//ページネーションのデザイン
.Pagenation{
  margin-left: 120px;
  text-align: center;
  font-size: 18px;
  a {
    margin: 20px;
    color: #1b1b1b;
    text-decoration: none;
  }
}
// 新しい本の追加
.New {
  margin-bottom: 30px;
  text-align: center;
  &__book {
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.25);
    color: #fff;
    display: inline-block;
    padding: 0.6em 2em;
    margin: 0 01em;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    a {
      text-decoration: none;
      color: #000;
    }
    &:hover {
      box-shadow: 0 3px 6px 0 rgba(0,0,0,0.25);
      transform: translateY(-0.2em);
    }
  }
}

//プルダウンメニュー
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color:#000;

  li {
    float: left;
    position: relative;
    margin: 0 0 0 9px;
    padding: 3px;
    width: 160px;
    background: #fff;
    display: block;
  }

  .sub {
    display: none;
    position: absolute;
    margin-left: -6px;
    padding: 0;
    font-size: 16px;

    li a {
      padding: 5px 10px;
      margin-left: -5px;
      margin-right: -5px;
      margin-bottom: -5px;
      display: block;
      color:#000;
      text-decoration: none;
      transition: all 0.2s ease 0s;
      &:hover {
        text-decoration: none;
        text-decoration: underline;
        transform: translateY(-2px);
      }
    }
  }
}


  
   
      &:nth-child(2), &:nth-child(3) {
        top: 16px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
  }
  
 
}

このようになっています。
どなたかお願いします。。。

Comments

[K_3578]

大元のコードを見てないから知らんけど自分が適用したいcssの他に間違って適用しているものがあるとか、
若しくはリセットcss入れて無くてデフォルトのcssで変わってるとかかな。

[退会済みユーザー]

ありがとうございます。
見てみます。

[K_3578]

エディタの検索機能で「display:flex」を文字列として検索してみても良いと思います。
失念しててcssに以前使ってた設定が残ってるとかはよくあります。

[退会済みユーザー]

リセットcssを質問に載せました。
現在はこのようになっています。

[K_3578]

出来ればそもそものhtml載せて貰った方が早いと思います。

[退会済みユーザー]

かしこまりました。
のせて頂きました。

[K_3578]

(hamlかぁ･･･普段使わねえから読みづれぇ･･･)
一応読んでみますけど、一回回答に書いたとおり、どっかにdisplay:flex;がないか
探してみてください。多分個人的にはそのセンが濃いと思います

[退会済みユーザー]

(すみません....)
アドバイス頂いた通りエディタで検索機能で文字列として検索してみたのですが、どれも関係がないものでした。。。

[K_3578]

うーん･･･なんか適用されてそうなcssファイルって自分が意図してるものしかないんですかね？

[退会済みユーザー]

bootstrapを導入しています。

ログイン機能を導入した際にbootstrapを取り入れました！
質問に追加させて頂きます。

[K_3578]

Bootstrap使ってるならBootstrapタグも入れときましょう、
後5ですか？4.2ですか？それも質問文に追記してください。

[退会済みユーザー]

親切に色々ありがとうございます。。。
bootstrapは4.6.0になります。
追加させて頂きました。

[K_3578]

というかふと思ったのですが検証ツールで見たとき、どこからそのプロパティが適用されてるかとか普通は出る気がしますけど。
フレックスが適用されているの<style>内っぽいですしその中に書いているのでは？

[退会済みユーザー]

検証ツールで<style>の中にないのか調べてみたのですが、
display:flexはないです。。

ページ内のscssも記載します。

[K_3578]

あ、因みに私はほぼBootstrap使ったことないので詳しいことは知りません。
なんか弄って不具合出ても責任は負いかねますので

[K_3578]

application...ody云々にあるって事じゃないんですか？(追記を見て)

[K_3578]

>index.scss
思いっきりdisplay:flex;さん居りますけど

[退会済みユーザー]

display: flexはpaginationに関係がないところに適用させているので
原因だと思っていませんでした。。

[K_3578]

私も原因かは知りませんよ？
手元に全く同じ環境がある訳じゃないですし。
自分が使うソースは中身理解した上で使わないと

[退会済みユーザー]

全てのdisplay; flexをコメントアウトしてもやはり検証ツールみたら適用されてしまいます。。

[退会済みユーザー]

そうですよね。。

色々ありがとうございます！

[K_3578]

解決したんですか？

[退会済みユーザー]

解決していないです。。

gem kaminari
を使用してページネーションを実装しましたので、そちらに原因があるか少し調べてみます。。。

[K_3578]

解決してないならBAしないでください。解決済になってしまうので。

[退会済みユーザー]

かしこまりました

[K_3578]

因みにコメントアウトした後はスーパーリロードしてから確認しましたか？

[退会済みユーザー]

してみましたが変わりませんでした。。。

[K_3578]

因みに･･･application...body云々は見ましたか？検証ツール見る限りではそこから適用させてると思いますが

[退会済みユーザー]

application.html.hamlの中のbodyもみましたが
何も原因だと思うのがわかりませんでした。。。。

[K_3578]

じゃーもう私にはわかんねぇっす。

他の方が回答してくれるの待ってください。

あるとしたらbodyの後に後出しでdisplay:flex;を打ち消すようにするとかぐらいかな。
後出しが基本勝つんで。

[退会済みユーザー]

色々ありがとうございました。

また何かありましたらお願いします。

[K_3578]

ご自分でやってみて解決したらその時は自己解決としてクローズしておいてください。
私からは以上です。

Answer 1

cssは基本的に後出しした方が勝つので、指定した後に何らかでdisplay:flex;されてるか、
コメントに書いたとおり、以前適用していたcssが残っている可能性もあります。これに関しては
Ctrl+Fとかでdisplay:flex;を探してください。

後は、他の意図していないcssが作用している事もあります。
階層見てみて、なんか怪しいcssあったら中身確認した方がいいかも。