【31日目】【1日20分のRailsチュートリアル】【第5章】Homeページにナビゲーションや画像リンクを追加する

今日は「5.1.1 ナビゲーション」の途中から。

5.1.1 ナビゲーション

今後登場するスタイル要素を利用できるようにするために、home.html.erbビューに特別な要素をいくつか追加します。

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/' %>

Homeページのテンプレートを上記の内容でコピペ。

<a href="#" class="btn btn-lg btn-primary">Sign up now!</a>

上で挙げたdivタグのCSSクラスjumbotronや、signupボタンのbtnクラス、btn-lgクラス、btn-primaryクラスはすべて、Bootstrapにおいて特別な意味を持ちます。

Bootstrap利用するときに使うクラス名って覚えておかないといけないのかな。。。それは無理だな…。

<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>

このコードでリンク付き画像が挿入できるらしい。
画像が要るね。

Cloud IDEやUnix系のOS (Max OS Xなど) を使っている場合は、次のようにcurlコマンドで簡単に取得できます。

せっかくなのでコマンドで取得しよう。

$ curl -OL http://railstutorial.jp/rails.png
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13036  100 13036    0     0  28127      0 --:--:-- --:--:-- --:--:-- 28155
$ mv rails.png app/assets/images/

1個目のコマンドで画像取得したらrootに置かれるので、2個目のコマンドでimagesフォルダに移動。

ちゃんと取得できて移動できましたー。

f:id:kt_zoe:20160901123222p:plain