<!DOCTYPE html>について

<!DOCTYPE html>について

<!DOCTYPE html>のDOCTYPE宣言についてハマったことがあり、その重要性を知ったので、こちらにまとめます。

今回ハマったことは、以下になります。

[app/views/layouts ファイル]

<html>
  <head>
    <meta charset="utf-8">
    <meta lang='ja'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= page_full_title(yield(:title), admin: true) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'admin', media: 'all' %>
    <%= javascript_include_tag 'admin', 'common' %>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  </head>

  <body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
      <%= render 'admin/shared/header' %>
      <%= render 'admin/shared/menu' %>
    
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <%= render 'shared/flash_message' %>
        <%= yield %>
      </div>
      
      <%= render 'admin/shared/footer' %>
    </div>
  </body>
</html>

[app/views/admin/shared/_footer.html.erb]

<footer class="main-footer">
    <strong>Copyright &copy; 2019 RUNTEQ.</strong> All rights reserved.
</footer>

上記のように記述しており、ブラウザを確認すると以下のようにフッターが途中で出てきてしまっている。

Image from Gyazo

[yeild]よりも下でフッターを読み込ませているのに何故だ？とドツボにハマり、全く関係ないところを調べたりしてしまった。

下記のようにlayoutファイルを記述したことで、ちゃんとフッター部分にフッターが配置された。

[app/views/admin/layouts ファイル]

<!DOCTYPE html>    #  これを付け加えた
<html>
  <head>
    <meta charset="utf-8">
    <meta lang='ja'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= page_full_title(yield(:title), admin: true) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'admin', media: 'all' %>
    <%= javascript_include_tag 'admin', 'common' %>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  </head>

  <body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">
      <%= render 'admin/shared/header' %>
      <%= render 'admin/shared/menu' %>
    
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <%= render 'shared/flash_message' %>
        <%= yield %>
      </div>
      
      <%= render 'admin/shared/footer' %>
    </div>
  </body>
</html>

今回フッターがフッター部分に配置されなかったのは、