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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

6975閲覧

submitボタンの装飾について

tkkawachann

総合スコア15

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/10/26 18:02

編集2015/10/27 08:30

プログラミング初心者です。
css外部ファイルから、input type="submit"ボタンを装飾しようとしたのですが、うまく機能してくれません。

http://monopocket.jp/blog/css/1113/
上記サイトを参考にしたのですが、
width属性、font-sizeなどは見た目が変わりました。
しかし、padding、color、background-colorなどは変わりません。

htmlのコードの方で
<input type="submit" id="send" name="Tweet" value="ツイート">
としています。

原因、解決法教えていただけますでしょうか。
よろしくお願いします。


追記
chrome開発モードでチェックしたのですが、paddingが機能してないです。またfont-sizeは変化はしますが、全く同じ大きさでは表示されません。例えば、40pxと設定しても、30pxと同じ大きさでしか表示されません。

イメージ説明

すみませんが、再度よろしくお願いします。

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

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

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

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

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

raccy

2015/10/26 21:52

HTMLのコードだけではなく、CSSのコードもあれば、問題がわかるかも知れません。 可能であれば情報を追加してください。
guest

回答3

0

ある要素に対してstyleが複数存在する場合、より詳細に指定したstyleが採用されます。

例えば、ご質問のリンク先を参考例にさせていただきますと、
イメージ説明

「投稿する」ボタンのpaddingは、style.cssではなく、inputタグに指定したstyle属性が採用されています。
ご自身で組んだhtmlを上記画像の状態(F12を押したchrome開発モード)にして、
styleが効いているか確認してみてください。

投稿2015/10/26 20:08

TetsujiMiwa

総合スコア1124

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

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

0

ベストアンサー

色々手元で試して、原因がたぶんわかりました。input#sendの所に

CSS

1background-color: #FFF;

を追加してみてくださ(背景色はご自由に変えてください)。たぶん、うまくいくはずです。

【解説】
※ 下記は公式な仕様書まで確認していませんので、憶測が混じっています。あらかじめご了承ください。

<input type="submit"><button>などのボタン系の要素ではデフォルトでbackground-color: buttonface;というスタイルが設定されています。このbuttonfaceは特殊なシステムカラーで、デフォルトボタン特有の3Dっぽい背景色になるようになっています。また、この設定がトリガーになっていて、background-color: buttonface;になっているボタン系の要素は常にデフォルトのボタンの表示にするとなっているようです。問題はこのデフォルトのボタンなのですが、他とは異なる特殊な描画扱いらしく、パディング等の一部のスタイルは一切無視されてしまいます。

そこでbackground-colorを別の値で上書きすると、他の要素と同じような扱いに変わります。3Dっぽい描画はなくなりますが、ユーザ側でpadding等の細かいスタイルが有効になるということです。

投稿2015/10/27 10:03

raccy

総合スコア21733

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

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

tkkawachann

2015/10/27 17:48

ありがとうございます。 おかげ様で、うまく動きました!
guest

0

まずは、外部ファイルのリンクが正しくされているか確認。それが正しければ「id="send"」と指定されているのでcssファイルに「#send」と間違いないスペルで記述されているかを確認。次に「padding、color、background-color」などの指定方法が間違いないか確認。と順次されていけば良いのではないでしょうか。
*複数cssが指定されている場合は全て削除してから再度一つずつ設定するのが良いと思います。

追記:```
background-color: #FFF;

を追加すれば行けますね。

投稿2015/10/26 21:23

編集2015/10/27 12:14
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問