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

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

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

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

Monaca

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

Q&A

解決済

1回答

888閲覧

monacaのタイトル部分の背景色を変えたのですが、右の1/3だけ白色にになってしまいます。

TaisukeShimane

総合スコア14

HTML5

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

Monaca

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

0グッド

0クリップ

投稿2017/11/09 14:08

monacaのタイトル部分の色を変えたくて試しています。

monacaのテンプレだと、真ん中1/3はclassがcenterとなっており、左1/3はclassがleftとなっているので、それぞれ以下と同じようにしました。

しかし、右側の3/1がhtml内に存在せず色が変えられません。どなたかタイトルの色の変更のやり方について教えてください。

CSSには以下のように記述しています。
.center{
margin:30 30 30px 30;
padding:12px 8px ;
border-width:0 0 5px 0 ;
border-color:#1d4cd3;
border-style:solid;
background:#fff;
color:#153fa2;
line-height:140%;
font-weight:bold;
}

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

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

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

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

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

guest

回答1

0

ベストアンサー

そもそも.centerにあてるのが良くないと思います。
タイトル全体のタグにあてた方が良いのではないでしょうか。

こういった質問はHTMLを合わせて載せていただきたいのと
ソースコードは```で囲って分かりやすくしていただいた方が良いです。

例えば、こんな感じです。

CSS

1.center{ 2 margin:30 30 30px 30; 3 padding:12px 8px ; 4 border-width:0 0 5px 0 ; 5 border-color:#1d4cd3; 6 border-style:solid; 7 background:#fff; 8 color:#153fa2; 9 line-height:140%; 10 font-weight:bold; 11}

編集する時にこんなマークのボタンがあるので</>押して確認してみてください。

投稿2017/11/09 23:30

yuki-saito

総合スコア928

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

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

TaisukeShimane

2017/11/10 03:36

ご指摘ありがとうございます。 HTMLはこんな感じです <ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> hook </div> </ons-toolbar> <p style="text-align: center; opacity: 0.6; padding-top: 3px;"> hook </p> </ons-page> </ons-template>
yuki-saito

2017/11/10 06:47

やはりそうですよね。 ons-toolbarにあてるのが正解だと思います。
TaisukeShimane

2017/11/11 09:46

回答ありがとうございます。 それも試したのですが、そうするとなぜか適用されないんです。
yuki-saito

2017/11/13 00:03

ではそちらを解決させる方向で動きましょう。 .toolbarにCSSを充てればできると思います。 それでできることを確認しました。
TaisukeShimane

2017/11/13 03:15

回答ありがとうございます。 以下で試したのですが、反映されません。何か指摘点ございますか? .toolbar{ margin:30 30 30px 30; padding:12px 8px ; border-width:0 0 5px 0 ; border-color:#1d4cd3; border-style:solid; background:#fff; color:#153fa2; line-height:140%; font-weight:bold; }
yuki-saito

2017/11/13 03:33

そうなるともうかみ合わせの問題な気がするので Developer toolでどうなっているのか見ていくしかないですかね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問