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

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

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

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

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

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

ポイント

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

関連記事

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

このwikiHow記事について

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

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

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

広告