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

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

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

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

Monaca

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

Q&A

解決済

1回答

2113閲覧

monacaのボタン文字を小文字にしたい

退会済みユーザー

退会済みユーザー

総合スコア0

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2016/12/26 03:26

編集2016/12/26 03:29

monacaのサンプル「Onsen UI V2 Angular 1 Navigation」をクラウドIDEで開き、プレビューで確認した時

<ons-button ng-click="navi.pushPage('page.html')"> Push Page </ons-button>

と書いているのにプレビュー設定をNexusにすると

PUSH PAGE

というように、ボタン文字が大文字になってしまいます。iPhoneプレビューだと問題ないようでした。

設定した通りの小文字混じりにする方法をご存知の方いましたら回答お願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

私も先日同様の疑問にぶつかりました。そのとき自分なりに調べた結果を回答させていただきます。

OnsenUIによって表示されるコンポーネントは、実行環境によってデザインが切り替わるようです。
具体的にはiOSではフラットデザイン、AndroidではマテリアルデザインのUIとして表示されます。
コードで言うと、プレビュー設定をNexusにした場合、ボタン要素にclass="button--material"が追加されていることが確認できると思います。
このように実行環境によってクラス属性が変わるため、反映されているデザインも変わっているようです。

これを修正するには、onsen-css-component.cssの1647行目から始まる.button--materialから始まる記述を変更すれば修正することができます。
今回は文字列が全て大文字になるのを防ぎたいということなので、1707行目の
text-transform: uppercase;
(文字列を全てを大文字で表示する記述)を削除してしまえばNexusでのプレビューでも小文字混じりで表示できます。

(一応実際にテンプレプロジェクトを作成してファイルを確認しましたが、もしかしたら環境によって行数が違うかもしれません・・・行数が異なっていたら同様の記述を探してください)

投稿2016/12/26 05:07

編集2016/12/26 05:10
koronatail

総合スコア433

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

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

退会済みユーザー

退会済みユーザー

2016/12/26 07:01

アドバイス通りの方法で解決しました!素早い回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問