記事概要

Ruby on Railsのレイアウトテンプレートについて、まとめる

前提

Ruby on Railsでアプリケーションを作成している

基本情報

ファイルパス

app/views/layouts/application.html.erb

記載方法

[アクション名].html.erbを、参照

まとめ(head要素)

stylesheet_link_tagメソッド

読み込むCSSファイルを指定できるヘルパーメソッド
application.cssを指定する

<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
    
    <!-- 読み込みたいCSSファイル(application.css)を「app/assets/stylesheets」に配置
         stylesheet_link_tagの引数に'application'を指定 -->
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <!-- 省略 -->

リセットCSS

link要素でリセットCSSを参照する

<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
    
    <!-- メジャーなリセットCSSのひとつである「normalize.css」を参照 -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
  </head>
  <!-- 省略 -->
</html>

まとめ(body要素)

yieldメソッド

レイアウトテンプレートに、各テンプレートファイルを展開するためのメソッド
yieldメソッドを使うことで、全ページ共通の記述を各テンプレートファイルに記載する必要がない

<!DOCTYPE html>
<html>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <header>
      <!-- 省略 -->
    </header>
    <main>
      <!-- main要素のみ、各テンプレートに記述 -->
      <%= yield %>
    </main>
    <footer>
      <!-- 省略 -->
    </footer>
  </body>
</html>

Ruby on Railsまとめ

ビュー