X
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
この記事には11件の参照文献があり、文献一覧は記事の最後に表示されています。
パソコンにインストールされている電卓を使って計算をする方法はいくつもありますが、簡単なHTMLコードを使って電卓を自作するという別の方法もあります。HTMLで電卓を作成するときは、まずHTMLの基礎を押さえ、必要なコードをテキストエディタにコピーし、拡張子を「.html」にして保存しましょう。これでお気に入りのブラウザでHTML文書を開いて、電卓を使うことができます。このようにして、ブラウザで計算ができるだけでなく、プログラミングの基礎を学ぶこともできるのです。
ステップ
パート 1 の 4:
コードを理解する
パート 1 の 4:
-
1HTML関数がそれぞれ何をしているのか理解する 電卓の作成に使用するコードは、組み合わせにより文書の各要素を定義するいくつもの構文から成り立っています。下記にて電卓の作成に使用するコードのテキストがそれぞれ何をしているのか確認しましょう。
- html：プログラムの使用言語を以降の文書に指定します。プログラミングでは、いくつもの言語がプログラムに用いられており、<html>は以降の文書がHTML文書であることを示しています。[1]
- head：文書に属するものはすべて「メタデータ」とも呼ばれるデータに関するデータであることを以降の文書に示しています。通常、この<head>というコマンドは、タイトルや見出しなど、文書のスタイル要素を定義する際に使用します。傘の下に残りのコードが定義されていると考えましょう。[2]
- title：文書にタイトルをつけます。この属性は、HTMLブラウザで開いた文書のタイトルを定義する際に使用します。
- body bgcolor="#"：コードの文字色や背景色を指定します。この引用符で囲まれた「#」の後の数字は、所定の色に対応しています。
- text=""：この引用符で囲まれた語により、文書内のテキストの色を指定します。
- form name=""：フォーム名を指定します。この属性は、そのフォーム名がJavaScriptでどのように定義されるかに基づいて、その後に続く構造体を作成する際に使用します。例えば、使用するフォーム名が「calculator（電卓）」だとすると、それで特定の構造体が文書に作成されます。[3]
- input type=""：ここでアクションが発生します。この属性は、以降の括弧内の値がどのようなテキストであるかを文書に示しています。例えば、テキストやパスワード、ボタン（電卓の場合と同様）などが考えられます。[4]
- value=""：上で指定した入力欄に表示する値を文書に指定します。なお、電卓の場合、この値は数値（1〜9）および演算子（+、-、*、/、=）になります。[5]
- onClick=""：ボタンをクリックした際に発生するイベントを文書に指定します。なお、電卓の場合は、各ボタンに表示するテキストをそのように理解しなければなりません。したがって、「6」というボタンの場合は、引用符の間にdocument.calculator.ans.value+='6'と入力することになります。[6]
- br：文書に改行を入れる開始タグです。このタグ以降のテキストは、このタグ以前のテキストの下の行に表示されます。[7]
- /form、/body、および/html：文書内で前に開始したそのコマンドがここで終了することを文書に示しています。[8]
広告
パート 2 の 4:
電卓の基本HTMLコード
パート 2 の 4:
-
1以下のコードをコピーする 下のボックス内のテキストを選択するには、ボックスの左上にカーソルを合わせ、それをボックスの右下にドラッグして、すべてのテキストが青色になるようにします。テキストを選択したら、「Command + C」（Mac）または「Ctrl + C」（Windows）を押して、コードをクリップボードにコピーしましょう。広告
<html>
<head>
<title>HTML Calculator</title>
</head>
<body bgcolor= "#000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'"><br>
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'"><br>
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="－" onClick="document.calculator.ans.value+='-'">
<input type="button" value="＋" onClick="document.calculator.ans.value+='+'"><br>
<input type="button" value="×" onClick="document.calculator.ans.value+='*'">
<input type="button" value="÷" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="リセット">
<input type="button" value="＝" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>解答は<input type="textfield" name="ans" value="">
</form>
</body>
</html>
パート 3 の 4:
電卓を作成する
パート 3 の 4:
-
1パソコンでテキスト編集プログラムを起動する 使えるプログラムはいくつもありますが、利便性や品質を考えると、「テキストエディット」または「メモ帳」を使ったほうがよいでしょう。[9] [10]
- Macの場合は、画面右上の虫眼鏡をクリックして、「Spotlight」を起動しましょう。「Spotlight」が起動したら、「テキストエディット」と入力して、「テキストエディット」というプログラムをクリックします。これで、青色にハイライト表示されるはずです。
- Windowsの場合は、画面左下の「スタート」メニューを開きましょう。「スタート」メニューを開いたら、検索ボックスに「メモ帳」と入力すると、右側の検索結果に「メモ帳」というアプリケーションが表示されるので、そのアプリケーションをクリックします。
-
![Create a Calculator Using HTML Step 4というタイトルの画像]()
2電卓のHTMLコードを文書に貼り付ける- Macの場合は、文書の本文をクリックして、Command+Vを押しましょう。コードを貼り付けたら、画面上部のフォーマットをクリックして、標準テキストにするをクリックする必要があります。[11]
- Windowsの場合は、文書の本文をクリックして、「Ctrl + V」を押しましょう。
-
3ファイルを保存する ウィンドウ左上の「ファイル」ボタンをクリックして、ドロップダウンメニューから名前を付けて保存...（Windows）または保存...（Mac）を選択します。
-
4ファイル名に「.html」という拡張子をつける 「名前を付けて保存」メニューが表示されたら、ファイル名の後に「.html」という拡張子を入力して、「保存」をクリックしましょう。例えば、このファイルを「電卓1」にしたい場合は、「電卓1.html」というファイル名で保存します。広告
ポイント
- この電卓は、必要に応じてWebページに埋め込むことができます。
- また、HTMLのスタイルを指定すれば、電卓のデザインを変更することも可能です。
広告
出典
- ↑ http://www.w3schools.com/html/html_basic.asp
- ↑ http://www.w3schools.com/html/html_head.asp
- ↑ http://www.w3schools.com/html/html_formatting.asp
- ↑ http://www.w3schools.com/tags/att_input_type.asp
- ↑ http://www.w3schools.com/tags/att_input_value.asp
- ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
- ↑ http://www.w3schools.com/tags/tag_br.asp
- ↑ http://www.w3schools.com/html/html_forms.asp
- ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
このwikiHow記事について
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
カテゴリ: パソコン・電子機器
他言語版
English:Create a Calculator Using HTML
Português:Criar uma Calculadora Usando HTML
Français:créer une calculette avec du HTML
Bahasa Indonesia:Membuat Kalkulator dengan HTML
Nederlands:Een calculator programmeren in HTML
中文:用HTML编写计算器
Tiếng Việt:Dựng máy tính bằng HTML
한국어:HTML로 계산기 만드는 방법
このページは 525 回アクセスされました。
この記事は役に立ちましたか？
広告
