演習課題「コンテナを追加する」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られており、Bootstrapが導入してあります。
エディタを使って、app/views/layouts/application.html.erbを修正して、Bodyタグにcontainerクラスを追加してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
＃01:RailsにBootstrapを導入しよう
このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリのデザインを整えて、スマートフォン対応と日本語表示を実現します。
まず初めに、HTMLテンプレートのBootstrapを導入します。
- paizaの場合： New Broweserタブに表示されたアドレスに「:3000」を追加する
例 https://xxx.learning.paiza-user-learning.cloud:3000
- 作成した掲示板にアクセスする：https://xxx.learning.paiza-user-learning.cloud:3000/categories
- 自分のPCでrailsを起動する場合： ブラウザで「http://localhost:3000」にアクセスする
※ xxxには、コンテナ名が入ります
「CTRL」キー(コントロールキー)を押しながら「C」のキーを押します。
Gemfileを修正gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 5.0'
コマンドを実行$ bundle install
app/assets/stylesheets/にある「application.css」のファイル名をapp/assets/stylesheets/application.css.scssに変更する
app/assets/stylesheets/application.css.scssを修正@import 'bootstrap-sprockets';
@import 'bootstrap';
/* universal */
body {
padding: 60px 15px 0;
}
app/assets/javascripts/application.js//= require bootstrap-sprockets
app/views/layouts/application.html.erbを修正<body>
<div class='container'>
<%= yield %>
</div>
</body>
- Linuxコマンド集 - ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20060224/230573/
- Ruby on Railsサービス開発逆引き辞典
http://code.materializer.co/index.html
- Railsドキュメント
http://railsdoc.com/
- RubyGems.org | your community gem host
https://rubygems.org/
- Ruby on Rails 初心者必見！パッケージ管理ツール『gem』を徹底解説 -Code部
https://blog.codecamp.jp/rails-gem
- オブジェクト指向スクリプト言語Ruby ： ライブラリ
https://www.ruby-lang.org/ja/libraries/
- RubyGems - Wikipedia
https://ja.wikipedia.org/wiki/RubyGems
- Bundlerを使ったGemパッケージの管理 - Ruby on Rails入門
http://www.rubylife.jp/rails/ini/index2.html
- Rails bootstrapの導入 sassのススメ - Qiita
http://qiita.com/shizuma/items/83cdadbe0a629f1f74d1
- 音速開発！RailsでBootstrapを導入する方法〜Less、Sass、Scss〜 | 侍エンジニア塾ブログ
http://www.sejuku.net/blog/11043
- 今さら聞けない？！Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
http://directorblog.jp/archives/51753533.html
- Sassってなに？だった私がSassの使い方を解説してみた | dwango creators' blog（ドワンゴクリエイターズブログ）
http://creator.dwango.co.jp/9668.html
- とほほのSass入門
http://www.tohoho-web.com/ex/sass.html