- ベストアンサー
monacaで使うcssの釦の色を変えたい
- monacaでiOSアプリの作成をしている際に、ボタンの色変更方法について質問があります。
- button--largeクラスのbackground-colorプロパティを変更して色を変えることができると思っていましたが、実際にはうまく動作しません。
- 要確認：button02--largeクラスも掲載されている。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
はっきり言ってうんざりです。あなたはそれ以上にうんざりでしょう。 ＞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-html401j/intro/intro.html#h-2.2.1 )］より なのですからね。検索エンジンはスタイルシート利用しませんし・・ 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-html401j/intro/intro.html#h-2.4.1 ) ・スタイルシートは、その文書構造を元にセレクタを記述する。 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )を知らないと、「構造とプレゼンテーションの分離」は実現できない。 ・継承されるプロパティは下位では書かない プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) ・ブラウザのもつデフォルトの指定を利用する。 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>
その他の回答 (2)
- ONEONE
- ベストアンサー率48% (279/575)
一つ訂正です。 Windows phoneやストアアプリにも対応しているようですね。 ということで、Windowsはインターネットエクスプローラーのエンジンなので-oや-mozはいりませんが、場合によっては-msがいるものもあるかもしれません。
お礼
回答頂きありがとうございます。iphoneだけでなく様々なスマートフォンアプリにも対応している開発環境なので、とりあえずプレビューでプログラム修正後反映されているかどうかでプログラム修正ができているのかを判断するようにしました。
- ONEONE
- ベストアンサー率48% (279/575)
背景色を変えるのでしたらbackground-colorでいいはずです。 >色が変わらない プレビューでも同じですか？ F12でデベロッパーツールが開けるので、 要素にあたってるCSSを確認してみてください。 実機のデバッグツールのほうに同期していないとかでは？ また、monacaということでiOSやAndroidのWebViewエンジン（webkit）のみを 考慮すれば良いので-oとか-mozのものはいりません。 いるところにだけ-webkitを入れてください。 背景色で躓かれるレベルでしたら、まずは:hoverなどの疑似要素は書かずに もっとシンプルに書きましょう。いろいろ詰め込みすぎです。 どうでもいいのかもしれないけど気になる点。 button--largeのようにハイフン２つ連続するのは見かけないですね。。。
お礼
回答頂きありがとうございます。プレビューで確認すると修正が実施されている場合があるのですが、iphone側の実機側方では反映されてなかったりしています。とりあえずプレビュー画面では修正されている場合はコードは間違っていないと判断するようにしました。 詳細な指摘も頂き助かります。
お礼
回答頂きありがとうございます。私はプログラミングの経験ではHTMLが一番最初でした。しかしその後JAVAとかスタイルシートとか出てきていろいろと難しいなと感じ、最近ではC言語などを扱うとが多くてほとんどHTMLは手つかずの状態だったのですが、やはり詳細なHTML開発環境を理解するには仕様を理解する必要が出てくるのですね。 いろいろとサイトを紹介して頂きありがとうございます。