質問: 楽天goldページ作成について お世話になっております。現在楽天goldにてレスポンシブ対応のトップページを作成しています。https://www.rakuten.ne.jp/gold/******/top/index.html制作している段階で3点ほど疑問点が出てきたので質問させていただきます。1上部のショップロゴと、右のテキストメニューが上揃えになってしまっているのでショップロゴの縦幅の中心に、右のメニューがくるように揃えたいです。2一番上の灰色のヘッダーが、画面サイズいっぱいの両端揃えになってしまっているのでそれぞれスライドショーの両端の表示位置に揃えたいです。※グレーの帯は画面いっぱいのまま3ecステーションさんの「にぎわいrmix」で新着商品のiframeを記載しているのですがなかなかキレイに表示されません。(new itemのところです)希望としては、pcで見たときに、「横3個の3列」に並んでほしくスマホで見たときには「横2個の5列」に表示されるようにしたいのです。何か方法はありますでしょうか?あとiframe全体の横幅を、メインメニューの横幅に合わせたいです。長々とすみません。お忙しいところ恐縮ですがご対応の程宜しくお願いいたします。
回答: ecマスターズの田中です。> どこを調整したらよいのでしょうか?同じく、にぎわいrmixのテンプレート設定のスタイルシート、「/*◇スライド◇*/」と記載されている部分の各値を調整していただきますようお願いします。ul.slider への規則にある padding にて、全体の左右の余白、ul.slider li への規則にあるpaddingにて、 各商品ごとの左右の余白、widthにて、各商品ごとの横幅を、それぞれ設定しております。paddingプロパティでは、2つ目の値が右側、4つ目の値が左側の余白をそれぞれ指定しておりますので、ul.slider の padding が 0px 10px 10px 10pxul.slider li の padding が 10px 10px 10px 10pxul.slider li の width が170pxである場合、全体として左右に10px余白を作り、各商品ごとにさらに左右に10px余白を作り、商品を表示する部分は横幅170pxで表示することになりますので、3列表示した場合、全体の幅としては10px + ( 10px + 170px + 10px ) x 3 + 10px = 590pxとなり、合計590px分が表示のために使われることになります。これを踏まえて、iframeタグの横幅に合わせて各プロパティの値を調整していただければ結構なのですが、rmixc.html用のiframeは、最大横幅666pxとして、ウィンドウの横幅が狭まるのに合わせてiframeの横幅もどんどん狭くなっていく仕組みになっておりますので、px単位ではなく、iframe全体の幅からの割合で計算できるvw単位を利用し、さらに計算を加える必要がございます。たとえば、現在の余白を保ったまま、領域全体を使って3列表示させる場合は、ul.slider li の width を calc( ( 100vw - 20px ) / 3 - 20px ) にご変更ください。「/*◇スライド◇*/」部分の調整が終わりましたら、次に「/*◇商品画像◇*/」と記載されている部分を2箇所、再び「/*◇スライド◇*/」の部分を1箇所、それぞれ調整をお願いします。.pictへの規則にて、高さ(height)が170px、横幅(width)は未指定となっておりますので、height の値を auto に変更の上、「width: 100%;」を追記してください。そうすると、画像が大きくなる分、全体の高さがたりなくなりますので、「/*◇スライド◇*/」の下にあるul.slider li の height の値を大きくしていただく形になります。