投稿した画像が1つしか表示されていない状態から横に並んで2つ表示される状態に変更したい

前提・実現したいこと

現在、instagramのような画像投稿WEBアプリケーションを作成しています。
投稿した画像が現在1枚ずつトップページに表示されている状態なのですが、
上から順に2枚ずつ表示されるように変更したいのです。
どこを操作すれば変更すれば良いのでしょうか！？
HTML,CSSはサンプルサイトから引用しており、下記コードの記述内容が理解出来ていないです。

画像が２つ投稿できるようになったら、CSSを整えます。

発生している問題・エラーメッセージ

新規投稿した画像は表示されるが、Veiwが思うように実装出来ない。
理解出来たこと、HTMLがブラウザ上に表示させるための言語、CSSで画像の余白や文字の色を決める。

該当のソースコード

Ruby on rails

app/veiws/layolers/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>NF</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header class="header">
      <div class="header__bar row">
        <h1 class="grid-6"><a href="/">NF</a></h1>
        <% if user_signed_in? %>
          <div class="user_nav grid-6">
          <span><%= current_user.nickname %>
           <ul class="user__info">
            <li>
             <%= link_to "マイページ", "/users/#{current_user.id}"%>
             <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
            </li>
           </ul>
          </span>
            <%= link_to "投稿する", new_item_path, class: "post" %>
          </div>
        <% else %>
          <div class="grid-6">
            <%= link_to "ログイン", new_user_session_path, class: "post" %>
            <%= link_to "新規登録", new_user_registration_path, class: "post" %>
          </div>
        <% end %>
        </div>
      </div>
    </header>
    <%= yield %>
    <footer>
      <p>
        Copyright NF 2020.
      </p>
    </footer>
  </body>
</html>

app/veiws/items/index.html.erb

<div class="contents row">
  <% @items.each do |item| %>
    <%= render partial: "item", locals: { item: item } %>
  <% end %>
</div>

app/veiws/items/_item.html.erb
    <div class="content_post" style="background-image: url(<%= item.image %>);">
          <div class="more">
        <span><%= image_tag 'arrow_top.png' %></span>
        <ul class="more_list">
          <li>
            <%= link_to '詳細', item_path(item.id), method: :get %>
          </li>
          <li>
          <% if user_signed_in? && current_user.id == item.user_id%>
            <%= link_to '編集', edit_item_path(item.id), method: :get %>
          </li>
          <li>
            <%= link_to '削除', item_path(item.id), method: :delete %>
          </li>
          <% end %>
        </ul>
      </div>
      <p><%= item.text %></p>
      <span class="name">
      <a href="/users/<%= item.user.id %>">
        <span>投稿者</span><%= item.user.nickname%>
      </a>  
      </span>
    </div>

app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 *{
  box-sizing: border-box;
}

app/assets/stylesheets/stylesheet.css

@charset "UTF-8";

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
 * HTML5 display definitions
 * ========================================================================== */
/*
 * Correct `block` display not defined in IE 8/9. */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/*
 * Correct `inline-block` display not defined in IE 8/9. */
audio,
canvas,
video {
  display: inline-block;
}

/*
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices. */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22. */
[hidden],
template {
  display: none;
}

/* ==========================================================================
 * Base
 * ========================================================================== */
/*
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom. */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/*
 * Remove default margin. */
body {
  margin: 0;
}

/* ==========================================================================
 * Links
 * ========================================================================== */
/*
 * Remove the gray background color from active links in IE 10. */
a {
  background: transparent;
}

/*
 * Address `outline` inconsistency between Chrome and other browsers. */
a:focus {
  outline: thin dotted;
}

/*
 * Improve readability when focused and also mouse hovered in all browsers. */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
 * Typography
 * ========================================================================== */
/*
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome. */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/*
 * Address styling not present in IE 8/9, Safari 5, and Chrome. */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
b,
strong {
  font-weight: bold;
}

/*
 * Address styling not present in Safari 5 and Chrome. */
dfn {
  font-style: italic;
}

/*
 * Address differences between Firefox and other browsers. */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/*
 * Address styling not present in IE 8/9. */
mark {
  background: yellow;
  color: black;
}

/*
 * Correct font family set oddly in Safari 5 and Chrome. */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/*
 * Improve readability of pre-formatted text in all browsers. */
pre {
  white-space: pre-wrap;
}

/*
 * Set consistent quote types. */
q {
  quotes: "“""”""‘""’";
}

/*
 * Address inconsistent and variable font size in all browsers. */
small {
  font-size: 80%;
}

/*
 * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
 * Embedded content
 * ========================================================================== */
/*
 * Remove border when inside `a` element in IE 8/9. */
img {
  border: 0;
}

/*
 * Correct overflow displayed oddly in IE 9. */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
 * Figures
 * ========================================================================== */
/*
 * Address margin not present in IE 8/9 and Safari 5. */
figure {
  margin: 0;
}

/* ==========================================================================
 * Forms
 * ========================================================================== */
