前提・実現したいこと

Visual Studio Code（HTML）で動画を見ながら電卓を作っていたがどこが間違っているかわからなったので教えてほしい。
丸投げなんですが申し訳ないです。

発生している問題・エラーメッセージ

動画では数字を入力するところが大きいのに小さい
テンキーみたいになるはずがなぜか２列
クリア（C）がされない

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" type="text/css" href="sttyle.css">
6    <title>denntaku</title>
7</head>
8<body>
9    <form class="calculator" name="calc">
10        <input class="value" type="text" name="txt" readonly="">
11        <span class="num clear" onclick="document.calc.txt.valyue =''">c</span>
12        <span class="num" onclick="document.calc.txt.value +='/'">/</span>
13        <span class="num" onclick="document.calc.txt.value +='*'">*</span>
14        <span class="num" onclick="document.calc.txt.value +='7'">7</span>
15        <span class="num" onclick="document.calc.txt.value +='8'">8</span>
16        <span class="num" onclick="document.calc.txt.value +='9'">9</span>
17        <span class="num" onclick="document.calc.txt.value +='-'">-</span>
18        <span class="num" onclick="document.calc.txt.value +='4'">4</span>
19        <span class="num" onclick="document.calc.txt.value +='5'">5</span>
20        <span class="num" onclick="document.calc.txt.value +='6'">6</span>
21        <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
22        <span class="num" onclick="document.calc.txt.value +='3'">3</span>
23        <span class="num" onclick="document.calc.txt.value +='2'">2</span>
24        <span class="num" onclick="document.calc.txt.value +='1'">1</span>
25        <span class="num" onclick="document.calc.txt.value +='0'">0</span>
26        <span class="num" onclick="document.calc.txt.value +='00'">0</span>
27        <span class="num" onclick="document.calc.txt.value +='.'">.</span>
28        <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
29    </form>
30</body>
31</html>

CSS
1@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
2
3*
4{
5   margin: 0; 
6   padding: 0;
7   box-sizing: border-box;
8   font-family: 'Poppins',sans-serif;
9}
10body
11{
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    min-height: 100vh;
16    background: #091921;
17}
18.calculator
19{
20    position: relative;
21    display: grid;
22}
23.calculator.value
24{
25    grid-column:span 4;
26    height: 100px;
27    text-align: right;
28    border: none;
29    outline: none;
30    padding: 10px;
31    font-size: 18px;
32}
33.calculator span
34{
35    display: grid;
36    width: 60px;
37    height: 60px;
38    color: #fff;
39    background: #0c2835;
40    place-items: center;
41    border: 1px solid rgba(0,0,0,.1);
42}
43.calculator span:active
44{
45    background: #74FF3b;
46    color: #111;
47}
48.calculator span.clear
49{
50    grid-column:span 2;
51    width: 120px;
52    background: #ff3077;
53}
54.calculator span.plus
55{
56    grid-row:span 2;
57    height: 120px;
58}
59.calculator span.equal
60{
61    background: #03d1ff;
62}

詳細

動画のURL：https://www.youtube.com/watch?v=BuZtAqk5LIY

miyabi_pudding

2020/08/19 00:49 編集

ソースコードは、質問本文にテキストで記載しましょう。あと、VSCのファイルって何ですか？ Visual Studio Codeのことならば、 HTMLやCSSは、Visual Studio Codeの専売特許ではないので、その表現の仕方は、勘違いしか生みませんのでやめましょう。（しかも、動画の方はSublime Textですしね）また、動画を見せてやりたいことを提示するのではなく、しっかりと、質問本文に文章としてやりたいことを記載してください。（自分の言葉で表現できないと、実装できないものなので、なんにせよ記載すべき）

ARAZIN

2020/08/19 00:52

初心者なのにそんなきつい言葉で言うか？

miyabi_pudding

2020/08/19 00:56 編集

どのへんの言葉がきついのでしょうか？あと、初心者なのであれば、質問に初心者マークをつけることができるので、それで示せばいいのではないでしょうか？第三者では、質問文を見ただけでは、初心者かどうかはわからないので。

ARAZIN

2020/08/19 00:58

初心者マークってどこにあるの？

miyabi_pudding

2020/08/19 01:00

質問編集のところに、タイトルの左にグレーアウトしている初心者マークがありますので、それを押せば、色がつきます。その状態で、編集完了をすれば、初心者マークがつきます。

ARAZIN

2020/08/19 01:09

低評価つけるのやめてもらえますか？

ARAZIN

2020/08/19 01:17 編集

クリア（C）がされないみたいなのでクリアできるようお願いします

phiar_poet

2020/08/19 01:16

> クリア（C）がされないみたいなどでクリアできるようお願いしますその件については thyda.eiqau さんが既に回答してくれていますよ。

miyabi_pudding

2020/08/19 01:18

私はつけてないですが、 > 丸投げなんですが申し訳ないです。これが悪印象になっているかもしれません。編集後の質問の状態は、丸投げとは個人的には思いませんので、その文章をとっちゃってもいいのではないでしょうか？ただ、 > クリア（C）がされないみたいなどでクリアできるようお願いしますここに関しては、もう少ししっかり書くべきかと思います。「(C)をクリックしても、inputのテキストがクリアされないので、クリアされない原因がわからない」など、 > クリア（C）がされないだと、何がどうなってて、どうしたいのかが第三者に伝わらないと思いますよ。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.calculator.value
2{
3    grid-column:span 4;
4    height: 100px;
5    text-align: right;
6    border: none;
7    outline: none;
8    padding: 10px;
9    font-size: 18px;
10}

calculator と value の両方をクラスとして持つ要素、の指定になっています。
.calculator の子孫である .value の指定であれば、 .calculator .value としてください。

2020/08/19 10:07の質問本文編集をうけての追記

テンキーみたいになるはずがなぜか２列

前述のCSSのセレクタ修正にて改善されます

クリア（C）がされない

html
1<span class="num clear" onclick="document.calc.txt.valyue =''">c</span>

valyue になっています (valueのtypo) ので修正してください。

投稿2020/08/19 01:01

編集2020/08/19 01:24

thyda.eiqau

総合スコア2982

thyda.eiqau

2020/08/19 01:02

質問の本質とは関係ありませんが、 <span class="num clear" onclick="document.calc.txt.valyue =''">c</span> valyue になっています (valueのtypo) ので修正されたほうがよいでしょう。

ARAZIN

2020/08/19 01:08

了解

miyabi_pudding

2020/08/19 01:19

横槍すみません。 Cを押してもクリアされないのは、上記のタイポを修正すれば、クリアされるようになると思います。

thyda.eiqau

2020/08/19 01:22

書いた時点では質問の本質とは関係なかったのですが、その後の質問本文の編集によって本質ドンピシャになりましたので、今後見られる方のために追記しておきます。

ARAZIN

2020/08/19 01:26

わざわざありがとうございます

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

HTML（Visual Studio Code）で動画を見て作ったがわからなくたってしまった！

前提・実現したいこと

発生している問題・エラーメッセージ

詳細

2020/08/19 10:07の質問本文編集をうけての追記

関連した質問