画面がセンタリングされない。

Question

お世話になっております。デザインレシピのflex-boxで、横並びの仮商品配列を作ったのですが、テストページでは、きちんと画面中心にセンタリングされていたのですが、いざ、本ページに仮登録してみると、左によってしまいます。ページはhttps://www.rakuten.ne.jp/gold/auc-jce/indextest.htmlのスーパーSALE表示部分で、左揃えになってしまいます。この部分だけ切り取って、htmlファイルにして実行すれば、全体がセンタリングしてくれるのですが、どこが影響しているのかわかりません。ご教授していただければ助かります。よろしくお願い致します。

Accepted Answer

ECマスターズの伊藤です。flex-boxの記述については、デザインレシピよりきちんと設定いただけたようで、問題なく機能しております。今回、ページが左に寄っているように見えているのは、画像が９０％表示で、左寄せ（特に設定がないと、左寄せになります）で表示されているため全体が左に寄っているように見えております。そのため、まずは class="img" が指定されている画像の横幅を、１００％で表示するように、修正をお願いいたします。.img {width:90%;height:auto;text-align:center;}↓.img {width:100%;height:auto;text-align:center;}しかし、画像を１００％にすると、画像がくっついて表示されてしまうため、

の中に入っているdiv(＝画像やテキストなど、１商品を入れているdiv)に、余白をつけるCSSの記述をお願いいたします。.col_box > div{margin :10px;}※10の部分には、ご希望の余白となる半角数字をご記入くださいませ。上記２箇所を変更していだきますと、センタリングされたレイアウトとなりますので、ご対応くださいますようお願いいたします。

Answer

ありがとうございました。.col_box{　　　}内に、margin:10pxとすればいいと思って、設定してもだめだったので、なんでだろうと思っていました。今回はじめて、.col_box > div{margin :10px;}なる記述方法を見まして、もしよろしければ、私のmargin記述に関する勘違いおよび今回の記述についてご指摘ご教授いただければありがたいです。

Answer

ECマスターズの田中です。.col_box{　　　} 内に margin:10px; を指定した場合、１行分の全体に対して10pxの余白ができ、商品同士の間隔は変わりません。.col_box > divは、classが「col_box」であるタグに直接囲まれている

タグ、つまり、商品１つ１つを囲む

タグを対象とするため、.col_box > div{margin :10px;}とすることで、商品１つ１つに余白を設定することができ、さらに画像の横幅を100%にすることで、余白が統一されて整然とした見た目にすることができます。.col_box > divのような、スタイルシートの対象を選択する部分は「セレクター」と呼ばれ、下記のように、様々な種類がございます。http://www.htmq.com/css3/#selector今後、スタイルシートを直接修正される機会がございましたら、ぜひともご一読の上、「こんなことができる」ということをお含みおきいただければ幸いです。

Answer

ありがとうございます。助かりました。スーパーSALE直前でしたので焦っておりました。もっと勉強しないとだめですね。がんばります。今後とも宜しくお願いいたします。

画面がセンタリングされない。

カテゴリーから探す