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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Onsen UI

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

Monaca

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

Q&A

解決済

2回答

3684閲覧

onsen-uiのonsen toolbar内に、アプリのロゴを配置したい。

NOTK

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2016/06/12 12:15

###前提・実現したいこと
Onsen UIを用いて Monacaでアプリ開発をしています。
Onsen Toolbarを実装し、アプリ上部にToolbarが表示されている状態で、
そのツールバー内 中央部にアプリのロゴを配置したいのですが、
どう実装していくのが最適でしょうか?

###試したこと
下のソースコードのように、シンプルに画像を配置してみました。
#####該当のソースコード

onsen

1<ons-toolbar> 2 <div class="left"> 3 <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button></div> 4 <div class="center"><img src="images/****.png" height="100%"></div> 5</ons-toolbar>

画像こそ出てきたものの、端末によって縦横比がずれてしまうことがあったり、
上下中央配置ができなかったりと、
満足のいく仕上がりになっておりません。

HTML CSSを扱うにあたって初歩的な質問かもしれませんが、
みなさんどのように対応されているのでしょうか。
ご意見お聞かせいただければと思います。

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

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

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

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

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

hidekichi

2016/06/15 18:17

普通にcssで画像を縦横中央寄せする方法等で良いのでしょうか?
NOTK

2016/06/16 08:10

コメントありがとうございます。 普通にCSSで縦横中央寄せする方法で結構です。 一般的に見られるアプリではどのように実装されているのか気になったため、 他の方の意見も伺いたく質問させていただきました。
guest

回答2

0

回答いただいた方法でも解決できましたが、
デバイスによって表示位置が異なってしまうため、改善策を探していました。

Onsen UIのバージョンを2.xに変更し、
ツールバー内に下記のように、背景画像として配置することで解決済みです。

HTML

1<ons-toolbar> 2 -- 省略 -- 3 <div class="center" style="background:url('images/***.png') center bottom no-repeat;background-size:contain;"> 4 </div> 5 -- 省略 -- 6</ons-toolbar>

投稿2016/07/06 05:39

NOTK

総合スコア11

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

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

0

ベストアンサー

いくつか方法がありますが、親要素にposition: relative;を入れておいて、その中身は、

子要素 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

とすると親要素の縦横中央に子要素が位置します。

transformの部分のtranslateはtranslate3d(-50%,-50%,0);でも良いと思います。

画像の比率を保つのもいくつか方法がありますが、まず元のサイズの比率が正しく作られているのであれば(くり抜きとかはしない場合)、width: 100%; height: auto;で比率が保てます。ここで100%に対してautoにしてあるため、質問のcssの場合、

div.center div.wrapper img

と言う感じで、もうひとつ.wrapperを入れ、ここに先ほどの子要素の縦横中央のを入れ、widthを決めます。で画像はそのサイズの100%で高さはautoですから良い感じになるという寸法です。

サンプル こんな感じです。

他にも方法はあると書きましたが、5つか6つぐらいメジャーな縦横中央寄せの方法があったと思います。

投稿2016/06/16 08:27

hidekichi

総合スコア366

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問