楽天GOLD でレスポンシブデザインにしたい

Question

楽天GOLD を利用しています。
PCトップページ（INDEX.HTML） のみ楽天GOLD にしていますが、これをCSS を使ってレスポンシブデザインにすることは可能でしょうか？
よろしくお願いいたします。

Accepted Answer

ECマスターズの田辺です。

本来 iframe はRMSに直接記述ができないタグを
間接的に表示させることができるように
利用していただくことが多いので、
タグの制限がない index.html では iframe を使わずに、

iframe で読み込んでいるHTMLの内容を直接
index.htmlにご記入いただくことをおすすめいたします。

iframeは使いすぎると、
Googleなど外部エンジンから見た場合、
コンテンツとして認識しなくなることと、
田中からご案内があった通り、
iframe を使っていると読み込んでいる各HTMLで
レスポンシブの指定をしなければなりませんので

１箇所（index.html）にまとめていただき、
その中でメディアクエリを指定していただいた方が
編集がしやすくなります。

Answer

ECマスターズの田中です。

> PCトップページ（INDEX.HTML） のみ楽天GOLD にしていますが、これをCSS を使ってレスポンシブデザインにすることは可能でしょうか？
細かい調整は必要ですが、可能です。

index.htmlを確認したところ、
ヘッダー・フッター・レフトナビ・ページ内容に
それぞれiframeで別のページを埋め込んで
作成されていることがわかりました。

まずは、読み込んでいる各HTMLで、
スマートフォンで観た時に
どのような横幅で表示するかを
指定する必要がございます。

指定は  タグで行うのですが、
たとえば、スマホでは要素を全て縦並びにして表示する場合は、
全てのHTMLファイルの、〜の中に

とご記載ください。

次に、全てのHTMLファイルにて、
表示する横幅ごとに適用させたいスタイルシートを
メディアクエリを利用してご指定ください。

メディアクエリを利用すると、
表示する横幅が◯◯px〜◯◯pxの場合は
このスタイルシートを適用させる、
という形式で指定することができます。
https://techacademy.jp/magazine/9369

Answer

ECマスターズクラブ田中さま

御返答ありがとうございます。

メディアクエリの使用方法は分かるのですが、
index.htmlをレスポンシブにするためには、iframeを使わない方が良いでしょうか？

もしiframeを使用してもよいならば、
iframeで幅や高さを固定するのは良くないでしょうか？

Answer

ECマスターズクラブ　田中様

ご返答有難うございます。

iframeを使用しないで製作してみたいと思います。

ご丁寧なご回答、誠に有難うございました。