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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1431閲覧

CSSで色変化

Alpha

総合スコア41

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2016/06/13 11:45

以下のプログラムの時、CSSで
・○の時は○の色は白、背景色は黄色
・×の時は×の色は黄色、背景色は青
としたいです。
どのようにおいたらいいのでしょうか?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>○×ゲーム</title> </head> <script> try{ document.addEventListener ('click',function(e){myfunc(e)},true); }catch(e){ document.attachEvent('onclick',function(e){myfunc(e)}); } var cnt=0; function myfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="INPUT" && t.type=="button"){ if(t.value==""){ cnt++; t.value=cnt%2==1?"○":"×"; if(cnt>=9){ alert("GAMEOVER!(OKでリセットします)"); resetFunc(t); cnt=0; } }else if( cnt > 2 ){ alert("そのマスはすでに選ばれています。"); } } if(t.nodeName=="INPUT" && t.type=="reset"){ cnt=0; resetFunc(t); } } function resetFunc(t){ var f=t.form; for(var i=0;i<f.length;i++){ if(f[i].type=="button") f[i].value=""; } } </script> <body> <form name="tick"> <table> <tr> <td><input type="button" id="botan"></td> <td><input type="button" id="botan"></td> <td><input type="button" id="botan"></td> </tr> <tr> <td><input type="button" id="botan"></td> <td><input type="button" id="botan"></td> <td><input type="button" id="botan"></td> </tr> <tr> <td><input type="button" id="botan"></td> <td><input type="button" id="botan"></td> <td><input type="button" id="botan"></td> </tr> </p> </table> <input type="reset" id="riset" value="リセット"> </p> </form> </body>
@charset "utf-8"; #botan{ width: 50px; height: 50px; margin: 3px; font-size: 30pt; background-color: black; } #riset{ font-size: 20x;

よろしくお願いします。

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

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

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

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

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

Zuishin

2016/06/13 11:51

これは、ここの回答のみでプログラムが一つ組めるかどうかという実験ですか?
Alpha

2016/06/13 11:53

ではありません。
Zuishin

2016/06/13 11:55

では、あなたは人工知能ですか?
Alpha

2016/06/13 11:55

違いますが。
Zuishin

2016/06/13 11:57

何を目的として○×ゲームを作っていますか?
Alpha

2016/06/13 11:58

プログラミング技術の向上です。
Zuishin

2016/06/13 11:59

技術は向上しましたか?
Alpha

2016/06/13 12:01

向上しつつありますが、先ほどからプログラムとは関係ない質問をされていますがどういうことでしょうか。
Zuishin

2016/06/13 12:02

あなたは大量の質問をされましたが、一行でもプログラムをしましたか?
Alpha

2016/06/13 12:03

自分でプログラムをできるだけ組んで質問しています。
Zuishin

2016/06/13 12:04

具体的にどの部分をあなたが組んだのですか?
Zuishin

2016/06/13 12:07

質問は以上です。
Alpha

2016/06/13 12:10

主にCSSの部分です。 元から置いてあったbuttonに変化を加えることはできました。
kei344

2016/06/13 12:15

スタイルシート部分のバッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。また、やりたい事を書いてあるだけで試した内容などがありませんが、追記できますか?
guest

回答1

0

ベストアンサー

t.valueで○ or ×をいれてらっしゃいますが、
tにはstyleというものも入っていてそこにcssの値が格納されています。
なのでそこを変更すればスタイルを変更できます!

javascript

1t.value=cnt%2==1?"○":"×"; 2 if (t.value == '○') { 3 t.style.color = 'white'; 4 t.style.backgroundColor = 'yellow'; 5 }else{ 6 t.style.color = 'yellow'; 7 t.style.backgroundColor = 'blue'; 8 }

こんなかんじでいかがでしょうか?
ちょっと汚いですが!(笑)

投稿2016/06/13 12:14

MasakazuFukami

総合スコア1869

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

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

yambejp

2016/06/13 14:16

classでやったほうが楽できれいかもしれませんね
Alpha

2016/06/13 14:57

<MasakazuFukamiさん>なるほど!CSSも格納されていたんですね。修正したらできました。ありがとうございます。
Alpha

2016/06/13 14:58

ちなみになんですが、この完成したプログラム実行すると文字化けしてしまうのですがどこか間違っているのでしょうか?
MasakazuFukami

2016/06/14 01:10

@yambejp さん たしかにそのとおりです! jsでスタイルを指定する方法だと管理、実行速度的に遅くなってしまうので普段はclass付け替えにしてます!
MasakazuFukami

2016/06/14 01:11

@Alphaさん 文字化けですか。。。 htmlの設定、ブラウザの設定の方を見直されるといいかもしれないです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問