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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2712閲覧

bootstrap:ブロックのwidth統一と整列

innjera

総合スコア132

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/11/08 03:53

編集2016/11/08 03:55

Ruby on Rails(5.0.0.1)、Bootstrapを用いて開発しています。

画面内の要素を真ん中に、左右も揃えたいのですが、写真の様にうまく揃いません。
CSS記載の通り、widthを統一しているのですが…
また、解決策を探る為、backgroundに黒を入れてみたところ、指定したwidthよりも幅が広く取られています。ここにヒントがあることはわかるのですが、解決策がわからず、お分かりの方、ご指摘頂けますと幸甚です。

イメージ説明

ruby

1<div class="container"> 2 <div class = "row" > 3 <div class="jumbotron pjumbo"> 4 <i> 5 <%= user_icon_tag @user, :alt => "icon", :class =>"icon" %> 6 <p class="profile-plate"><%= @user.user_name %>さん</br> 7 出品数<% count = @user.products.count %><%= count %>8 </p> 9 </i> 10 </div> 11 </div> 12 13 <div class = "row teset"> 14 <div class ="profile-c"> 15 <i class="fa fa-smile-o" aria-hidden="true"> 5</i>&nbsp 16 <i class="fa fa-meh-o" aria-hidden="true"> 2</i>&nbsp 17 <i class="fa fa-frown-o" aria-hidden="true"> 0</i>&nbsp 18 </div> 19 </div> 20 21 <div class = "row"> 22 <div class ="profile-c"> 23 <p><%= @user.user_profile %></p> 24 </div> 25 </div> 26 27 <div class="row"> 28 <h3 class="profile-name"><%= @user.user_name %>さんの出品商品一覧</h3> 29 </div> 30 31 <div class="row"> 32 <% @products.each do |p| %> 33 <div class="col-md-3 col-sm-4 col-xs-6"> 34 <div class= 'card' %> 35 <%= link_to [:user, p ] do %> 36 <div class= 'wwrapper' > 37 <%= image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %> 38 <div class="card-img-overlay productimg"> 39 <p class="card-title productbrand"><%= p.brand %>イヤリング</p> 40 </div> 41 </div> 42 <div class="card-block"> 43 <h6 class="card-text"><%= truncate(p.memo, length: 10) %></h6> 44 <h6 class="p-price "><%= number_with_delimiter(p.price) %>円</h6> 45 <% if (count = p.votes.count) == 0 %> 46 <h6 class="top-like"><i class="fa fa-heart-o" aria-hidden="true">&nbsp&nbsp</i></h6> 47 <% elsif (count = p.votes.count) > 0 %> 48 <h6 class="top-like"><i class='fa fa-heart'>&nbsp<%= count %></i></h6> 49 <% end %> 50 <h6 class="top-comment"><i class="fa fa-comment-o"></i></h6> 51 <% end %> 52 </div><!--card-block--> 53 </div><!--card--> 54</div><!--col--> 55<% end %> 56 </div><!--row--> 57</div><!--container--> 58

css

1@import "bootstrap"; 2@import "colors"; 3 4.teset{ 5 background-color: $black; 6} 7.jumbotron { 8 position: relative; 9 background: url('http://i.cubeupload.com/UWyvD2.jpg') center center; 10 width: 100%; 11 height: 100%; 12 background-size: cover; 13 overflow: hidden; 14 } 15 16.pjumbo{ 17 max-height: 18rem; 18 max-width: 50rem; 19 margin-bottom: 0px; 20 } 21.icon{ 22 width: 10rem; 23 height: 10rem; 24 border-radius: 50%; 25 -moz-border-radius: 50%; 26 -webkit-border-radius: 50%; 27 background-size: cover; 28 background-position: center center; 29} 30.profile-c{ 31 max-width: 50rem; 32 border: solid 1.5px; 33 border-color: $light-gray; 34} 35.profile-plate{ 36 background-color:rgba(0, 0, 0, 0.5); 37 color: $white; 38 margin-top: 0.5rem; 39} 40 41.fa-smile-o{ 42 color: $red; 43} 44.fa-meh-o{ 45 color: $black; 46} 47.fa-frown-o{ 48 color: $blue; 49} 50.profile-name{ 51 margin-top: 0.5rem; 52}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gin

2016/11/08 03:56

htmlやCSSとして生成されたもののほうが回答を得やすいですよ。
innjera

2016/11/08 05:28

ご指摘有難う御座います。仰る通り、余計なコードが混じっているので、受け手に不親切な書き方でした。。修正間に合わず申し訳ありません。次回以降、同類の質問をする際は、ご指摘頂いた事項を反映させる様に致します。
guest

回答1

0

ベストアンサー

黒い部分の.rowには特に指定はされていないのでwidth: 100%;となっているだけですね。
その箱の中で個別にmax-width: 50rem;とやっているので、大元はwidth: 100%;のままです。
.rowはいろんなところで使用するので、上書きはしてはいけません。
.containerも名前からして他で使用してそうなのでこれも避けましょう。
.containerの下に.profile-boxのような箱をもう1つ作ってそこで調整します。

css

1.profile-box { 2 width: 50rem; 3 margin: 0 auto; 4}

html

1<div class="container"> 2 <div class="profile-box"> 3 <div class = "row"> ... </div> 4 <div class = "row"> ... </div> 5 <div class = "row"> ... </div> 6 <div class = "row"> ... </div> 7 </div> 8</div>

おそらくはこういう感じなのかと思います。

投稿2016/11/08 04:24

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

innjera

2016/11/08 10:29

補足のアドバイス含め、有難う御座います!解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問