Rails Tutorialをやってみよう04
第5章からやっていきます。
http://railstutorial.jp/chapters/filling_in_the_layout?version=4.2#cha-filling_in_the_layout
gitのブランチを作成しておきます。
$ git checkout master $ git checkout -b filling-in-layout
app/views/layouts/application.html.erb
を編集します。
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>ここで、
<head>
<title><%= full_title(yield(:title)) %></title>とするとエラーが発生したので、
とりあえず、
<head> <title>SampleApp</title>
としておきました。
次に
app/views/static_pages/home.html.erb
を編集します。
<div class="center jumbotron">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>画像を表示するためには、rails.pngというRailsのロゴ画像ファイルを加える必要があります。Ruby on Rails公式ページの http://rubyonrails.org/images/rails.pngから画像をダウンロードして、app/assets/images/ディレクトリに置いてください。Cloud IDEやUnix系のOS (Max OS Xなど) を使っている場合は、次のようにcurlコマンドで簡単に取得できます。
$ curl -O http://rubyonrails.org/images/rails.png $ mv rails.png app/assets/images/
bootstrapをレイアウトに用いるために、
gemfileを追加する。
Gemfileへbootstrap-sassを追加する
source 'https://rubygems.org' gem 'rails', '4.2.2' gem 'bootstrap-sass', '3.2.0.0'
bundle install
stylesheetsへcustom.css.scssという名称のファイルを作成する。
$ touch app/assets/stylesheets/custom.css.scss
上記のファイルを編集する。
app/assets/stylesheets/custom.css.scss
@import "bootstrap-sprockets"; @import "bootstrap";
サーバーを起動して、サイトにアクセスする。
bootstrapが適用できているかを確認する。
app/assets/stylesheets/custom.css.scss
をさらに編集する。
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
Webページを更新すると以下のようにスタイルが適応されているはずです。
またまた、
app/assets/stylesheets/custom.css.scssを編集します。
フォントのレイアウトを追加しましょう。
@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
さらにサイトロゴのレイアウトを追加します。
app/assets/stylesheets/custom.css.scssを編集します。
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}ここでCSSのカラーについて
参考：
HTML Color Names
5.1.3 パーシャル (partial)
railsでは、partialという昨日で、部品ごとにコードをまとめることができます。
1.shim
2.
3.に
