重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

monacaで使うcssの釦の色を変えたい

解決済

  • 質問者：techhouse
  • 質問日時：
  • 回答数：3件

現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。

<a class="button--large" href="mentenance_index.html">テスト1</a>
<a class="button--large" href="mentenance_index.html">テスト2</a>
<a class="button--large" href="mentenance_index.html">テスト3</a>

このときにこのボタンの色を変えたいと思うのですが、

"css/style.css"

このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか？
ちなみに、
.button--large {
.....（中略）......
background-color: #1284ff;
.....（中略）......
}

この部分だと自分は思い、
background-color: #00008b;　　というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。

この button02--large クラスの内容も掲載させて頂きます。
どうぞ、ご教示の程よろしくお願い致します。



.button--large {
text-align: center;
position: relative;
display: inline-block;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: auto;
text-decoration: none;
padding: 4px 20px;
font-size: 16px;
line-height: 36px;
letter-spacing: 0;
color: #fff;
text-shadow: 0 1px none;
vertical-align: middle;
background-color: #1284ff;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
-moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
-o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
font-weight: 400;
font-size: 16px;
font-weight: 500;
line-height: 36px;
padding: 4px 20px;
display: block;
width: 100%;
}
.button--large:active {
background-color: #1284ff;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
opacity: 0.6;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.button--large:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.button--large:hover {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.button--large:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0;
}

「monacaで使うcssの釦の色を変えた」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

はっきり言ってうんざりです。

あなたはそれ以上にうんざりでしょう。
＞iOS
　これはOSですから、直接は関係ないブラウザをターゲットにしたウェブ製作です。

<a class="button--large" href="mentenance_index.html">テスト1</a>
<a class="button--large" href="mentenance_index.html">テスト2</a>
<a class="button--large" href="mentenance_index.html">テスト3</a>
　こんなHTMLは書きません。スマホが主たるターゲットでしたらHTML5で構わないと思いますが、他のユーザーエージェントだと使えないじゃまずい・・。なぜならHTMLは本来
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　なのですからね。検索エンジンはスタイルシート利用しませんし・・

HTMLは
<body>
　<header>
　　<nav>
　　　<ul>
　　　　<li><a href="/">トップ</a></li>
　　　　<li><a href="/abcd">ABCD</a></li>
　　　　<li><a href="/efgd">EFG</a></li>
　　　</ul>
　　</nav>
　</header>
とかになるはずです。デザインは関係ないし、いちいちclass名なんてつけなくても文書構造から要素は指定できる。もしボタンを小さくしたいときclass名をsmall--largeにかえるのですか(^^)。そんなことしないですよね。

　そしてスタイルシートは
<style media="screen">
<!--
header nav{
width:98%;margin:0 auto;/* ウィンドウ幅の98% */
}
header nav ul{/* 以下は継承されるプロパティなのでここで指定 */
list-style:none;
line-height:2em;
text-align:center;
margin:0;padding:0;
}
header nav ul li{position:relative;}
header nav ul li+li{margin-top:5px;}/* ボタン押し難いので二つ目以降マージンあける */
header nav ul li a{/* A要素(リンク)のデザイン */
display:block;
width:90%;
padding:0 5%;
height:100%;
border-radius:5px;
text-decoration:none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 色を指定しておこう */
header nav ul li a{color:white;background: linear-gradient(blue, navy);}
header nav ul li a:hover{background-color:blue;}
header nav ul li a:active{background-color:aqua;color:yellow;}

-->
</style>

これだけでよい。
・HTMLはデザインではなく文書構造【だけ】を記述する。
　そのためのスタイルシートです!!→構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・スタイルシートは、その文書構造を元にセレクタを記述する。
　セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )を知らないと、「構造とプレゼンテーションの分離」は実現できない。
・継承されるプロパティは下位では書かない
　プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
・ブラウザのもつデフォルトの指定を利用する。
　font-weight:400;なんて書く必要ない
・文字を白くするときは、meadia=screenを書かないと印刷できない。
　ためしにPCのブラウザで見て印刷プレビューしてみる。
・スマホ縦でも横でも使えるはず

1) HTMLの仕様書を一度目を通しておくべき スタイルシートを使うときは特に
2) スタイルシートはプロパティを覚えるより先に、セレクタやカスケーディングの仕組みを理解しないと、絶対に使いこなせない。仕様書でもプロパティの説明よりも前に詳しく書いてある。
3) CSS3より先にCSS2.1を、HTML5より先にHTML4.01strictをマスターしましょう。
　そのほうが絶対に上達は早い。

[サンプル]
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　で検証済みのHTML5+CSS3
★タブは＿に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<style media="screen">
<!--
header nav{
width:98%;margin:0 auto;
}
header nav ul{
list-style:none;
line-height:2em;
text-align:center;
margin:0;padding:0;
}
header nav ul li{position:relative;}
header nav ul li+li{margin-top:5px;}
header nav ul li a{
display:block;
width:90%;
padding:0 5%;
height:100%;
border-radius:5px;
text-decoration:none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
header nav ul li a{color:white;background: linear-gradient(blue, navy);}
header nav ul li a:hover{background-color:blue;}
header nav ul li a:active{background-color:aqua;color:yellow;}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>本文</p>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿＿<p>
＿＿</p>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答頂きありがとうございます。私はプログラミングの経験ではHTMLが一番最初でした。しかしその後JAVAとかスタイルシートとか出てきていろいろと難しいなと感じ、最近ではC言語などを扱うとが多くてほとんどHTMLは手つかずの状態だったのですが、やはり詳細なHTML開発環境を理解するには仕様を理解する必要が出てくるのですね。

いろいろとサイトを紹介して頂きありがとうございます。

通報する
お礼日時：2014/10/19 16:25

No.3

  • 回答者： ONEONE
  • 回答日時：

一つ訂正です。


Windows phoneやストアアプリにも対応しているようですね。

ということで、Windowsはインターネットエクスプローラーのエンジンなので-oや-mozはいりませんが、場合によっては-msがいるものもあるかもしれません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答頂きありがとうございます。iphoneだけでなく様々なスマートフォンアプリにも対応している開発環境なので、とりあえずプレビューでプログラム修正後反映されているかどうかでプログラム修正ができているのかを判断するようにしました。

通報する
お礼日時：2014/10/19 16:22

No.2

  • 回答者： ONEONE
  • 回答日時：

背景色を変えるのでしたらbackground-colorでいいはずです。



>色が変わらない

プレビューでも同じですか？
F12でデベロッパーツールが開けるので、
要素にあたってるCSSを確認してみてください。
実機のデバッグツールのほうに同期していないとかでは？

また、monacaということでiOSやAndroidのWebViewエンジン（webkit）のみを
考慮すれば良いので-oとか-mozのものはいりません。
いるところにだけ-webkitを入れてください。

背景色で躓かれるレベルでしたら、まずは:hoverなどの疑似要素は書かずに
もっとシンプルに書きましょう。いろいろ詰め込みすぎです。

どうでもいいのかもしれないけど気になる点。
button--largeのようにハイフン２つ連続するのは見かけないですね。。。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答頂きありがとうございます。プレビューで確認すると修正が実施されている場合があるのですが、iphone側の実機側方では反映されてなかったりしています。とりあえずプレビュー画面では修正されている場合はコードは間違っていないと判断するようにしました。

詳細な指摘も頂き助かります。

通報する
お礼日時：2014/10/19 16:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報