LoginSignup
0
0

More than 3 years have passed since last update.

【Railsチュートリアル 5章】レイアウトを作成する

Posted at

ナビゲーション

すべてHTMLはクラスとidの両方を指定することができる。
これらは単なるラベルであり、CSSでスタイルを指定するときに使用する。

クラスとidの違いはクラスはページ内で何度でも使用できるが、idは一回しか使用できない点です。

下のheaderタグには、navbar, navba-fixed-top, navbar-inverseという3つのCSSクラスがスペース区切りで与えられています。


<header class = "navbar navbar-fixed-top navbar-inverse">

下のコードをみてください
. navタグは内側がナビゲーションリンクであるという意図を明確に伝える役割があります。
. ulタグに付与されているnav,navbar-nav, navbar-rightクラスもBootstrapにおいて特別な意味を持ちます。


<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>

image_tagヘルパー

このヘルパーは、シンボルを使ってalt属性やwidth属性を設定できる。
下の例では、アセットパイプラインを通してapp/assets/images/の中から該当画像ファイルを探し出してきてくれる。

<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200px"),
                      "https://rubyonrails.org/" %>

renderメソッド

renderメソッドにはapp/viewsを起点とするフルパスを渡すことができます

<%= render "layouts/header"%>

名前付ルート

ページ名 URL 名前付きルート
Home / root_path
About /about about_path
Help /help help_path
Contact /contact contact_path
Sign up /signup signup_path
Log in /login login_path
0
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
0
0