Ruby on Rails 入門3
前回長かったーから少し短めにしようと思う。今回はログインしてるよ！ってのをわかるようにしていこうかなと。よくあるよね画面の端っこにユーザー名とかでてるやつ。↓前回のやつ
完成系
app/views/layouts/application.html.erb
ソース貼り付けるとなぜか2階層目のインデントがスペース1つになってしまう。。。すみません。
全ページに使用するものはapplication.html.erbに記述するのでここを修正します。
<!DOCTYPE html>
<html>
<head>
<title>RailsApp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<!-- 追加 START -->
<header id="header" class="">
<div class="container">
<a href="/" title="TOP" class="top">TOP</a>
<nav>
<ul>
<!-- ログイン判定 -->
<% if user_signed_in? %>
<li>
<!-- リンク先のurlに飛んでもエラーになるけど、一応設定しておく -->
<a href="/user/1" title=""><%= current_user.email %></a>
</li>
<% end %>
</ul>
</nav>
</div>
</header>
<!-- 追加 END -->
<body>
<%= yield %>
</body>
</html>
拡張子の変更
[.css] を [.scss] に変更。cssは見た目を整えたり装飾したりするものでscssにすると、記述量が減るので便利って感じ
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scssapp/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
*/
/*ブラウザごとに自動で設定されてしまうcssを無効化*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 70px;
background-color: #00bfff;
color: #FFFFFF;
.container {
width: 1024px;
margin: 0 auto;
}
a, a:visited {
color: #FFFFFF;
}
.top {
/*navメニューを横に回り込ませる*/
float: left;
display: inline-block;
line-height: 70px;
}
nav {
ul {
/* 点をけす */
list-style: none;
/*右寄せ*/
float: right;
li {
/*横並び*/
display: inline-block;
line-height: 70px;
}
}
}
}コードを書いていて思ったけど、ソース見づらい気がするんだが大丈夫だろうか？
今回はこんな感じで終了しようかな。次回はユーザー編集画面でも作ろうかなと思います。
Git作業
コミットするの忘れずに
$ git status
On branch master
Your branch is up to date with 'origin/master'.
Changes not staged for commit:
(use "git add/rm <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
deleted: app/assets/stylesheets/application.css
modified: app/views/layouts/application.html.erb
Untracked files:
(use "git add <file>..." to include in what will be committed)
app/assets/stylesheets/application.scss
no changes added to commit (use "git add" and/or "git commit -a")
$ git add .
$ git commit -m "update: header menu"
[master c6b833a] update: header menu
3 files changed, 71 insertions(+), 16 deletions(-)
delete mode 100644 app/assets/stylesheets/application.css
create mode 100644 app/assets/stylesheets/application.scss
$ 次の記事
Slackの招待リンク
独学でやってて質問したい！って方はどーぞ