RailsのAssetPiplineは便利なようで結構CSSが利かないので困っています。
今は面倒くさくてHTMLに直接style書いてしまっています。
ただ、これはこれで保守性を下げてしまって良くないのでcss, scssから適用させるように変えたいと考えております。
ということでfrontpageのところに以下のようなslimのコードを記載してバックグラウンドの動画を流そうとしております。
ruby
1// -- Background Video -- 2= stylesheet_link_tag "frontpage", :media => "all" 3#headervideo 4 = video_tag "/assets/vegewel-opening.mp4", :autoplay => true, :loop => true, :poster => "/assets/vegewel-opening.gif" 5
CSSのところはこうしています。application.cssはこちら。
ruby
1 * 2 *= require_self 3 */
そしてfrontpage.scssはこちらでセンタリングしようとしております。
ruby
1#headervideo{ 2 margin: 0 auto; 3} 4
CSSのディレクトリはこのようになっています。
/app/assets/stylesheets application.css menu.scss area.scss restaurant.scss bootstrap_and_overrides.css.less restaurant_type.scss flatly review.scss flatly.css slick frontpage.scss slick.css genre.scss users
assets.rbはこのように設定しており、サーバの再起動も行っています。
ruby
1# Rails.application.config.assets.precompile += %w( search.js ) 2Rails.application.config.assets.precompile += %w( flatly.css ) 3Rails.application.config.assets.precompile += %w( flatly.js ) 4Rails.application.config.assets.precompile += %w( slick.css ) 5Rails.application.config.assets.precompile += %w( frontpage.scss )
とここまでやっているにもかかわらず、Chromeでheadervideoの箇所をアタッチしてもmarginが適用されていません。他に何が必要なのでしょうか?どなたかご存知のかたおりましたらご教示ください。
あなたの回答
tips
プレビュー