HTMLで電卓を作成する方法

PDF形式でダウンロード
PDF形式でダウンロード

パソコンにインストールされている電卓を使って計算をする方法はいくつもありますが、簡単なHTMLコードを使って電卓を自作するという別の方法もあります。HTMLで電卓を作成するときは、まずHTMLの基礎を押さえ、必要なコードをテキストエディタにコピーし、拡張子を「.html」にして保存しましょう。これでお気に入りのブラウザでHTML文書を開いて、電卓を使うことができます。このようにして、ブラウザで計算ができるだけでなく、プログラミングの基礎を学ぶこともできるのです。

パート 1
パート 1 の 4:
コードを理解する

  1. Create a Calculator Using HTML Step 1というタイトルの画像
    1
    HTML関数がそれぞれ何をしているのか理解する　電卓の作成に使用するコードは、組み合わせにより文書の各要素を定義するいくつもの構文から成り立っています。下記にて電卓の作成に使用するコードのテキストがそれぞれ何をしているのか確認しましょう。
    • 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
パート 2 の 4:
電卓の基本HTMLコード

  1. Create a Calculator Using HTML Step 2というタイトルの画像
    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
パート 3 の 4:
電卓を作成する

  1. Create a Calculator Using HTML Step 3というタイトルの画像
    1
    パソコンでテキスト編集プログラムを起動する　使えるプログラムはいくつもありますが、利便性や品質を考えると、「テキストエディット」または「メモ帳」を使ったほうがよいでしょう。[9] [10]
    • Macの場合は、画面右上の虫眼鏡をクリックして、「Spotlight」を起動しましょう。「Spotlight」が起動したら、「テキストエディット」と入力して、「テキストエディット」というプログラムをクリックします。これで、青色にハイライト表示されるはずです。
    • Windowsの場合は、画面左下の「スタート」メニューを開きましょう。「スタート」メニューを開いたら、検索ボックスに「メモ帳」と入力すると、右側の検索結果に「メモ帳」というアプリケーションが表示されるので、そのアプリケーションをクリックします。
  2. Create a Calculator Using HTML Step 4というタイトルの画像
    2
    電卓のHTMLコードを文書に貼り付ける
    • Macの場合は、文書の本文をクリックして、Command+Vを押しましょう。コードを貼り付けたら、画面上部のフォーマットをクリックして、標準テキストにするをクリックする必要があります。[11]
    • Windowsの場合は、文書の本文をクリックして、「Ctrl + V」を押しましょう。
  3. Create a Calculator Using HTML Step 5というタイトルの画像
    3
    ファイルを保存する　ウィンドウ左上の「ファイル」ボタンをクリックして、ドロップダウンメニューから名前を付けて保存...（Windows）または保存...（Mac）を選択します。
  4. Create a Calculator Using HTML Step 6というタイトルの画像
    4
    ファイル名に「.html」という拡張子をつける　「名前を付けて保存」メニューが表示されたら、ファイル名の後に「.html」という拡張子を入力して、「保存」をクリックしましょう。例えば、このファイルを「電卓1」にしたい場合は、「電卓1.html」というファイル名で保存します。
    広告

パート 4
パート 4 の 4:
電卓を使う

  1. Create a Calculator Using HTML Step 7というタイトルの画像
    1
    上記で作成したファイルを探す　上記の手順と同じように「Spotlight」または「スタート」メニューの検索ボックスにファイル名を入力します。ただし、「.html」という拡張子を入力する必要はありません。
  2. Create a Calculator Using HTML Step 8というタイトルの画像
    2
    ファイルをクリックして開く　デフォルトブラウザの新しいページで電卓が開きます。
  3. Create a Calculator Using HTML Step 9というタイトルの画像
    3
    電卓のボタンをクリックして使う　数式の解答は解答バーに表示されます。
    広告

ポイント

  • この電卓は、必要に応じてWebページに埋め込むことができます。
  • また、HTMLのスタイルを指定すれば、電卓のデザインを変更することも可能です。
広告

関連記事

画像検索で簡単に人物を特定する
 
画像検索で簡単に人物を特定する
ウェブサイトの公開日を調べる
 
ウェブサイトの公開日を調べる
XMLファイルを開く
 
XMLファイルを開く
ワイヤレスマウスを接続する
 
ワイヤレスマウスを接続する
 
キズの付いたCDを修復する
DVDプレーヤーを接続する
 
DVDプレーヤーを接続する
EMLファイルを開く
 
EMLファイルを開く
DLLファイルを開く
 
DLLファイルを開く
デスクトップパソコンをノートパソコンに接続する
 
デスクトップパソコンをノートパソコンに接続する
電気の配線のプラスとマイナスを見分ける
 
電気の配線のプラスとマイナスを見分ける
winmail.datを開く
 
winmail.datを開く
電話が盗聴されているか調べる
 
電話が盗聴されているか調べる
 
LinuxのターミナルからGoogle Chromeをインストールする
JavaのJARファイルを実行する
 
JavaのJARファイルを実行する
広告

出典

  1. ↑ http://www.w3schools.com/html/html_basic.asp
  2. ↑ http://www.w3schools.com/html/html_head.asp
  3. ↑ http://www.w3schools.com/html/html_formatting.asp
  4. ↑ http://www.w3schools.com/tags/att_input_type.asp
  5. ↑ http://www.w3schools.com/tags/att_input_value.asp
  6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
  7. ↑ http://www.w3schools.com/tags/tag_br.asp
  8. ↑ http://www.w3schools.com/html/html_forms.asp
  9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
  1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
  2. ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

このwikiHow記事について

wikiHow編集チーム
共著者 ::
wikiHow編集チーム
wikiHowスタッフライター
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。 この記事は6,145回アクセスされました。
カテゴリ: パソコン・電子機器
他言語版
このページは 6,145 回アクセスされました。

この記事は役に立ちましたか？

広告