CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

iframeのレスポンシブ対応について (No. 1748)

回答日: 2015-11-09

質問

スマホ対応お知らせ更新(レスポンシブWebデザイン)を導入しています。
(utf-8版)
ホームページ(トップページ)にiframeで短い一覧を表示させていますが、
ウィンドウ幅が狭くなった時、一覧の文字が折り返しせず、はみ出てしまいます。
レスポンシブ対応させるためにはどのように設定すればよいのでしょうか。

・製品名:スマホ対応お知らせ更新(レスポンシブWebデザイン)
・環境:windows7

よろしくお願いいたします。
投稿日時: 2015-11-07 11:56

回答

「すぐ使えるCGI」のご利用誠にありがとうございます。

さて早速 iframe のレスポンシブWeb対応ですが、具体的な方法は色々な可能性があります。もし iframe の親タグがレスンポンシブWeb化されているのであれば、iframe の幅設定を100%に設定すれば親タグの幅に伴ってiframeの幅も変わる筈ですのでお試し下さい(下記例)。

古めの書き方例)
<iframe width="100%" src="...">

スタイルシートを利用した書き方例)
<iframe style="width: 100%;" src="...">
回答日: 2015-11-09