以下はチュートリアルをやってみたログである。
レイアウトの構想
- 真ん中にタイトルとボタン、右上にHelpとか、Signin
- 右下にAboutとかnewsがある。
全体レイアウトを変更
app/views/layouts/application.html.erb
<!DOCTYPE html> <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="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%= link_to "sample app", '#', id: "logo" %> <nav> <ul class="nav pull-right"> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </nav> </div> </div> </header> <div class="container"> <%= yield %> </div> </body> </html>
html5で記述
三つのcssクラス、navbar navbar-fixed-top navbar-inverseを指定
クラス navbar-innerとcontainer
埋め込みコード
<%= link_to "sample app", '#', id: "logo" %>
link_to関数の第1引数は表示されるテキスト、第2番目の'#'はURLだが、今はスタブURLとして'#'を入れてある。
第3引数のid:"logo"はオプションハッシュ、リンクでcssのidとして"logo"を指定している。
クラス nav、pull-rightが指定されている。Bootstrapで意味がある。
containerクラスもBootstrapで意味を持つ。
homeページを変更
app/views/static_pages/home.html.erb
<div class="center hero-unit">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
<a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "btn btn-large btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
hero-unitクラスはBootstrapで意味がある。
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
link_toの第1引数にimage_tagヘルパを使った。このヘルパでalt属性も指定できている。
以下のようになる
<img alt="Rails" src="/assets/rails.png" />
画像はapp/assets/images/に置く。
Bootstrapを用意
Gemfileにbootstrap-sassを追加
gem 'bootstrap-sass', '2.3.2.0'
gem 'sprockets', '2.11.0'
Sprocketsも入れておく。
bundle install
ここで
You have requested:
sprockets = 2.11.0
The bundle currently has sprockets locked at 2.12.4.
Try running `bundle update sprockets`
が出たので、
bundle update sprockets
した。
カスタムCSSの格納場所作成
app/assets/stylesheets/custom.css.scss
app/assets/stylesheets以下に置かれたスタイルシートは
application.cssの一部として自動的にインクルードされる。
app/assets/stylesheets/custom.css.scssに
@import "bootstrap";
と記述する。Bootstrap CSSフレームワークが導入される。
ローカルサーバで確認。
rails server
BootStrapが適用されていることを確認。
全体のcssをいじってみる。
app/assets/stylesheets/custom.css.scss
@import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* 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: #999;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
body
上部に60pxのパディング。この場合headerのnavbar-fixed-topの下が60px空くことになる。
.center
centerクラスへのスタイルを適用
#logo
idとしてlogoへのスタイル指定
レイアウトファイルをpartial機能ですっきりさせる。
app/views/layouts/application.html.erbのヘッダーは記述が多いのでこれをrenderメソッドで隠すことができる。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<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="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
を以下のようにする。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<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 %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
次の二つ
<%= render 'layouts/shim' %>
<%= render 'layouts/header' %>
がポイント。
<%= render 'layouts/shim' %>で、app/views/layouts/_shim.html.erb というファイルの中身が埋め込まれる。
先頭に_をつけているのがパーシャル機能を使っているという目印になる。
app/views/layouts/_shim.html.erb
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</div>
</div>
</header>
同様にフッターもパーシャルで追加してみる。
app/views/layouts/_footer.html.erb
<footer class="footer">
<small>
<a href="http://railstutorial.jp/">Rails Tutorial</a>
by Michael Hartl
</small>
<nav>
<ul>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
<li><a href="http://news.railstutorial.jp/">News</a></li>
</ul>
</nav>
</footer>
app/views/layouts/application.html.erb
<!DOCTYPE html>
<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 %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
フッターのスタイルの追加
app/assets/stylesheets/custom.css.scss
.....
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #999;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 10px;
}
これでローカルサーバで確認してみる。
rails server
クラス navbar-innerとcontainer
埋め込みコード
<%= link_to "sample app", '#', id: "logo" %>
link_to関数の第1引数は表示されるテキスト、第2番目の'#'はURLだが、今はスタブURLとして'#'を入れてある。
第3引数のid:"logo"はオプションハッシュ、リンクでcssのidとして"logo"を指定している。
クラス nav、pull-rightが指定されている。Bootstrapで意味がある。
containerクラスもBootstrapで意味を持つ。
containerクラスもBootstrapで意味を持つ。
homeページを変更
app/views/static_pages/home.html.erb
<div class="center hero-unit"> <h1>Welcome to the Sample App</h1> <h2> This is the home page for the <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a> sample application. </h2> <%= link_to "Sign up now!", '#', class: "btn btn-large btn-primary" %> </div> <%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
hero-unitクラスはBootstrapで意味がある。
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
link_toの第1引数にimage_tagヘルパを使った。このヘルパでalt属性も指定できている。
以下のようになる
<img alt="Rails" src="/assets/rails.png" />
画像はapp/assets/images/に置く。
hero-unitクラスはBootstrapで意味がある。
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
link_toの第1引数にimage_tagヘルパを使った。このヘルパでalt属性も指定できている。
以下のようになる
<img alt="Rails" src="/assets/rails.png" />
画像はapp/assets/images/に置く。
Bootstrapを用意
Gemfileにbootstrap-sassを追加
gem 'bootstrap-sass', '2.3.2.0' gem 'sprockets', '2.11.0'
Sprocketsも入れておく。
bundle install
ここで
You have requested: sprockets = 2.11.0 The bundle currently has sprockets locked at 2.12.4. Try running `bundle update sprockets`
が出たので、
bundle update sprockets
した。
カスタムCSSの格納場所作成
app/assets/stylesheets/custom.css.scss
app/assets/stylesheets以下に置かれたスタイルシートは
application.cssの一部として自動的にインクルードされる。
app/assets/stylesheets/custom.css.scssに
@import "bootstrap";
と記述する。Bootstrap CSSフレームワークが導入される。
ローカルサーバで確認。
rails server
BootStrapが適用されていることを確認。
全体のcssをいじってみる。
app/assets/stylesheets/custom.css.scss
@import "bootstrap"; /* universal */ html { overflow-y: scroll; } body { padding-top: 60px; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; } .center h1 { margin-bottom: 10px; } /* 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: #999; } p { font-size: 1.1em; line-height: 1.7em; } /* header */ #logo { float: left; margin-right: 10px; font-size: 1.7em; color: #fff; text-transform: uppercase; letter-spacing: -1px; padding-top: 9px; font-weight: bold; line-height: 1; } #logo:hover { color: #fff; text-decoration: none; }
body
上部に60pxのパディング。この場合headerのnavbar-fixed-topの下が60px空くことになる。
.center
centerクラスへのスタイルを適用
#logo
idとしてlogoへのスタイル指定
レイアウトファイルをpartial機能ですっきりさせる。
app/views/layouts/application.html.erbのヘッダーは記述が多いのでこれをrenderメソッドで隠すことができる。
app/views/layouts/application.html.erb
<!DOCTYPE html> <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="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%= link_to "sample app", '#', id: "logo" %> <nav> <ul class="nav pull-right"> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </nav> </div> </div> </header> <div class="container"> <%= yield %> </div> </body> </html>
を以下のようにする。
app/views/layouts/application.html.erb
<!DOCTYPE html> <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 %> <%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %> <div class="container"> <%= yield %> </div> </body> </html>
次の二つ
<%= render 'layouts/shim' %>
<%= render 'layouts/header' %>
がポイント。
<%= render 'layouts/shim' %>で、app/views/layouts/_shim.html.erb というファイルの中身が埋め込まれる。
先頭に_をつけているのがパーシャル機能を使っているという目印になる。
app/views/layouts/_shim.html.erb
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%= link_to "sample app", '#', id: "logo" %> <nav> <ul class="nav pull-right"> <li><%= link_to "Home", '#' %></li> <li><%= link_to "Help", '#' %></li> <li><%= link_to "Sign in", '#' %></li> </ul> </nav> </div> </div> </header>
同様にフッターもパーシャルで追加してみる。
app/views/layouts/_footer.html.erb
<footer class="footer"> <small> <a href="http://railstutorial.jp/">Rails Tutorial</a> by Michael Hartl </small> <nav> <ul> <li><%= link_to "About", '#' %></li> <li><%= link_to "Contact", '#' %></li> <li><a href="http://news.railstutorial.jp/">News</a></li> </ul> </nav> </footer>
app/views/layouts/application.html.erb
<!DOCTYPE html> <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 %> <%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %> <div class="container"> <%= yield %> <%= render 'layouts/footer' %> </div> </body> </html>
フッターのスタイルの追加
app/assets/stylesheets/custom.css.scss
..... /* footer */ footer { margin-top: 45px; padding-top: 5px; border-top: 1px solid #eaeaea; color: #999; } footer a { color: #555; } footer a:hover { color: #222; } footer small { float: left; } footer ul { float: right; list-style: none; } footer ul li { float: left; margin-left: 10px; }
これでローカルサーバで確認してみる。
rails server