楽天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を使用しないで製作してみたいと思います。ご丁寧なご回答、誠に有難うございました。

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

カテゴリーから探す