#2.5 レイアウトの調整

#はじめに
自分の学習復習のために、アプリを一から作成する手順を記事にしてます。
今回は #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>
```

##最後に
今回はレイアウト部分での調整でした。
今後の追加機能の際に、わかりやすくするためにレイアウトを調整しました。
軽く色をつけたり位置を変更したりしただけなので、レイアウト部分はお好みで変えていきましょう。
今は軽く調整しただけですが、後からレイアウトはがっつり調整していこうと思っています！