/*
application.cssはこのような流れです。

試したこと

HTMLとCSSの構造が理解

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

下記コードの記述内容が理解出来ていないです。

そうであるならば、機能的に何がしたいかという質問より、
理解できてない箇所のコードの意味を問う質問をされるべきですね。

一応今回の質問に対する回答は以下です。

erb
1<div class="contents row">
2  <%# 2つずつ each で回す %>
3  <% @items.each_slice(2) do |item1, item2| %>
4    <%# 以下2つを横並べにする %>
5    <%= render partial: "item", locals: { item: item1 } %>
6    <%= render partial: "item", locals: { item: item2 } if item2 %>
7  <% end %>
8</div>

とか

erb
1<div class="contents row">
2  <% @items.each do |item| %>
3    <%# .col が用意されてるかわかりませんが... %>
4    <div class="col-6">
5      <%= render partial: "item", locals: { item: item } %>
6    </div>
7  <% end %>
8</div>

みたいな感じで実現できそうです。

投稿2020/10/23 08:41

編集2020/10/23 08:45

rhiroe

総合スコア2349

yutaro_0529

2020/10/24 01:38

Mugheartさん、ご回答ありがとうございます。おっしゃる通り理解出来ないコードの内容を質問するべきでしたが、模範回答までいただきありがとうございました。 2つのパターンを試してみたのですが、思い通りに2つのitemを表示させることは出来ませんでした。ですが1番目の原理は理解出来ました。わからなかった点の質問を2つさせてください。 1番目の回答のerbに設定されたparticalをファイルから呼び出し、 item1,2で呼び出せるようにしたあと、if item2というコードがどんな意図で書かれているのか教えていただきたいです。あと2番目の回答の.colとはカラムという意味でしょうか！？最後に1番目の模範回答で実行してみた際に、 app/asset/veiws/#style.css の中の記述を下記を変更すれば、2つ表示できるのではないかと考え、変更し実行してみました。 .row { width: 100%; margin-left: auto;➡︎10px margin-right: auto;➡︎10px margin-top: 0; margin-bottom: 0; max-width: 660px; *zoom: 1; } https://gyazo.com/9f86fd9eb212804f248f1603c2db594a 全体が左に寄っただけで、右側に画像が表示されると思っていたのですが、思うようにいきませんでした。

rhiroe

2020/10/24 02:09

> if item2というコードがどんな意図で書かれているのか slice_each(n) は n 個ずつ each するんですが、最後残りが n 個に満たない場合、不足箇所には nil が入ります。つまり、item2 には nil が入る可能性があるということです。パーシャルの item に nil を渡した場合、パーシャル先の item.id 等でエラーが発生するため、それを回避するため if item2 と言うコードを書いています。これを書くことで item2 が nil または false の場合にその行は実行されません。 > .colとはカラムという意味でしょうか！？ .row が使われていたので .col が存在するかもなと思っての回答です。 .row と .col は Bootstrap 等CSSフレームワークを使われていた場合用意されているクラスなんですが、それらを使用していない場合は自分で用意しないと使えませんので気にしなくていいです。

rhiroe

2020/10/24 02:13 編集

> 最後に1番目の模範回答で実行してみた 2つのパーシャルのみを囲うような要素を作成し、その中で横並べにします。 .row は each された後の全てを囲っているので仮に横並べにできたとしても2つずつではなく全てが横並べになります。 cssの話にはなりますが、グリットレイアウトを使うと簡単に綺麗な横並べが実現できます。詳しくはflexbox等でググって調べてください。チートシートが検索結果に出てきますので基礎的なcssの知識があればできると思います。

yutaro_0529

2020/10/24 04:07

度々のご回答ありがとうございます！！ >slice_each(n) は n 個ずつ each するんですが、最後残りが n 個に満たない場合、不足箇所には nil が入ります。つまり、item2 には nil が入る可能性があるということです。パーシャルの item に nil を渡した場合、パーシャル先の item.id 等でエラーが発生するため、それを回避するため if item2 と言うコードを書いています。これを書くことで item2 が nil または false の場合にその行は実行されません。投稿したアイテムが（n）から不足しているとnilが出た場合、if分を使って、実行されないことがわかりました。まだ2分割に出来ていないので、6割ぐらいの理解度です。＞.row が使われていたので .col が存在するかもなと思っての回答です。 .row と .col は Bootstrap 等CSSフレームワークを使われていた場合用意されているクラスなんですが、それらを使用していない場合は自分で用意しないと使えませんので気にしなくていいです。これは9割理解出来ました。 CSSはフレームワークで全て引用したものでした。 .rowはあったのですが、.colの記述はなかったです。ここは気にせず進みます。

yutaro_0529

2020/10/24 08:32 編集

こちらもありがとうございます！！ >2つのパーシャルのみを囲うような要素を作成し、その中で横並べにします。 .row は each された後の全てを囲っているので仮に横並べにできたとしても2つずつではなく全てが横並べになります。 cssの話にはなりますが、グリットレイアウトを使うと簡単に綺麗な横並べが実現できます。詳しくはflexbox等でググって調べてください。チートシートが検索結果に出てきますので基礎的なcssの知識があればできると思います。 2つのパーシャルのみを囲う実装も良いのですが、マッチングアプリのようなイメージで2つの画像が下にスクロールすると、投稿された画像がどんどんランダムに見れるのが私の理想だったので、探してみます。 CSSのチートシート見つけました！！グリットレイアウトを使うと簡単に綺麗なレイアウトが作れるとわかりました。ありがとうございます。まだまだ初学者なので振り返りながら実装します。

行動規範の内容に同意します