質問編集履歴

3 情報の追加

galaxymaximum

galaxymaximum score 11

2018/02/28 15:59  投稿

背景のサイズがどうしてもあわず空白が消えません
現在自分でウェブアプリを作っていて、表示したときに貼り付けた画像のように左端に空白ができてしまいます。
該当するページのcssは以下のようになっています。
```ここに言語を入力
.top-main {
 padding: 200px 100px 100px;
 text-align: center;
 position: absolute;
 top: 0;
 width: 100%;
 height: auto;
 min-height: 100%;
 color: black;
 background-color: #3ecdc6;
 background-repeat: no-repeat;
 background-position: center 50%;
 background-size: cover;
 background-image: url("/top.jpg");
}
```
view
```ここに言語を入力
<% if logged_in? %>
 <div class="row">
   <aside class="col-md-4">
     <section class="user_info">
       <%= render 'shared/user_info' %>
     </section>
     <section class="stats">
       <%= render 'shared/stats' %>
     </section>
     <section class="micropost_form">
       <%= render 'shared/micropost_form' %>
     </section>
   </aside>
   <div class="col-md-8">
     <h3>投稿</h3>
     <%= render 'shared/feed' %>
   </div>
 </div>
<% else %>
<div class="top-main">
 <div class="center jumbotron">
   <h1>懐かし掲示板</h1>
   <h2>
     ああ、懐かしや・・・
   </h2>
   <%= link_to "ユーザー登録する", signup_path, class: "btn btn-lg btn-primary" %>
 </div>
 <% end %>
 </div>
```
カスタムCSS
```ここに言語を入力
@import "bootstrap-sprockets";
@import "bootstrap";
@mixin box_sizing {
 -moz-box-sizing:   border-box;
 -webkit-box-sizing: border-box;
 box-sizing:        border-box;
}
/* universal */
body {
 padding-top: 60px;
}
section {
 overflow: auto;
}
textarea {
 resize: vertical;
}
.center {
 text-align: center;
}
.center h1 {
 margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
 line-height: 1;
}
h1 {
 font-size: 3em;
 letter-spacing: -2px;
 margin-bottom: 30px;
 text-align: center;
}
h2 {
 font-size: 1.2em;
 letter-spacing: -1px;
 margin-bottom: 30px;
 text-align: center;
 font-weight: normal;
 color: #777;
}
p {
 font-size: 1.1em;
 line-height: 1.7em;
}
/* header */
#logo {
 float: left;
 margin-right: 10px;
 font-size: 1.7em;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: -1px;
 padding-top: 9px;
 font-weight: bold;
}
#logo:hover {
 color: #fff;
 text-decoration: none;
}
/* footer */
footer {
 margin-top: 45px;
 padding-top: 5px;
 border-top: 1px solid #eaeaea;
 color: #777;
}
footer a {
 color: #555;
}
footer a:hover {
 color: #222;
}
footer small {
 float: left;
}
footer ul {
 float: right;
 list-style: none;
}
footer ul li {
 float: left;
 margin-left: 15px;
}
/* miscellaneous */
.debug_dump {
 clear: both;
 float: left;
 width: 100%;
 margin-top: 45px;
 @include box_sizing;
}
/* sidebar */
aside {
 section.user_info {
   margin-top: 20px;
 }
 section {
   padding: 10px 0;
   margin-top: 20px;
   &:first-child {
     border: 0;
     padding-top: 0;
   }
   span {
     display: block;
     margin-bottom: 3px;
     line-height: 1;
   }
   h1 {
     font-size: 1.4em;
     text-align: left;
     letter-spacing: -1px;
     margin-bottom: 3px;
     margin-top: 0px;
   }
 }
}
.gravatar {
 float: left;
 margin-right: 10px;
}
.gravatar_edit {
 margin-top: 15px;
}
.stats {
 overflow: auto;
 margin-top: 0;
 padding: 0;
 a {
   float: left;
   padding: 0 10px;
   border-left: 1px solid $gray-lighter;
   color: gray;
   &:first-child {
     padding-left: 0;
     border: 0;
   }
   &:hover {
     text-decoration: none;
     color: blue;
   }
 }
 strong {
   display: block;
 }
}
.user_avatars {
 overflow: auto;
 margin-top: 10px;
 .gravatar {
   margin: 1px 1px;
 }
 a {
   padding: 0;
 }
}
.users.follow {
 padding: 0;
}
/* forms */
input, textarea, select, .uneditable-input {
 border: 1px solid #bbb;
 width: 100%;
 margin-bottom: 15px;
 @include box_sizing;
}
input {
 height: auto !important;
}
#error_explanation {
 color: red;
 ul {
   color: red;
   margin: 0 0 30px 0;
 }
}
.field_with_errors {
 @extend .has-error;
 .form-control {
   color: $state-danger-text;
 }
}
.checkbox {
 margin-top: -10px;
 margin-bottom: 10px;
 span {
   margin-left: 20px;
   font-weight: normal;
 }
}
#session_remember_me {
 width: auto;
 margin-left: 0;
}
/* Users index */
.users {
 list-style: none;
 margin: 0;
 li {
   overflow: auto;
   padding: 10px 0;
   border-bottom: 1px solid $gray-lighter;
 }
}
/* microposts */
.microposts {
 list-style: none;
 padding: 0;
 li {
   padding: 10px 0;
   border-top: 1px solid #e8e8e8;
 }
 .user {
   margin-top: 5em;
   padding-top: 0;
 }
 .content {
   display: block;
   margin-left: 60px;
   img {
     display: block;
     padding: 5px 0;
   }
 }
 .timestamp {
   color: $gray-light;
   display: block;
   margin-left: 60px;
 }
 .gravatar {
   float: left;
   margin-right: 10px;
   margin-top: 5px;
 }
}
aside {
 textarea {
   height: 100px;
   margin-bottom: 5px;
 }
}
span.picture {
 margin-top: 10px;
 input {
   border: 0;
 }
}
```
![イメージ説明](a4e321ccee0f09f5dc247fabc434a59a.png)
```
```
'''情報の修正を行いました
  • HTML

    24949 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17790 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ruby on Rails

    19754 questions

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

2 追加

galaxymaximum

galaxymaximum score 11

2018/02/28 15:35  投稿

背景のサイズがどうしてもあわず空白が消えません
![イメージ説明](b621ecd34a956472ae1a61cd9d5c75fe.png)現在自分でウェブアプリを作っていて、表示したときに貼り付けた画像のように左端に空白ができてしまいます。
現在自分でウェブアプリを作っていて、表示したときに貼り付けた画像のように左端に空白ができてしまいます。
該当するページのcssは以下のようになっています。
```ここに言語を入力
.top-main {
 padding: 200px 100px 100px;
 text-align: center;
 position: absolute;
 top: 0;
 width: 100%;
 height: auto;
 min-height: 100%;
 color: black;
 background-color: #3ecdc6;
 background-repeat: no-repeat;
 background-position: center 50%;
 background-size: cover;
 background-image: url("/top.jpg");
}
```
view
```ここに言語を入力
<% if logged_in? %>
 <div class="row">
   <aside class="col-md-4">
     <section class="user_info">
       <%= render 'shared/user_info' %>
     </section>
     <section class="stats">
       <%= render 'shared/stats' %>
     </section>
     <section class="micropost_form">
       <%= render 'shared/micropost_form' %>
     </section>
   </aside>
   <div class="col-md-8">
     <h3>投稿</h3>
     <%= render 'shared/feed' %>
   </div>
 </div>
<% else %>
<div class="top-main">
 <div class="center jumbotron">
   <h1>懐かし掲示板</h1>
   <h2>
     ああ、懐かしや・・・
   </h2>
   <%= link_to "ユーザー登録する", signup_path, class: "btn btn-lg btn-primary" %>
 </div>
 <% end %>
 </div>
```
カスタムCSS
```ここに言語を入力
@import "bootstrap-sprockets";
@import "bootstrap";
@mixin box_sizing {
 -moz-box-sizing:   border-box;
 -webkit-box-sizing: border-box;
 box-sizing:        border-box;
}
/* universal */
body {
 padding-top: 60px;
}
section {
 overflow: auto;
}
textarea {
 resize: vertical;
}
.center {
 text-align: center;
}
.center h1 {
 margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
 line-height: 1;
}
h1 {
 font-size: 3em;
 letter-spacing: -2px;
 margin-bottom: 30px;
 text-align: center;
}
h2 {
 font-size: 1.2em;
 letter-spacing: -1px;
 margin-bottom: 30px;
 text-align: center;
 font-weight: normal;
 color: #777;
}
p {
 font-size: 1.1em;
 line-height: 1.7em;
}
/* header */
#logo {
 float: left;
 margin-right: 10px;
 font-size: 1.7em;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: -1px;
 padding-top: 9px;
 font-weight: bold;
}
#logo:hover {
 color: #fff;
 text-decoration: none;
}
/* footer */
footer {
 margin-top: 45px;
 padding-top: 5px;
 border-top: 1px solid #eaeaea;
 color: #777;
}
footer a {
 color: #555;
}
footer a:hover {
 color: #222;
}
footer small {
 float: left;
}
footer ul {
 float: right;
 list-style: none;
}
footer ul li {
 float: left;
 margin-left: 15px;
}
/* miscellaneous */
.debug_dump {
 clear: both;
 float: left;
 width: 100%;
 margin-top: 45px;
 @include box_sizing;
}
/* sidebar */
aside {
 section.user_info {
   margin-top: 20px;
 }
 section {
   padding: 10px 0;
   margin-top: 20px;
   &:first-child {
     border: 0;
     padding-top: 0;
   }
   span {
     display: block;
     margin-bottom: 3px;
     line-height: 1;
   }
   h1 {
     font-size: 1.4em;
     text-align: left;
     letter-spacing: -1px;
     margin-bottom: 3px;
     margin-top: 0px;
   }
 }
}
.gravatar {
 float: left;
 margin-right: 10px;
}
.gravatar_edit {
 margin-top: 15px;
}
.stats {
 overflow: auto;
 margin-top: 0;
 padding: 0;
 a {
   float: left;
   padding: 0 10px;
   border-left: 1px solid $gray-lighter;
   color: gray;
   &:first-child {
     padding-left: 0;
     border: 0;
   }
   &:hover {
     text-decoration: none;
     color: blue;
   }
 }
 strong {
   display: block;
 }
}
.user_avatars {
 overflow: auto;
 margin-top: 10px;
 .gravatar {
   margin: 1px 1px;
 }
 a {
   padding: 0;
 }
}
.users.follow {
 padding: 0;
}
/* forms */
input, textarea, select, .uneditable-input {
 border: 1px solid #bbb;
 width: 100%;
 margin-bottom: 15px;
 @include box_sizing;
}
input {
 height: auto !important;
}
#error_explanation {
 color: red;
 ul {
   color: red;
   margin: 0 0 30px 0;
 }
}
.field_with_errors {
 @extend .has-error;
 .form-control {
   color: $state-danger-text;
 }
}
.checkbox {
 margin-top: -10px;
 margin-bottom: 10px;
 span {
   margin-left: 20px;
   font-weight: normal;
 }
}
#session_remember_me {
 width: auto;
 margin-left: 0;
}
/* Users index */
.users {
 list-style: none;
 margin: 0;
 li {
   overflow: auto;
   padding: 10px 0;
   border-bottom: 1px solid $gray-lighter;
 }
}
/* microposts */
.microposts {
 list-style: none;
 padding: 0;
 li {
   padding: 10px 0;
   border-top: 1px solid #e8e8e8;
 }
 .user {
   margin-top: 5em;
   padding-top: 0;
 }
 .content {
   display: block;
   margin-left: 60px;
   img {
     display: block;
     padding: 5px 0;
   }
 }
 .timestamp {
   color: $gray-light;
   display: block;
   margin-left: 60px;
 }
 .gravatar {
   float: left;
   margin-right: 10px;
   margin-top: 5px;
 }
}
aside {
 textarea {
   height: 100px;
   margin-bottom: 5px;
 }
}
span.picture {
 margin-top: 10px;
 input {
   border: 0;
 }
}
```
![イメージ説明](a4e321ccee0f09f5dc247fabc434a59a.png)
![イメージ説明](a4e321ccee0f09f5dc247fabc434a59a.png)
```
  • HTML

    24949 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17790 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ruby on Rails

    19754 questions

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

1 追加

galaxymaximum

galaxymaximum score 11

2018/02/28 15:32  投稿

背景のサイズがどうしてもあわず空白が消えません
現在自分でウェブアプリを作っていて、表示したときに貼り付けた画像のように左端に空白ができてしまいます。
![イメージ説明](b621ecd34a956472ae1a61cd9d5c75fe.png)現在自分でウェブアプリを作っていて、表示したときに貼り付けた画像のように左端に空白ができてしまいます。
該当するページのcssは以下のようになっています。
```ここに言語を入力
.top-main {
 padding: 200px 100px 100px;
 text-align: center;
 position: absolute;
 top: 0;
 width: 100%;
 height: auto;
 min-height: 100%;
 color: black;
 background-color: #3ecdc6;
 background-repeat: no-repeat;
 background-position: center 50%;
 background-size: cover;
 background-image: url("/top.jpg");
}
```
view
```ここに言語を入力
<% if logged_in? %>
 <div class="row">
   <aside class="col-md-4">
     <section class="user_info">
       <%= render 'shared/user_info' %>
     </section>
     <section class="stats">
       <%= render 'shared/stats' %>
     </section>
     <section class="micropost_form">
       <%= render 'shared/micropost_form' %>
     </section>
   </aside>
   <div class="col-md-8">
     <h3>投稿</h3>
     <%= render 'shared/feed' %>
   </div>
 </div>
<% else %>
<div class="top-main">
 <div class="center jumbotron">
   <h1>懐かし掲示板</h1>
   <h2>
     ああ、懐かしや・・・
   </h2>
   <%= link_to "ユーザー登録する", signup_path, class: "btn btn-lg btn-primary" %>
 </div>
 <% end %>
 </div>
```
カスタムCSS
```ここに言語を入力
@import "bootstrap-sprockets";
@import "bootstrap";
@mixin box_sizing {
 -moz-box-sizing:   border-box;
 -webkit-box-sizing: border-box;
 box-sizing:        border-box;
}
/* universal */
body {
 padding-top: 60px;
}
section {
 overflow: auto;
}
textarea {
 resize: vertical;
}
.center {
 text-align: center;
}
.center h1 {
 margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
 line-height: 1;
}
h1 {
 font-size: 3em;
 letter-spacing: -2px;
 margin-bottom: 30px;
 text-align: center;
}
h2 {
 font-size: 1.2em;
 letter-spacing: -1px;
 margin-bottom: 30px;
 text-align: center;
 font-weight: normal;
 color: #777;
}
p {
 font-size: 1.1em;
 line-height: 1.7em;
}
/* header */
#logo {
 float: left;
 margin-right: 10px;
 font-size: 1.7em;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: -1px;
 padding-top: 9px;
 font-weight: bold;
}
#logo:hover {
 color: #fff;
 text-decoration: none;
}
/* footer */
footer {
 margin-top: 45px;
 padding-top: 5px;
 border-top: 1px solid #eaeaea;
 color: #777;
}
footer a {
 color: #555;
}
footer a:hover {
 color: #222;
}
footer small {
 float: left;
}
footer ul {
 float: right;
 list-style: none;
}
footer ul li {
 float: left;
 margin-left: 15px;
}
/* miscellaneous */
.debug_dump {
 clear: both;
 float: left;
 width: 100%;
 margin-top: 45px;
 @include box_sizing;
}
/* sidebar */
aside {
 section.user_info {
   margin-top: 20px;
 }
 section {
   padding: 10px 0;
   margin-top: 20px;
   &:first-child {
     border: 0;
     padding-top: 0;
   }
   span {
     display: block;
     margin-bottom: 3px;
     line-height: 1;
   }
   h1 {
     font-size: 1.4em;
     text-align: left;
     letter-spacing: -1px;
     margin-bottom: 3px;
     margin-top: 0px;
   }
 }
}
.gravatar {
 float: left;
 margin-right: 10px;
}
.gravatar_edit {
 margin-top: 15px;
}
.stats {
 overflow: auto;
 margin-top: 0;
 padding: 0;
 a {
   float: left;
   padding: 0 10px;
   border-left: 1px solid $gray-lighter;
   color: gray;
   &:first-child {
     padding-left: 0;
     border: 0;
   }
   &:hover {
     text-decoration: none;
     color: blue;
   }
 }
 strong {
   display: block;
 }
}
.user_avatars {
 overflow: auto;
 margin-top: 10px;
 .gravatar {
   margin: 1px 1px;
 }
 a {
   padding: 0;
 }
}
.users.follow {
 padding: 0;
}
/* forms */
input, textarea, select, .uneditable-input {
 border: 1px solid #bbb;
 width: 100%;
 margin-bottom: 15px;
 @include box_sizing;
}
input {
 height: auto !important;
}
#error_explanation {
 color: red;
 ul {
   color: red;
   margin: 0 0 30px 0;
 }
}
.field_with_errors {
 @extend .has-error;
 .form-control {
   color: $state-danger-text;
 }
}
.checkbox {
 margin-top: -10px;
 margin-bottom: 10px;
 span {
   margin-left: 20px;
   font-weight: normal;
 }
}
#session_remember_me {
 width: auto;
 margin-left: 0;
}
/* Users index */
.users {
 list-style: none;
 margin: 0;
 li {
   overflow: auto;
   padding: 10px 0;
   border-bottom: 1px solid $gray-lighter;
 }
}
/* microposts */
.microposts {
 list-style: none;
 padding: 0;
 li {
   padding: 10px 0;
   border-top: 1px solid #e8e8e8;
 }
 .user {
   margin-top: 5em;
   padding-top: 0;
 }
 .content {
   display: block;
   margin-left: 60px;
   img {
     display: block;
     padding: 5px 0;
   }
 }
 .timestamp {
   color: $gray-light;
   display: block;
   margin-left: 60px;
 }
 .gravatar {
   float: left;
   margin-right: 10px;
   margin-top: 5px;
 }
}
aside {
 textarea {
   height: 100px;
   margin-bottom: 5px;
 }
}
span.picture {
 margin-top: 10px;
 input {
   border: 0;
 }
}
```
![イメージ説明](a4e321ccee0f09f5dc247fabc434a59a.png)
  • HTML

    24949 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17790 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ruby on Rails

    19754 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る