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

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

新規登録して質問してみよう
ただいま回答率
85.36%
UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

Onsen UI

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

Monaca

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

Q&A

解決済

2回答

2296閲覧

onsen UI 余白の消し方がわかりません。

hagakenG

総合スコア26

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2019/12/02 05:36

MONACAのテンプレート使ってアプリを作成しています。
page1 のTOOLBARの部分にボタンと、topというidの<div> を配置しました。

<div> は中央寄せに設定してあるのですが、 <div>の内容物が増えてきても、添付した画像のように、 ボタンと<div>の間に空白ができたままで、 トランプのカードは右側の画面外にはみ出てしまいます。 まだ左側に余白があるのに。

この余白を除去するにはどのようにすればよいのでしょうか。
ご存じの方ぜひご教示のほうよろしくお願いいたします。
イメージ説明

<body> <ons-navigator id="navigator" page="page1.html"></ons-navigator> <ons-template id="page1.html"> <ons-page id="first-page"> <ons-toolbar><ons-button id="push-button">X </ons-button> <div class="center" id="top"></div> </ons-toolbar>

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

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

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

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

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

guest

回答2

0

ベストアンサー

Chrome DevToolsを使用して、どのようなHTMLが生成されているか確認すれば原因がわかります。
今回の場合、<div class="left toolbar__left"></div>が自動的に埋め込まれ、そのクラスtoolbar__leftのwidth:27%;が影響し、余白が表示されます。

HTML

1<ons-navigator id="navigator" page="page1.html" _is-running="false" data-device-back-button-handler-id="0" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 2 <ons-page id="first-page" class="page" shown="" style=""> 3 <ons-toolbar class="toolbar"> 4 <ons-button id="push-button" class="button">X</ons-button> 5 <div class="left toolbar__left"></div> 6 <div class="center toolbar__center toolbar__title" id="top">あああああああああああああああああああああああああああああああああああああああああああああああ</div> 7 <div class="right toolbar__right"></div> 8 </ons-toolbar> 9 <div class="page__background"></div> 10 <div class="page__content"></div> 11 </ons-page> 12</ons-navigator> 13<template id="page1.html"> 14 <ons-page id="first-page"> 15 <ons-toolbar> 16 <ons-button id="push-button">X</ons-button> 17 <div class="center" id="top">あああああああああああああああああああああああああああああああああああああああああああああああ</div> 18 </ons-toolbar> 19 </ons-page> 20</template>

単純に余白を消す場合は、display:none;にスタイルを書き換えます。

CSS

1#first-page .toolbar__left { 2 display: none; 3}

投稿2019/12/08 08:38

otak-lab

総合スコア276

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

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

0

<ons-button id="push-button"><div class="left"> </div> で囲んでみるのはどうでしょうか。

また、以前同じようなことがあった時、ダミーで <div class="right></div> で調整したことがあります。

投稿2019/12/02 07:01

moongift

総合スコア250

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

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

hagakenG

2019/12/02 07:34

うまくいきませんでした。。。
taiyakix

2019/12/07 05:43

moongiftさん、アシアルブログの人じゃないですか
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問