Ruby on Rails 入門5-2（デザインのみ）

はじめに行っておくと今回はHTML, CSS関連のことの内容です。機能を作りたいって人は飛ばしていただいて結構です。

​前回

やったこと

HTML, CSS(sass), Font Awesome, BULMA, ちょっとRuby

Before

After

Gemfile

新しく BULMA（CSSフレームワーク）とFont Awesome（アイコンがつかえるツール？）導入します。

# 末尾に追記
gem 'font-awesome-sass', '~> 5.4.1'
gem "bulma-rails", "~> 0.4.2"

$ bundle install

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, 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
*/
// 以下3行追加
@import 'font-awesome-sprockets';
@import 'font-awesome';
@import 'bulma';

app/assets/stylesheets/users.scss

一度はusers.scssに書いたけど使わなそうなので消す。ない場合、はないでOK

// 4行削除
// .container {
//   width: 1024px;
//   margin: 0 auto;
// }

app/views/layouts/application.html.erb

今は意味ないけどレスポンシブ対応したいので、headタグ内に記載

<meta name="viewport" content="width=device-width, initial-scale=1">

header内右端のリンクを文字からプロフィール画像に変更。

  <header id="header" class="">
   <div class="container">
     <a href="/home" title="Home" class="top">Home</a>
     <nav>
       <ul>
         <!-- if else 内を修正 -->
         <% if user_signed_in? %>
           <li>
             <%= link_to user_path(current_user.id), title: "ユーザ画面" do %>
               <%= attachment_image_tag @user, :profile_image, :fill, 50, 50, format: 'jpeg', fallback: "no_image.png", size: "50x60" %>
             <% end %>
           </li>
           <!-- ログアウトの見た目だけ作成 -->
           <li><a href="" title=""><i class="fas fa-sign-out-alt"></i></a></li>
         <% else %>
           <li>
             <%= image_tag "no_image.png", size: "50x60" %>
           </li>
         <% end %>
         <!-- if else 内を修正 -->
       </ul>
     </nav>
   </div>
 </header>

app/assets/images/no_image.png

↓画像をディレクトリ内に置く

app/controllers/home_controller.rb

  def index
   if user_signed_in?
     @user = User.find(current_user.id)
   end
 end

app/views/users/show.html.erb

<div class="user-container">
 <p id="notice"><%= flash[:notice] %></p>
 <div class="main-container-title">
   <h1>
     ユーザー情報
     <%= link_to edit_user_path(@user.id), class: "edit" do %>
       <i class="far fa-edit"></i>
     <% end %>
   </h1>
 </div>
 <div class="user-fields">
   <div class="user-field">
     <label for="">ニックネーム</label>
     <p><%= @user.name %></p>
   </div>
   <div class="user-field">
     <label for="">メールアドレス</label>
     <p><%= @user.email %></p>
   </div>
   <div class="user-field">
     <label for="">自己紹介</label>
     <p><%= @user.introduction %></p>
   </div>
   <div class="user-field">
     <label for="">画像</label>
     <!-- 画像を最大300*300で表示 -->
     <p><%= image_tag attachment_url(@user, :profile_image, :fill, 300, 300, format: "jpg") %></p>
   </div>
 </div>
</div>

app/views/users/edit.html.erb

<div class="user-container">
 <p id="notice"><%= flash[:notice] %></p>
 <div class="main-container-title">
   <h1>ユーザー情報</h1>
 </div>
 <div class="user-fields">
   <%= form_for(@user) do |f| %>
     <div class="user-field">
       <label for="">ニックネーム</label>
       <p><%= f.text_field :name, class: "input" %></p>
     </div>
     <div class="user-field">
       <label for="">メールアドレス</label>
       <p><%= f.text_field :email, class: "input" %></p>
     </div>
     <div class="user-field">
       <label for="">自己紹介</label>
       <p><%= f.text_area :introduction, class: "textarea" %></p>
     </div>
     <div class="user-field">
       <label for="">プロフィール画像</label>
       <p><%= f.attachment_field :profile_image %></p>
     </div>
     <div class="user-bottons">
       <%= link_to "キャンセル", :back, class: "button is-white user-botton" %>
       <%= f.submit "保存", class: "button is-primary user-botton" %>
     </div>
   <% end %>
 </div>
</div>

完成