LoginSignup
3
0

More than 1 year has passed since last update.

Railsアプリの全体的な色とヘッダーを決める

Posted at

目的

さっきのテンプレートの記事で(ちょっと変えてるけど)すごく楽になった。うれしい。

今回は、アプリの全体的な色とヘッダーを決めようと思います。
絶対に機能のことから考えるべきなんでしょうけど、見た目出来た方がテンション上がるのでやらせてください。
手戻りが大量発生しそうだけど、それで懲りたら次から考えるから...!

今回やること

今回の目標は以下の3つ。

  • 左上に出てくる時間を消す!
    image.png
  • 全体的な色味を決める
  • ヘッダーを設定する

環境

  • windows 10
  • ruby 3.0.4
  • rails 6
  • Bootstrap 5.0.2

いざ出陣

左上の時間を消す

まず、この時間が何なのかというと「rack-mini-profiler」というgemによる機能らしい。
なら普通にgemfileからコメントアウトすれば良いじゃん、と思った僕。
ただ、他の機能でも使うらしい...

てことで、「rack-mini-profiler」はインストールしたまま消す。
config > application.rb で、 config.load_defaults 6.1 の下にconfig.middleware.delete(Rack::MiniProfiler) を追加すると消えた!

config\application.rb
config.load_defaults 6.1
<!-- 以下を追加 -->
config.middleware.delete(Rack::MiniProfiler)

image.png
簡単!これでいいのかは知らない。

全体的な色味を決める

これ、大事よね。モチベーションが変わります。
途中でダサいとか思っちゃたら作るのやめそうなので...
配色のサイトを漁ります!

このサイト良いかも!
5色ずつ作ってくれて、気に入った色があれば固定して他の4色を作ってくれる。
全体的には、淡い青色でいきたいので #60c1d9 を固定して他の4色を選んでもらいます。
僕は配色センスが絶望的にないので、1色だけ固定して他は選んでもらいました。
君に決めた!
image.png
赤はキャンセル系で使いたくなるかなと思って、赤っぽい色がが入っているセットを選びました。

ヘッダーを設定する

まず何に手を付けていいか分かりませんが、Usersコントローラーを作成することにします。
コマンドプロンプトでアプリのファイルに入り、以下のコマンドを実行します。

cmd
rails g controller users

せっかくなのでBootstrapを使って、ヘッダーを設定してみます。

まずアクションの定義。
app > controllers フォルダに入っているuser_controller.rbを以下のように編集します。

app/controllers/users_controller.rb
class UsersController < ApplicationController
  def index
    
  end
end

次にルーティング。
configフォルダにあるroutes.rbファイルを以下のように編集します。

config\routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  resources :users
  root   'users#index'
end

ヘッダーとは関係ないですが、ビューも作っておきます。
app > views > users フォルダにindex.html.erbを作って、以下を記述します。

app\views\users\index.html.erb
Hello World!

本題のヘッダーを記述。

公式の例を <head> </head> の中にそのまま貼ってみます。

app\views\layouts\application.html.erb
  <head>
    <title>Whereabouts</title>
    <!-- 略 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <!-- 略 -->
      </div>
    </nav>
  </head>

image.png

プルダウンが表示されない

画面は表示されますが、Dropdownが効きませんでした。
これ前もあって、時間かかったのにメモってないからまた調べます...

公式を見返したら書いてありました。(そりゃそう)

Bootstrap5はjQueryに依存していないそうですが、ドロップダウン、ポップオーバ、ツールチップは Popper ってやつに依存しているそうです。

以下の <script> のいずれかを、ページの最後の </body> タグの直前に記述してください。

bootstrap.bundle.jsとbootstrap.bundle.min.js` の両方は、ツールチップとポップオーバーのために Popper を含んでいます。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

これを無視していたからですね。
</head> の前に入れて無事プルダウンが表示されました。
image.png

ヘッダーの背景色

背景を #d7e0cf にしたいので、ヘッダーは #60c1d9 かな?
app > assets > stylesheets > application.scssを編集して色を変えます。

app\assets\stylesheets\application.scss
$light: #60c1d9; /*これを追加*/

@import "bootstrap";

CSSで編集もできるみたいだったけど、こっちの方がかっこ良い気ががする。

ロゴを追加

左上に表示されるアプリ名にロゴを追加します。
その方が可愛いから。さすがにロゴは後で考えましょう。
とりあえずAwesomeのアイコンを置いておきます。

gemfile
# 追加
gem "font-awesome-sass"
app\assets\stylesheets\application.scss
$light: #60c1d9;

@import "bootstrap";
@import "font-awesome"; /*これを追加*/
app\views\layouts\application.html.erb
<!-- 変更前 -->
<a class="navbar-brand" href="#">Navbar</a><!-- 変更後 -->
<a class="navbar-brand" href="#">
  <i class="fa-solid fa-image"></i>
  Bootstrap
</a>

アプリ名のフォント

アプリ名のフォントは Fredoka One にしました!

app\views\layouts\application.html.erb
<!-- これを追加 -->
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

image.png
かわいい!

Sassマップの書き換え

お昼ご飯を食べて思ったんだけど、 $light: #60c1d9; みたいに、決まっているやつ全部書き換えようと思った。

これにある変数を、使うと決めた色に書き換えます。
(決まってない部分が多くてめちゃくちゃだけど...)

app\assets\stylesheets\application.scss
$secondary: #60c1d9;
$success: #e2c788; /*これを追加*/
$info: #60c1d9; /*これを追加*/
$warning: #60c1d9; /*これを追加*/
$danger: #CC496B; /*これを追加*/
$light: #60c1d9; /*これを追加*/
$dark: #284063; /*これを追加*/

@import "bootstrap";
@import "font-awesome";

検索ボタンをホバーしたときの色

$secondary: #60c1d9; としたので、
検索ボタンをホバーしたときの色が #e2c788 になった!かわいい。
image.png

input要素をフォーカスしたときの枠線色

input要素をフォーカスしたとき、枠線色のデフォルト青だったので #e2c788 にしようと思って border-color: を変えたが青が残った...
調べてみたら box-shadow: も変えないとダメっぽい。できた。

app\assets\stylesheets\application.scss
.form-control:focus {
  border-color: $success;
  box-shadow: 0 0 0 0.1rem $success;
}

image.png

まとめ

今日かなり作業したのだけれど、調べながら記事書きながらだとこのぐらいしか進まないですか...
image.png
次回は背景設定して、マイページ作ろうかな!

余談

ミドルバックのインプットしたくて始めたはずなのに、フロントでうろちょろしてます。
でも楽しいならOKです!
明日もやるよん。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0