今回はRuby on RailsでBootstrap4を使用しながらCSSを使用する方法を記載したいと思います。
最終的にはECサイトを作成したいと思います。
参考サイト→Rails 使用するCSSを指定する
参考サイト→BootstrapでNavbarにロゴ画像をいれるとズレる問題の解決法
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| ruby | 2.4.2p198 |
| Rails | 5.1.4 |
スタイルシートを配置する
ディレクトリの場所「app/assets/stylesheets/」
対象ファイル「custom.css.scs」
[ファイルの作成]
|
1 |
$ touch custom.css.scss |
[ファイルの確認]
|
1 |
$ ls -al |
[実行結果]
|
1 2 3 4 5 6 7 |
total 24 drwxrwxr-x 2 uchida uchida 4096 Dec 20 09:19 . drwxrwxr-x 6 uchida uchida 4096 Dec 14 13:33 .. -rw-rw-r-- 1 uchida uchida 709 Dec 18 20:58 application.css_bk -rw-r--r-- 1 uchida uchida 723 Dec 19 17:06 application.scss -rw-rw-r-- 1 uchida uchida 71 Dec 20 09:12 custom.css.scss -rw-rw-r-- 1 uchida uchida 179 Dec 14 14:49 shopping.scss |
[ファイルの編集]
|
1 |
$ vi app/assets/stylesheets/custom.css.scss |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 |
@import "bootstrap"; // ロゴ .navbar-brand { background: url("/images/logo/logo_001.png") no-repeat left center; background-size: contain; height: 50px; width: 250px; } |
Viewでスタイルシートを読み込む
ディレクトリの場所「app/views/shopping/」
対象ファイル「index.html.erb」
[ファイルの編集]
|
1 |
$ vi app/views/shopping/index.html.erb |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<%= stylesheet_link_tag "custom", :media => "all" %> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar navbar-dark bg-dark"> <div id="head-logo"> <%= link_to "", '/', class:"navbar-brand" %> </div><!-- head-logo --> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="Navber"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ドロップダウン </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">メニュー1</a> <a class="dropdown-item" href="#">メニュー2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">その他</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">無効</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索..."> <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button> </form> </div><!-- /.navbar-collapse --> </nav> <div id="header"> <div class="nav-left"> </div><!-- nav-left --> <div id="nav-search"> <%= form_tag '/', :method => 'get' do %> <div class="input-group"> <%= text_field_tag :search, params[:search], placeholder: "キーワード検索", class: "form-control" %> <span class="input-group-btn"> <%= button_tag fa_icon("search"), :name => nil, class: "btn btn-primary " %> </span> </div><!-- input-group --> <% end %> </div><!-- nav-search --> </div><!-- header --> <h1>Hello</h1> <p> 現在登録されているユーザは次のとおりです。 </p> <p> <!-- アクションから渡されてきたモデルクラスのオブジェクトの配列の数だけ順にメールアドレスとパスワードを取得して画面に>表示 --> <% @users.each do |user| %> [メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br /> <% end %> </p> |
[追加した部分]
|
1 |
<%= stylesheet_link_tag "custom", :media => "all" %> |
[修正した部分]
|
1 |
<%= link_to "", '/', class:"navbar-brand" %> |
(SCSSなら)プリコンパイルに追加
ディレクトリの場所「config/initializers/」
対象ファイル「assets.rb」
※私の場合は、「application.css」→「application.scss」に変更している為。下記の手順をします。
「application.css」に記載してある*= require_tree .を外している場合は、SCSSファイルがプリコンパイルされないため、Sprockets::Rails::Helper::AssetNotPrecompiledとエラーが発生します。
これを解決するには、config/initializers/assets.rbを開き、次のようにcustom.css.scssをプリコンパイル対象に指定します。
[ファイルの編集]
|
1 |
$ vi config/initializers/assets.rb |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# Be sure to restart your server when you modify this file. # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = '1.0' # Add additional assets to the asset load path. # Rails.application.config.assets.paths << Emoji.images_path # Add Yarn node_modules folder to the asset load path. Rails.application.config.assets.paths << Rails.root.join('node_modules') # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets # folder are already added. # Rails.application.config.assets.precompile += %w( admin.js admin.css ) # スタイルを適用 Rails.application.config.assets.precompile += %w( custom ) |
[追加した部分]
|
1 2 |
# スタイルを適用 Rails.application.config.assets.precompile += %w( custom ) |
Railsサーバ再起動
ちょっと再起動のコマンド知らないので、一旦は停止してから起動します。
「Ctrl-C」でサーバーを停止。その後下記コマンドでサーバー起動。
|
1 |
$ rails server -b 0.0.0.0 |
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
これで一通りの作業が終了しました。
Ruby on Rails5でコントローラーからテンプレートの表示
Ruby on Rails5でモデルの作成とデータベースの利用
Ruby on Rails5でBootstrap4デザインにする
Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法
Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)
Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法
Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置
Ruby on Rails5でBootstrap4を使用しながらCSSを使用する
Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法
Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成
