WebページはHTMLとCSSで実装されていますが、最初からCSSを書いて実装していくと時間がかかります。
Bootstrapを使用すると一からデザインを考えて、CSSを作成する必要がなく、Bootstrapで作成されたデザインやレイアウトのフレームワークを使用でき簡単に統一感のあるデザインを実現できます。
BootstrapのようなデザインのテンプレートのCSSをCSSフレームワークと言います。
Gemfileに定義を追加
Gemfileに以下の記載を追加してください。
Gemfileについてわからない方は以下を参考にしてください。
gem 'bootstrap', '~> 4.0.0'
gem 'mini_racer'Gemをインストール
DockerをビルドすることでGemをインストールすることができます。
ビルドは以下のコマンドで行うことができます。
docker-compose build拡張子の変更
「アプリ名/app/assets/stylesheets/application.css」にcssファイルがあります。
こちらの拡張子cssを拡張子scssに変更します。
scssファイルの編集
先ほどファイル名を変更した「アプリ名/app/assets/stylesheets/application.scss」を開きます。
/*
* 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, vendor/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
*/
requireと記載されている2行は削除します。
そして以下のように「@import」を追加します。
/*
* 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, vendor/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.
*
*/
@import "bootstrap";jsファイルの編集
「/アプリ名/app/assets/javascripts/application.js」を編集します。
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .「jquery」を「jquery3」に変更し、「popper」と「bootstrap-sprockets」を追加します。
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
コメント