monacaで使うcssの釦の色を変えたい
- monacaでiOSアプリの作成をしている際に、ボタンの色変更方法について質問があります。
- button--largeクラスのbackground-colorプロパティを変更して色を変えることができると思っていましたが、実際にはうまく動作しません。
- 要確認：button02--largeクラスも掲載されている。
- ベストアンサー
monacaで使うcssの釦の色を変えたい
現在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; }
- techhouse
- お礼率77% (1159/1486)
- CSS
- 回答数3
- ありがとう数14
- みんなの回答 （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側の実機側方では反映されてなかったりしています。とりあえずプレビュー画面では修正されている場合はコードは間違っていないと判断するようにしました。 詳細な指摘も頂き助かります。
関連するQ&A
- cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか？ どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- CSS グラデーションが反映されない
DreamWeaverでサイトを制作しています。 下記のように書いてもブラウザ上にグラデーションが反映されないのですが、 どういった原因が考えられるのでしょうか？ #header{ color:#fff; background-color:#F60; moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4); /* For WebKit (Safari, Google Chrome etc) */ background:-webkit- gradient(linear, top, bottom, from(#f60), color-stop(0.3,#C30), to(#fff)); /* For Mozilla/Gecko (Firefox etc) */ background: -moz- linear-gradient(-45deg, #f60, #fff); /* For Internet Explorer 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F06000, endColorstr=#FFFFFFFF); /* For Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; } フォントについてやbox-shadow等は反映されるのですが、グラデーションだけが。。 宜しくお願いします。
- ベストアンサー
- HTML
- css3でボタンの中にアイコンを表示するには？
css3でリンクボタンのデザインを作っています。 グラデーションや角の丸め、影の付け方はわかりました。 しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。 アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか？ （画像の赤い矢印で示した部分です） 作っているcssは以下のような感じです。 a{ border-top: 1px solid #57b4ff; border-left: 1px solid #57b4ff; border-right: 1px solid #0d78ff; border-bottom: 1px solid #0d78ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 2px #a2c1dc; -moz-box-shadow: 1px 1px 2px #a2c1dc; background: -moz-linear-gradient(top, #fff, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。
- ベストアンサー
- CSS
- CSS見出し 文字大きさ
CSSまったくの素人です。 こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが 方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSのカスタマイズについて
ライブドアブログを最近始めたのですが、 素人にも関わらずカスタマイズしたいと思っています。 タイトル部分を中央に揃えたいと思っているのですが どのようにしたらいいかさっぱりわかりません。 カスタマイズのページをコピペします。 よろしくお願いします。 /* ブログのヘッダー、タイトル、説明 ----------------------------------------------- */ #blog-header { margin-bottom: 40px; position: relative; } #blog-header-inner {} #blog-header-image { height: 400px; width: 100%; background-color: #287cba; background-image: -webkit-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -moz-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -ms-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -o-linear-gradient(#57bef5 0%, #287cba 100%); background-image: linear-gradient(#57bef5 0%, #287cba 100%); } #blog-title { font-size: 40px; font-weight: bold; line-height: 1.4; margin: 30px 0; } #blog-title a { color: #000; } #blog-description { color: #979797; font-size: 14px; font-weight: normal; line-height: 1.6; margin: 30px 0; } #blog-description a { color: #979797; }
- 締切済み
- SE・インフラ・Webエンジニア
- CSSのツールチップにアニメーションをつける方法
CSSだけでマウスホバー時にツールチップを表示しています。 以下のように記述することで、ホバー時にツールチップが出るようになったのですが、アニメーションをつけたいと思っています。 HTML ============ <a href='#' class='tooltip'>用語<span>用語の説明</span></a> ============ CSS ============ a:hover {background:#f7f7f7; text-decoration:none;} a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;} a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;} ============ ただ、実際にホバーするのは、ホバー時に表示する文字ではないので、どこにtransitionを記述すればいいかわかりませんでした。 こういう場合、どこにtransitionを追加してあげれば、ホバー時にアニメーションを追加できるのでしょうか？ 以下のセレクタは試してみましたが、ホバー時にアニメーションはつきませんでした。 .tooltip{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .tooltip span{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } ご教示いただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSS3でIE9対応のtransition
以下のようにCSS3でマウスオーバー時に だんだんと右に動くようにしたいのですが 何か方法はありませんでしょうか？ WEBで探してみたのですが、対応方法が見つかりませんでした。 なにとぞよろしくお願いいたします。 .cover { background:gray; width:180px; height:100px; position:absolute; top:0; -moz-transition:left 0.3s ease; -webkit-transition:left 0.3s ease; transition:left 0.3s ease; } .slideleft .cover { left:0px; } .slideleft:hover .cover { left:120px; }
- ベストアンサー
- CSS
- CSS目次開閉でチェックボックスが現れる
CSSで目次開閉を作成したのですが、左上に四角いチェックボックスが現れてしまいます。 このチェックボックスを消す方法はありますでしょうか。 HTML <div class="open-menu"> <input id="open-1" type="checkbox"> <label for="open-1">≡目次</label> <div class="open-menu-inside"> <ol class="numbering"> <li><a href="#1"> </a></li> <li><a href="#2"></a></li> <li><a href="#3"></a></li> </ol> </div> </div> CSS .open-menu input { display: none; } .open-menu label { width: 180px; color: #000000; font-size: 20px; line-height: 2; font-weight: bold; text-align: left; margin: 20px; box-shadow: 5px 5px 5px #aaa; padding: 20px; cursor: pointer; position: relative; display: block; } /* ここから追加 */ .open-menu label { border: 2px solid #ff0000; border-radius: 20px; } .open-menu label:hover { background: #ffb8b3; opacity: 0.5; } .open-menu label:after { position: absolute; right: 10px; top: 50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); content: "［開く］"; } .open-menu input:checked ~ label::after { content: "［閉じる］"; } .open-menu div { height: 0; overflow: hidden; opacity: 0; transition: 0.3s; } .open-menu input:checked ~ div { height: auto; max-width: 80%; opacity: 1; padding: 20px; background: #ffeff9; border: 2px solid #ff95d5; box-shadow: 5px 5px 5px #aaa; border-radius: 20px; overflow: hidden; } .open-menu-inside { color: #333333; font-size: 15px; line-height: 2; } チェックボックスを消す方法があれば、教えていただきたいです。 よろしくお願いいたします。
- 締切済み
- CSS
- CSSで横に伸縮するボタンについて
参考サイトを基にして、横に伸縮するポタンをCSSで 作っており、FireFox2.0ではうまく表示されるのですがIE6および7では右側が切れて表示されてしまい困っております。 どなたかご存知の方、作成中のHTMLを掲載いたしますので、「このプロパティ部分が抜けている」等ご指摘願えませんでしょうか？ ●参考サイト http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php ●サンプルHTML <div id="searchArea"> <a class="button active" href="#"> <span>あああああああああああああああ</span> </a> <a class="button" href="#"> <span>あああああ</span> </a> </div> <style> a.button { background:url(form_buttons.png) no-repeat 0 0; text-decoration:none; height:30px; color:#222; display:-moz-inline-box; display:inline-box; margin-right:8px; } a.button span { background:url(form_buttons.png) no-repeat right top; height:30px; display:-moz-inline-box; line-height:1; margin:0 -16px 0 10px; padding:8px 20px 0 10px; } a.button:hover { background-position:left -60px; } a.button:hover span { background-position:right -60px; } /*アクティブ*/ a.active { background:url(form_buttons.png) no-repeat left -120px; } a.active span { background:url(form_buttons.png) no-repeat right -120px; } </style>
- 締切済み
- CSS
お礼
回答頂きありがとうございます。私はプログラミングの経験ではHTMLが一番最初でした。しかしその後JAVAとかスタイルシートとか出てきていろいろと難しいなと感じ、最近ではC言語などを扱うとが多くてほとんどHTMLは手つかずの状態だったのですが、やはり詳細なHTML開発環境を理解するには仕様を理解する必要が出てくるのですね。 いろいろとサイトを紹介して頂きありがとうございます。