Ruby on Rails-レイアウト

レイアウトは、HTMLページの周囲を定義します。これは、最終出力の一般的なルックアンドフィールを定義する場所です。レイアウトファイルはapp/views/layoutsにあります。

このプロセスでは、レイアウトテンプレートを定義してから、コントローラーにテンプレートが存在することを知らせて使用します。まず、テンプレートを作成しましょう。

standardl.erbという新しいファイルをapp/views/layoutsに追加します。ファイル名で使用するテンプレートをコントローラーに知らせるため、同じ命名規則に従うことをお勧めします。

次のコードを新しいstandardl.erbファイルに追加し、変更を保存します-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1"/>
      <meta http-equiv = "Content-Language" content = "en-us"/>
      <title>Library Info System</title>
      <%= stylesheet_link_tag "style" %>
   </head>

   <body id = "library">
      <div id = "container">

         <div id = "header">
            <h1>Library Info System</h1>
            <h3>Library powered by Ruby on Rails</h3>
         </div>

         <div id = "content">
            <%= yield -%>
         </div>

         <div id = "sidebar"></div>

      </div>
   </body>

</html>

追加したものはすべて、2行を除く標準のHTML要素でした。 stylesheet_link_tag ヘルパーメソッドは、スタイルシート<link>を出力します。この例では、style.cssスタイルシートをリンクしています。 yield コマンドは、ここで呼び出されたメソッドにhtml.erbを配置する必要があることをRailsに知らせます。

今 book_controller.rb を開き、最初の行のすぐ下に次の行を追加します-

class BookController < ApplicationController
layout 'standard'
def list
@books = Book.all
end
...................

これは、standardl.erbファイルで使用可能なレイアウトを使用することをコントローラーに指示します。次に、次の画面を生成する本をブラウズしてみてください。

レイアウトの例

スタイルシートの追加

これまで、スタイルシートを作成していないため、Railsはデフォルトのスタイルシートを使用しています。ここで、style.cssという新しいファイルを作成し、/public/stylesheetsに保存しましょう。このファイルに次のコードを追加します。

body {
   font-family: Helvetica, Geneva, Arial, sans-serif;
   font-size: small;
   font-color: #000;
   background-color: #fff;
}

a:link, a:active, a:visited {
   color: #CD0000;
}

input {
   margin-bottom: 5px;
}

p {
   line-height: 150%;
}

div#container {
   width: 760px;
   margin: 0 auto;
}

div#header {
   text-align: center;
   padding-bottom: 15px;
}

div#content {
   float: left;
   width: 450px;
   padding: 10px;
}

div#content h3 {
   margin-top: 15px;
}

ul#books {
   list-style-type: none;
}

ul#books li {
   line-height: 140%;
}

div#sidebar {
   width: 200px;
   margin-left: 480px;
}

ul#subjects {
   width: 700px;
   text-align: center;
   padding: 5px;
   background-color: #ececec;
   border: 1px solid #ccc;
   margin-bottom: 20px;
}

ul#subjects li {
   display: inline;
   padding-left: 5px;
}

ブラウザを更新して、違いを確認してください-

レイアウトの例

次は何ですか？

次の章では、Rails Scaffoldingを使用してアプリケーションを開発し、任意のデータベースのレコードを追加、削除、および変更するためのユーザーアクセスをユーザーに提供する方法について説明します。

Ruby-on-rails-rails-layouts

Ruby on Rails-レイアウト

スタイルシートの追加

次は何ですか？