質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

cssで中央寄せしたいのですが、下方に行くほどずれていきます。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 547
退会済みユーザー

退会済みユーザー

cssで中央寄せがしたいのですが、コンテンツが下方に行くに従って、
少しずつ右にずれてしまいます。
初歩的な質問で申し訳ございません。
よろしくお願いします。

index.css.scss

div#contents {
    width: 600px;
    margin:0 auto;
    padding: 10px 5px;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
    margin-top: -1px;
  }
    .left {
      float: left;
      margin-right: 10px;
    }

    .leftclear {
      clear: both;
    }

index.html.erb

<% @title = 'top_page' %>

<% @co_members.each do |co_member| %>
<div id="contents">
<div class="left">
    <%= image_tag co_member.photo.url(:thumb), width: 200 %>
  </div>
      <p><%= co_member.company_name %></p>
      <p><%= co_member.title %></p>
      <p><%= truncate(co_member.body, length: 80) %>
        <%= link_to "read more", "" %></p>
<br class="leftclear">
  <% end %>
</div>

ページのソース

<!DOCTYPE html>
<html>
<head>
  <title>top_page - xxx</title>
  <link data-turbolinks-track="true" href="/assets/shared/errors.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co/flash.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co/form.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co/index.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co/layout.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co/sessions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co/tables.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/co.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="AiD0APbgxCgicYRF6sIDFSRyL0z/ozQ4TBX2x4prvxg=" name="csrf-token" />
</head>
<body>
  <div id="wrapper">
    <header>
    <div id="a">
  <a href="/"><img alt="xxx" height="80" src="/assets/xxx.png" width="280" /></a>
</div>




  <div id="b">
    <a data-method="delete" href="/session" rel="nofollow">ログアウト</a> : 
      <a href="/account">アカウント</a>
  </div>
</header>

    <div id="container">

<div id="contents">
    <div class="left">
    <img alt="Export84211520 60" src="/system/co_members/photos/000/000/018/thumb/export84211520-60.JPG?1475508038" width="200" />
    </div>
      <p>a</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>a-topaz</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>apple - 2</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="P2" src="/system/co_members/photos/000/000/002/thumb/p2.jpg?1475507919" width="200" />
    </div>
      <p>azzzz</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Dj tiesto wallpaper by for as" src="/system/co_members/photos/000/000/007/thumb/dj_Tiesto_wallpaper_by_For_as.png?1475508145" width="200" />
    </div>
      <p>b</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>b</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>b</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>b</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>bbq</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>c</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>c</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>c</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>c</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>c</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>d</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>d</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>d</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>d</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>d</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Paul 2" src="/system/co_members/photos/000/000/001/thumb/Paul_2.jpg?1475413861" width="200" />
    </div>
      <p>topaz</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
    <div class="left">
    <img alt="Missing" src="/photos/thumb/missing.png" width="200" />
    </div>
      <p>キリ</p>
      <p>test</p>
      <p>blah, blah, blah......
         <a href="">read more</a></p>
    <br class="leftclear">
</div>

  </div>
  <footer>
  <p>Powered by tt &copy; 2017</p>
</footer>

  </div>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/05 19:24

    出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。

    キャンセル

回答 1

checkベストアンサー

+5

どの部分をループさせたいのか不明ですが、ループさせる位置が違うのではないかと思います。
</div>の数が合わなくなってずれていってますね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/05 19:19 編集

    回答ありがとうございます。
    ループさせる位置を変え、中央寄せはうまくいきました。
    しかし、上下ボーダーラインが消えてしまいました。
    </div>の数は変えていません。

    ```
    <div id="contents">
    <% @co_members.each do |co_member| %>
    <div class="left">
    <%= image_tag co_member.photo.url(:thumb), width: 200 %>
    </div>
    <p><%= co_member.company_name %></p>
    <p><%= co_member.title %></p>
    <p><%= truncate(co_member.body, length: 80) %>
    <%= link_to "read more", "" %></p>
    <br class="leftclear">
    <% end %>
    </div>
    ```

    キャンセル

  • 2016/10/05 19:34

    borderは#contentsについているのでループ内にはいませんが、#contentsの上下にはいるのではないですか??
    #contentsのborderが消えたということですか?

    キャンセル

  • 2016/10/05 19:37

    ループ内にもほしい場合は、「.left」に「border-bottom:1px solid #CCC;」を指定し、「#contents」から「border-bottom:1px solid #CCC;」を削除すればいいと思います。

    キャンセル

  • 2016/10/05 20:16

    index.html.erbの最初の状態で<% end %>を一番下に持って行くと、
    うまく表示させることができました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る