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

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

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

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

HTML

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

CSS

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

Q&A

1回答

476閲覧

バツマークを表示する処理の実装方法

ruuuu

総合スコア167

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/12/17 09:57

前提・実現したいこと

ボタンをクリックしたら、question_numberの数字の上にバツ画像を被せる形で表示する処理を適用させたいと考えています。
実装に関しましては、CSSとJavaScriptのどちらでも良いと考えています。
具体的にはこちらのサイトのような、問題に正解したら丸マークが徐々に小さくなるのと同様な形で、表示させたいと考えています。

該当のソースコード

html

1 <div class="main_content"> 2 <p> 3 <span class="question_number">(1)</span> 4 <span class="question_text">2 + 1 = </span> 5 <input type="text" class="answer_box"> 6 </p> 7 <p> 8 <span class="question_number">(2)</span> 9 <span class="question_text">3 + 1 = </span> 10 <input type="text" class="answer_box"> 11 </p> 12 <button id="checkButton"> 13 採点 14 </button> 15 </div> 16

css

1body{ 2 background-color: #E5E2DE; 3} 4.main_content{ 5 margin:0 auto; 6 margin-top:3%; 7} 8.question_number{ 9 color:#959492; 10 margin-right:5%; 11 margin-bottom:1%; 12} 13p:first-child .question_text{ 14 vertical-align:middle; 15} 16 17.question_text{ 18 font-size:3rem; 19}
window.addEventListener('DOMContentLoaded', () => { document.getElementById('checkButton').addEventListener('click',function(){ }); });

試したこと

CSSでのサンプルの調査を行なってみたのですが、いまいち該当するものが見当たりませんでした。
CSSサンプル1
CSSサンプル2

何か良いサンプルなどありましたら、教えて頂けましたら幸いです。

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

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

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

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

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

guest

回答1

0

SVGで画像を用意しておいて被せればよいと思います

投稿2020/12/17 10:09

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問