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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

1877閲覧

monaca iframeを使うとできる余白を消したい Onsen UI

hanakoro

総合スコア0

iframe

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/05/14 14:11

前提・実現したいこと

monacaを用いてアプリを作っています。アプリ上でiframeでWIXで作成したwebサイトを表示させるのですが、左右に必ず余白ができてしまいます。CSSの部分を100%からピクセル数字に変えてもiframeで表示したものが左端に寄ってしまい右に余白ができてしまいます。どうしたら余白ができずに、iframeで表示したものを画面いっぱいに表示することができますか?
WIXで作成したwebサイトのスマホ対応化?

発生している問題・エラーメッセージ

アプリ上でiframeでWIXで作成したwebサイトを表示させると、左右に必ず余白ができてしまいます。CSSの部分を100%からピクセル数字に変えてもiframeで表示したものが左端に寄ってしまい右に余白ができてしまいます。

該当のソースコード

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("Onsen UI is ready!"); 18 }); 19 20 document.addEventListener('show', function(event) { 21 var page = event.target; 22 var titleElement = document.querySelector('#toolbar-title'); 23 24 if (page.matches('#first-page')) { 25 titleElement.innerHTML = 'a'; 26 } else if (page.matches('#second-page')) { 27 titleElement.innerHTML = 'i'; 28 } 29 }); 30 31 if (ons.platform.isIPhoneX()) { 32 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 33 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 34 } 35 ons.disableAutoStatusBarFill(); 36 </script> 37</head> 38<body style="margin:auto 0;padding:auto 0;"> 39 <ons-page> 40 <ons-toolbar> 41 <div class="center" id="toolbar-title"></div> 42 </ons-toolbar> 43 <ons-tabbar position="auto"> 44 <ons-tab label="a" page="tab1.html" active> 45 </ons-tab> 46 <ons-tab label="b" page="tab2.html"> 47 </ons-tab> 48 </ons-tabbar> 49 </ons-page> 50 51 <ons-template id="tab1.html"> 52 <ons-page id="first-page"> 53 <iframe src="サイトURL" seamless></iframe> 54 </ons-page> 55 </ons-template> 56 57 <ons-template id="tab2.html"> 58 <ons-page id="second-page"> 59 <p style="text-align: center;"> 60 This is the second page. 61 </p> 62 </ons-page> 63 </ons-template> 64</body> 65</html>

CSS

1 html,body{ 2 width:100%; 3 height:100%; 4 padding:0; 5 margin:0; 6 } 7 8 iframe{ 9 width:100%; 10 height:100%; 11 padding:0; 12 margin:0; 13 border:0; 14 } 15

試したこと

コード中のサイト名に自分のオリジナルサイトがはいるのですができませんでした。別のサイトで試したところ成功したさいともあったためスマホに対応しているといいのかなとも思いました。オリジナルサイトはWIXでつくりました。

補足情報(FW/ツールのバージョンなど)

サイトはWIXで作りました。
Oncen UIも使用しました

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問