Q&A
大元のコードを見てないから知らんけど自分が適用したいcssの他に間違って適用しているものがあるとか、
若しくはリセットcss入れて無くてデフォルトのcssで変わってるとかかな。
解決したいこと
ページネーションを中央に当てたい
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); } } } }
このようになっています。
どなたかお願いします。。。
ありがとうございます。
見てみます。
エディタの検索機能で「display:flex」を文字列として検索してみても良いと思います。
失念しててcssに以前使ってた設定が残ってるとかはよくあります。
リセットcssを質問に載せました。
現在はこのようになっています。
出来ればそもそものhtml載せて貰った方が早いと思います。
かしこまりました。
のせて頂きました。
(hamlかぁ･･･普段使わねえから読みづれぇ･･･)
一応読んでみますけど、一回回答に書いたとおり、どっかにdisplay:flex;がないか
探してみてください。多分個人的にはそのセンが濃いと思います
(すみません....)
アドバイス頂いた通りエディタで検索機能で文字列として検索してみたのですが、どれも関係がないものでした。。。
うーん･･･なんか適用されてそうなcssファイルって自分が意図してるものしかないんですかね？
bootstrapを導入しています。
ログイン機能を導入した際にbootstrapを取り入れました！
質問に追加させて頂きます。
Bootstrap使ってるならBootstrapタグも入れときましょう、
後5ですか？4.2ですか？それも質問文に追記してください。
親切に色々ありがとうございます。。。
bootstrapは4.6.0になります。
追加させて頂きました。
というかふと思ったのですが検証ツールで見たとき、どこからそのプロパティが適用されてるかとか普通は出る気がしますけど。
フレックスが適用されているの<style>内っぽいですしその中に書いているのでは？
検証ツールで<style>の中にないのか調べてみたのですが、
display:flexはないです。。
ページ内のscssも記載します。
あ、因みに私はほぼBootstrap使ったことないので詳しいことは知りません。
なんか弄って不具合出ても責任は負いかねますので
application...ody云々にあるって事じゃないんですか？(追記を見て)
>index.scss
思いっきりdisplay:flex;さん居りますけど
display: flexはpaginationに関係がないところに適用させているので
原因だと思っていませんでした。。
私も原因かは知りませんよ？
手元に全く同じ環境がある訳じゃないですし。
自分が使うソースは中身理解した上で使わないと
全てのdisplay; flexをコメントアウトしてもやはり検証ツールみたら適用されてしまいます。。
そうですよね。。
色々ありがとうございます！
解決したんですか？
解決していないです。。
gem kaminari
を使用してページネーションを実装しましたので、そちらに原因があるか少し調べてみます。。。
解決してないならBAしないでください。解決済になってしまうので。
かしこまりました
因みにコメントアウトした後はスーパーリロードしてから確認しましたか？
してみましたが変わりませんでした。。。
因みに･･･application...body云々は見ましたか？検証ツール見る限りではそこから適用させてると思いますが
application.html.hamlの中のbodyもみましたが
何も原因だと思うのがわかりませんでした。。。。
じゃーもう私にはわかんねぇっす。
他の方が回答してくれるの待ってください。
あるとしたらbodyの後に後出しでdisplay:flex;を打ち消すようにするとかぐらいかな。
後出しが基本勝つんで。
色々ありがとうございました。
また何かありましたらお願いします。
ご自分でやってみて解決したらその時は自己解決としてクローズしておいてください。
私からは以上です。
回答1件
0
cssは基本的に後出しした方が勝つので、指定した後に何らかでdisplay:flex;されてるか、
コメントに書いたとおり、以前適用していたcssが残っている可能性もあります。これに関しては
Ctrl+Fとかでdisplay:flex;を探してください。
後は、他の意図していないcssが作用している事もあります。
階層見てみて、なんか怪しいcssあったら中身確認した方がいいかも。
投稿2021/05/11 02:46
総合スコア1282
あなたの回答
tips
プレビュー
