[超初心者向け] Rails5でアプリ開発後、Bootstrap4で効率よくデザインする方法

はじめに

ここではRailsアプリを作成後に、デザインで壁に当たらないでいいようにするため、Bootstrap4を活用した、効率のいいデザイン方法について研究していきたいと思います。Railsアプリ作成後、デザインを高速化し、さっさとモックを作るためのページです。
共有しながら一緒に学んでいけたらと思いますので、アドバイス等いただければ嬉しいです。

設定環境

• OS
  • Mac OS X
    • 10.12.6
• Software
  • PostgreSQL
    • 10.1
  • Ruby
    • 2.5.0
  • Rails
    • 5.1.5

Railsアプリのデザインを始めるにあたって

Railsアプリをデザインする上では、Bootstrapだけの知識ではなく、Railsアプリ向けのデザイン要素も出てくるので、Railsでのデザイン機能の使い方について考えていきましょう。

Bootstrapとは?

Bootstrapについてはこちらにまとめてあります。
https://qiita.com/mxsha/items/085d46f4da73f91322ed

Railsアプリ向けのデザイン要素とは?

Railsアプリをデザインする上でBootstrapなどを活用できる部分と、画像表示方法などRailsアプリで押さえておくべきポイントがいくつかあるので紹介します。

画像表示

これにはだいぶはまってしまいました。
通常のHTML,CSS等の静的なサイトだと画像表示方法はimageタグですが、
Railsのimageタグは別になっているようです。
<%= image_tag '画像ファイル名' %>で画像を表示
このような形ですね。詳細は以下になります。
https://qiita.com/sanstktkrsyhsk/items/8e8159f5c029a8e01333

背景画像について
背景画像について困っていた点はある一定の枠の中（例えば

の中）に、背景画像を入れてトップページを作る部分だったのですが、BootstrapにはJambotronという要素を加えることで、トップページのメインイメージ部分を作ることが可能でした。

このリンクが参考になります。
https://tonari-it.com/bootstrap-jumbotron/

ただRailsアプリ上だと以下のようなRailsでの画像表示としてのコードとの融合が必要になります。
主には従来だと(images/bg.png)のようなパスが入っているのですが、
Railsでの画像表示だと<%= asset_path 'bg.png' %>のようなパスにしないと画像が表示されません。

    <style type="text/css">
    .jumbotron { 
      background:url(<%= asset_path 'bg.png' %>) center no-repeat; 
      background-size: cover;
    }
    </style>

その他

Rails特有のコード
現在研究中です。

参考？

参考

[<%= image_tag '画像ファイル名' %>で画像を表示]
(https://qiita.com/sanstktkrsyhsk/items/8e8159f5c029a8e01333)