こちら参考になりそうです。
reset css railsで検索してます。
https://qiita.com/oyuki04/items/1f198ae767c1ef352604
1Like
Herokuでデプロイ後、ビューファイルが崩れてしまいます。
こんにちは。
プログラミング初心者のkouと申します。
初めての質問投稿なので不備や失礼があるかもしれませんが
ご教授頂けると嬉しいです。
よろしくお願致します！！
解決したいこと
HTMLとCSSでトップページのビューファイルを作成しています。
開発環境で形を作り、Herokuでデプロイをしたところ
ビューが崩れてしまいました。
こちらの画像が開発環境で↓
https://gyazo.com/d113aa3920d35c3ece23c9886e9ac323
こちらがデプロイ後です↓
https://gyazo.com/4833e53174d32b2e5c93d9f8dc081088
サイドバーのメニューをul要素とli要素で作成しているのですが
開発ツールで確認したところ、こちらの画像のように
デプロイ後はなぜか padding-leftに40px
margin-topにも16pxが入っていました。
開発環境ではmarginもpaddingも入れていません。
https://gyazo.com/1a504517d0e73cb2e58edcced8507ab2
_side.html.erb
<div class="main_left">
<ul>
<li class="li_name">
<%= image_tag "home.png", class:"li-pict" %>
<%= link_to "ホーム", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= image_tag "mypage.png", class:"li-pict" %>
<%= link_to "マイページ", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= image_tag "create.png", class:"li-pict" %>
<%= link_to "掲示板作成", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= image_tag "favorite.png", class:"li-pict" %>
<%= link_to "お気に入り", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= image_tag "category.png", class:"li-pict" %>
<%= link_to "カテゴリー", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= image_tag "event.png", class:"li-pict" %>
<%= link_to "イベント", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= image_tag "news.png", class:"li-pict" %>
<%= link_to "ニュース", root_path, class: "li_name_btn" %>
</li>
<li class="li_name">
<%= link_to "cluster", root_path, class: "cluster_btn" %>
</li>
<li class="li_name">
<%= link_to "Instagram", root_path, class: "instagram_btn" %>
</li>
<li class="li_name">
<%= link_to "Twitter", root_path, class: "twitter_btn" %>
</li>
</ul>
</div>
side.css
.main_left {
width: 15vw;
height: 100%;
padding: 20px;
background-color: #FFFFFF;
}
.li_name {
font-size: 20px;
margin-bottom: 25px;
list-style: none;
}
.li_name_btn {
margin-left: 10px;
text-decoration: none;
color: #1574FF;
}
.cluster_btn {
background: #1574FF;
color: #ffffff;
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-radius: 4px;
}
.instagram_btn {
background: #e1306c;
color: #ffffff;
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-radius: 4px;
}
.twitter_btn {
background: #55acee;
color: #ffffff;
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-radius: 4px;
}
自分で試したこと１
リセットCSSの記述
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>ClusterBoard</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald&family=Rubik+Microbe&display=swap" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
自分で試したこと２
application.css
ボックスサイズの記述
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
* {
box-sizing: border-box;
}
0
2Answer
Comments
@kou0404
Questionerありがとうございます！！
解消できました（；＿；）
application.html.erbにリセットcssを記述するのではなく
stylesheetsにリセットcssファイルを作成することで
本番環境上でビューファイルが崩れなくなりました！
ありがとうございました。- よかったです！
同じような記事ありましたので参考にしてみては
0Like
Comments
@kou0404
Questionerコメントありがとうございます。
記事の方を確認させて頂きました！
JavaScriptの方はまだ使用していませんので、
application.cssの方を確認してみました。
こちらのファイルでは
* {box-sizing: border-box;}
を記述しています。
こちらを
*= require_tree .
*= require_self
*/
* {
box-sizing: border-box;
}
これから下記に変更してみましたが、解消されませんでした；；
*= require_tree .
*= require_self
* {
box-sizing: border-box;
}
*/- 残念です！😭