railsで遊ぼう　トップページの作成1 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

ページの上部に置くヘッダーや、ページの左右に置くサイドバーなどは、「_menu_bar.html.erb」のように「_」をファイル名の前につけます。

続いて、ページ構成をhtmlに書いていきます。
/app/views/layouts/application/html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= page_title %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<div id="container">
	<div id="header">
	<%= render "shared/header" %>
	</div>
	<div id="content">
<%= yield %>
	</div>
	<div id="sidebar">
	<%= render "shared/sidebar" %>
	</div>
	<div id="footer">
	<%= render "shared/footer" %>
	</div>
</div>

</body>
</html>

app/viewsフォルダの下に、sharedの空フォルダを作成し、上記の通り、_header.html.erb、_sidebar.html.erb、_login_form.html.erb、_footer.html.erbを作成してい行きます。また、ヘルパーメソッドmenu_link_toをapplication_helper.rbにも記載します。
/app/veiws/shared/_header.html.erb

<%= image_tag("logo.gif", size: "272x48", alt: "Morning Glory") %>

<div class="menubar">
<%= menu_link_to "TOP", root_path %> &nbsp;|&nbsp;
<%= menu_link_to "ニュース", "#" %> &nbsp;|&nbsp;
<%= menu_link_to "ブログ", "#" %> &nbsp;|&nbsp;
<%= menu_link_to "会員名簿", "#" %> &nbsp;|&nbsp;
<%= menu_link_to "管理ページ", "#" %> &nbsp;|&nbsp;
</div>

/app/veiws/shared/_shidebar.html.erb

<%= render "shared/login_form" %>

<h2>最新ニュース</h2>
<ul>
	<% 5.times do |i| %>
	<li><%= link_to "ニュースの見出し", "#" %></li>
	<% end %>
</ul>
<h2>会員のブログ</h2>
<ul>
	<% 5.times do |i| %>
	<li><%= link_to "ブログの見出し", "#" %></li>
	<% end %>
</ul>

/app/veiws/shared/_login_form.html.erb

<h2>ログイン</h2>
<table id="login_form">
	<tr>
		<td align="right">ユーザー名：</td>
		<td><input type="text" size="16" style="width: 120px"></td>
	</tr>
	<tr>
		<td align="right">パスワード：</td>
		<td><input type="password" size="16" style="width: 120px" /></td>
	</tr>
	<tr>
		<td colspan="2" align="center">
		<input type="submit" value="ログイン" /></td>
	</tr>
</table>

/app/veiws/shared/_footer.html.erb

<%= link_to "このサイトについて", about_path %> |
Copyright(c) <%= link_to "hoge hoge", "http://www.hogehoge.co.jp/" %>
2016

/app/helpers/application_helper.rb

	def menu_link_to(text, path)
		link_to_unless_current(text, path){ content_tag(:span, text)}
	end

続いて、トップページにダミーテキストを入れます。
/app/views/top/index.html.erb

<% 5.times do |x| %>
<h2>見出し</h2>
<p>ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
<%= link_to "もっと読む", "#" %></p>
<% end %>

/app/controllers/top_controller.rb

class TopController < ApplicationController
  def index
  end

  def about
  end
end

骨格が出来たので、あとはcssでデザインしていきます。