質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

6720閲覧

iframeで読み込んでいるfacebookタイムラインをレスポンシブ化したい

hajini10

総合スコア50

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/06/19 10:27

iframeでfacebookのタイムラインを埋め込もうとしているのですが、書き込んだコードは以下の通りです。

html

1<!--SNSタイムライン--> 2<div class="container"> 3<h2 style="text-align:center">SNS</h2> 4<div class="row"> 5<!--Twitterのタイムライン--> 6<div class="col-xs-12 col-sm-6"> 7<div class="row"> 8<div class="col-xs-12 col-sm-1"></div> 9<div class="col-xs-12 col-sm-10"> 10<a class="twitter-timeline" data-lang="ja" data-width="456" data-height="500" href="https://twitter.com/xxxxx">Tweets by xxxxx</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 11</div> 12<div class="col-xs-12 col-sm-1"></div> 13</div><!--row--> 14</div> 15 16<!--facebookページのタイムライン--> 17<div class="col-xs-12 col-sm-6"> 18<div class="row"> 19<div class="col-xs-12 col-sm-1"></div> 20<div class="col-xs-12 col-sm-10"> 21<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F(facebookページのID)%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=true&show_facepile=true&appId=109316779649896" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 22</div> 23<div class="col-xs-12 col-sm-1"></div> 24</div><!--row--> 25</div><!--row--> 26</div><!--container--> 27<!--ここまで(SNSタイムライン)-->

要はsm以上の画面幅では、6:6で割って、左側にtwitterタイムラインと、右側にfacebookタイムラインを組みこもうとしているのですが、スマホビューで確認した時に、twitterタイムラインの方は綺麗にdiv幅に収まったのですが、facebookタイムラインの方が余分に右方向に膨らむ形で表示され、操作感としても、若干右方向にスクロールされるような形になってしまいました。

iframeで綺麗にレスポンシブ表示させるにはどうすればいいでしょうか?
私はjavascriptに関する知識が少ないので、可能であればhtmlかcssの追記で済ませられたらと思っています。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

width="340" style="width:100%" こうしたらどうなりますか?

投稿2017/06/19 11:18

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hajini10

2017/06/19 11:55 編集

横幅を指定する場所が2箇所ありまして、もう1箇所... ``` ...timeline&width=456&height=500&small_header=... ``` に記述する場所があります。このwidth=456を、width=100%に変えてやってみたのですが、`Param width must be a number` というエラーが出てしまいました。ここはどうすれば良いでしょうか?
kei344

2017/06/19 12:05

そちらをレスポンシブにすることは出来ないので、外側のiframeだけでもレスポンシブにすることではみ出しはなくなると思いますよ。 そっちに対応しようと思ったらHTMLだけでなくJavaScriptで動的にiframeタグを作る必要があります。
hajini10

2017/06/19 12:20

なるほど! 今、width=456の部分だけを、width=100%に変えてみたら、たしかにiframe部分だけが綺麗に収まりました! 中身もレスポンシブ化する場合は、Javascriptをいじらないといけないんですね。今後の挑戦課題が見えました! ひとまず現状の課題は、スマホビューにした時に画面がちょこちょこ横にずれる事だったので、それが解決出来たのは非常に助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問