はじめに
自分の学習復習のために、アプリを一から作成する手順を記事にしてます。
今回は #2.5 のレイアウト調整になります。
目次
1.Bootstrap,font-awesomeの導入
2.各ページのレイアウト調整
1.Bootstrap,font-awesomeの導入
- 1.gemファイルの追加
- 2.application.jsにbootstrap,font-awesomeを呼び出す記述を書く
- 3.Bootstrap,font-awesomeをSCSSに読み込ませる(今回はSCSSを使用)
の3つを行い、Bootstrap,font-awesomeの導入をしていく。
1.gemファイルの追加
gemfile
:
:
#bootstrapを利用できるようにする
gem 'bootstrap', '~> 4.5'
gem 'jquery-rails'
#font awesomeも使えるようにする
gem 'font-awesome-sass', '~> 5.13'
2.application.jsにbootstrap,font-awesomeを呼び出す記述を書く
application.js
#ここから
//= require jquery3
//= require popper
//= require bootstrap-sprockets
#ここまでを記述
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
3.Bootstrap,font-awesomeをSCSSに読み込ませる(今回はSCSSを使用)
「application.css」を「application.scss」に変更します。
application.scss
*= require_tree .
*= require_self
*/
#SCSSに読み込ませる記述をする
@import "bootstrap";
@import 'font-awesome-sprockets';
@import 'font-awesome';
※「SCSS」はCSSの拡張言語で、CSSにはない機能も利用することができます。
今回は、SCSS用のBootstrapを使用するため、拡張子を変更する必要があります。
以上でbootstrap,font-awesomeを使う準備が整いました。次からはレイアウトの調整を行っていきたいと思います！
2.各ページのレイアウト調整
ヘッダー部分
application.html.erb
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">
<span>snow review</span>
</a>
<div>
<ul class="navbar-nav ml-auto">
<% if user_signed_in? %>
<li>
<%= link_to "投稿一覧", student_posts_path, class:"nav-link" %>
</li>
<li>
<%= link_to "マイページ", user_path(current_user), class:"nav-link" %>
</li>
<li>
<%= link_to "ログアウトする", destroy_user_session_path, method: :delete, class:"nav-link" %>
</li>
<% else %>
<li>
<%= link_to "新規登録", new_user_registration_path %>
</li>
<li>
<%= link_to "ログイン", new_user_session_path %>
</li>
<% end %>
</ul>
</div>
</div>
</nav>
</header>
<%= yield %>
</body>
投稿一覧ページ
student_posts/index.html.erb
<div class="col-10 offset-2 mt-2 mb-2">
<h3 class="">投稿一覧(<%= link_to "投稿ページへ", new_student_post_path %>)</h3>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card" style="width: 18rem;">
<% @student_posts.each do |student| %>
<div class="card-header">
<%= link_to student_post_path(student) do %>
投稿No.<%= student.id %>
<% end %>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">タイトル : <%= student.title %></li>
<li class="list-group-item">内容 : <%= student.body %></li>
<li class="list-group-item">分野 : <%= student.field %></li>
<li class="list-group-item">ステータス : <%= student.status %></li>
</ul>
<% end %>
</div>
</div>
</div>
</div>
投稿詳細ページ
student_posts/show.html.erb
<div class="col-10 offset-2 mt-2 mb-2">
<h3 class="">投稿詳細</h3>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card" style="width: 18rem;">
<div class="card-header">
投稿No.<%= @student_post.id %>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">タイトル : <%= @student_post.title %></li>
<li class="list-group-item">内容 : <%= @student_post.body %></li>
<li class="list-group-item">分野 : <%= @student_post.field %></li>
<li class="list-group-item">ステータス : <%= @student_post.status %></li>
</ul>
</div>
</div>
</div>
</div>
マイページ
users/show.html.erb
<h2>マイページ</h2>
<div class="container">
<div class="row">
<div class="col-2 bg-secondary pl-5">
<!--ActiveStorageを用いて-->
<% if @user.image.attached? %>
<%= image_tag @user.image.variant(resize:'200x200'), class:"rounded-circle" %>
<% else %>
<%= image_tag 'no_image.jpg', class:"rounded-circle" %>
<% end %>
</div>
<div class="col-10 bg-secondary">
<div>名前 : <%= @user.name %></div>
<div>自己紹介 : <%= @user.introduction %></div>
<div>ステータタス : <%= @user.status %></div>
<div><%= link_to '編集する', edit_user_path(@user) %></div>
</div>
</div>
</div>
最後に
今回はレイアウト部分での調整でした。
今後の追加機能の際に、わかりやすくするためにレイアウトを調整しました。
軽く色をつけたり位置を変更したりしただけなので、レイアウト部分はお好みで変えていきましょう。
今は軽く調整しただけですが、後からレイアウトはがっつり調整していこうと思っています！