· Web viewWordファイルは｢.docx｣、Excelファイルは｢.xls ... 項目はそれぞれ｢PROFILE｣、｢NOW｣、｢REPORT｣、｢PROGRAMING

基礎演習　春期レポート

金曜日 4 限

旭貴朗先生

「自作ホームページ作成の紹介と解説」

2017 年 7 月 28 日(金)所属経営学部経営学科 2 年

氏名 RYU

1

目次

・はじめに

１．ホームページとは

（１）HTML について

（２）CSS について

２．自作ホームページの概要

（１）トップページについて

（２）各ページにつて

３．自作ホームページの内部構造

（１）トップページの内部構造

（２）テーブル（表）

（３）CSS ファイル

４．Excel を使った自作プログラム（１）Excel について

（２）回転する３ D オブジェクト

（３）アルバイト賃金計算シート

5. JavaScript について（１）動く時計

（２）加算器

・おわりに

・参考文献

2

・はじめに

私は旭ゼミ生として、情報技術、処理、プログラミング関係について学んでいる。この

レポートでは、春学期のゼミで学んだホームページの構造、タグなどの細かい説明も｢｣含めたホームページ作成に関する情報について、また Excel マクロ、JavaScript などに

ついてもまとめていく。ホームページのアップロードは、自分が所有する Yahoo!ID を使

用する。また、レンタルサーバーは Yahoo!ジオシティーズを使用し、メモ帳、ジオシ

ティーズ内のファイルマネージャーを用いて編集している。Word ファイルは

｢.docx 、｣ Excel ファイルは｢.xls 、画像ファイルは｣｢.jpg で管理している。｣第 1 節では、そもそもホームページとはどういったものなのか、また、HTML、CSS

とは何なのか、どのような働きをするのかを説明をする。続く第 2 節では、自作した

ホームページの概要を説明する。トップページはもちろん、各ページについても詳しく

説明する。その後の第 3 節では、自作したホームページの内部構造について詳しく説明

する。ここでは、テーブル（表）と SCC ファイルについての説明もしていく。第 4 節で

は、Excel について少し説明をしてから、自作した、回転する３ D オブジェクト、アル

バイト賃金計算シートの簡単なプログラミングについての説明をする。そして最後の第 5節で、JavaScript について解説する。ここでは、時刻表、加算器についての解説をして

いく。

１．ホームページとは

　そもそもホームページとはどういったものなのか、詳しく説明できる人は少ないと思

う。ホームページとは、インターネット上の web ページのことを指し、インターネット

を介して様々な情報を配信、提供あるいは共有することができるものである。たとえば、

自分の趣味に関しての情報を配信したり、同じ趣味を持つ人同士で共有するなど、世界中

のあらゆる人との交流ができる。企業や団体が責任をもって運営する公式ホームページ

や、個人が運営する個人ホームページ、ログインによって発生するプライベートホーム

ページなどが存在する。また、URL とは Uniform Resource Locater の略であり、イン

ターネット上のデータやサービスの所在を表記し特定するためのものである。この URLが住所となり、そこに行けばホームページへとたどり着く。いわば、インターネット｢｣という空間に存在するマイホームとも呼べるものである。情報化社会と称される現代｢｣において、もはやホームページは必要不可欠なものとなってきている。

（１）HTML について

Web ページの基本となる HTML ファイルとは、HTML（Hyper Text Markup Language）という方法によって記述されたテキスト形式のファイルのことである。

HTML ファイルは Windows のメモ帳で作成、編集することができ、保存するときの拡張

3

子は｢.html となる。｣ Web ページの内容となる文字情報を構造化するほか、Web ページ

内に表示する画像や動画などの素材ファイルの参照元を指定したり、ジャンプする先と

なるリンク先を指定することができる。

HTML ファイルは、「HTML タグ」と呼ばれる HTML ファイルにおいて文章の構造を

定義するための文字列を使用することによって、見出しや段落といった文章の構造や、

表やリストなどを作成することができる。HTML タグの書き方としては、重要なことが

１つ、それは HTML タグは必ず半角英数字で記述することである。HTML タグは

<html>のように文字の前後を「<」と「>」で囲んで記述する。また、開始タグと終了

タグは対になっており、そこで終了タグの前には、</html>のように文字の前に「/（ス

ラッシュ）」をつける。

HTML ファイルの基本構造は、１つ目にその文書が HTML 文書であることを宣言する

<html>～</html>が、HTML ファイル全体を囲むということである。２つ目にその文

書のタイトルやスタイルシートの情報、検索エンジン向けのキーワードなどの文書の基

本構造を記述する<head>～</head>部分が置かれることである。そして３つ目に文書

をブラウザで開いたときに、実際に画面に表示される内容を記述する<body>～</body>部分が置かれることであり、この３つが HTML ファイルの構成要素の大きな３つ

である。

（２）CSS について

CSS（Cascading Style Sheet）とは、HTML ファイルの装飾を行う仕様のひとつで

ある。CSS ファイルとは、スタイルシートとも呼ばれ、｢｣ Web ページ内の文字の色や大

きさ、背景、画像の位置などの見栄えを定義するためのファイルである。文書構造を定

義する HTML ファイルに関連づけて使用することで、ホームページを見やすくデザイン

している。見出しなどのスタイルをまとめて記述する場所は二通りある。ひとつは、

HTML ファイルの head タグ内に直接 CSS を記述する方法である。もうひとつは、

HTML ファイルとは別に外部スタイルシートを作成し、そこにスタイルを記述する方法

である。外部スタイルシートは、ファイル名に拡張子である｢.css をつけて保存する。｣セレクタとは、スタイルを設定する対象のことをいい、ひとつのセレクタには、文字

の色とフォントサイズ、文字の背景色などを一度に複数のスタイルを設定できる。プロ｢パティとは、設定する項目のことをいう。また値とは、具体的な設定値のことをいう｣｢｣。

ひとつのセレクタに対して複数のスタイルを設定するには、プロパティ：値のセット｢｣を；（セミコロン）で区切って記述し、判断しやすいように改行する。セレクタには｢｣、

要素、クラス、｢｣｢｣｢ID の｣ 3種類がある。

要素セレクタとは、body や h1 などの HTML 要素を対象にスタイルを設定するもので

ある。設定したスタイルは、同一の HTML 要素すべてに適用される。

4

クラスセレクタとは、特定の HTML 要素にクラス属性を設定し、それに対してスタイ

ルを設定するものである。そもそもクラス属性とはどういったものなのか。それは、あ

る属性を何らかのグループに分ける属性である。クラス属性を指定することにより、そ

のグループに所属する要素の特徴がわかりやすくなるのである。クラス属性は、ページ

内で何度も使用できる。

IDセレクタとは、特定の HTML 要素に ID 属性を設定し、それに対してスタイルを設定

するものである。IDセレクタは、重複がないようにつけられるものであり、HTML 文章

で唯一のスタイルとして設定される。ID 属性とは、｢#ID 名と表記することができ、要｣素が特定のものであることを意味づける属性である。ハイパーリンクを設定するアン

カーなど、外部プログラムと連携する要素に使われることが多い。

２．自作ホームページの概要

（１）トップページについて

ここでは、自作したホームページについての概要を説明する。図１が自分のホーム

ページのトップページである。まずトップには、自分で撮影した一番お気に入りの画像

を使用し、ホームページのタイトル｢RYU をオリジナルで作成した。普通の字体だとイ｣ンパクトがなく面白くなかったので、自分の好きな字体を選択した。ホームページを作

成するにあたって、自分のなかでクールなホームページを作成しようと考えていたので、

蛍光色のような明るい色は使用しないようにした。また、自分は黒色と白色が好きなの

で、この二色をメインにして、シンプルかつクールなホームページを作成した。背景色

は黒色にした。背景色を何色にするかによって、ホームページの印象が大きく変わるの

で背景色はホームページを作る上でとても重要だと自分は思う。タイトルの下には、訪

問者カウンターを設置した。自分のホームページを他人が何回訪れたか知りたかったの

で設置した。この訪問者カウンターは、見やすいようにアクセントとして赤色のカウン

ターを使用し、訪問者カウンターの下には動く時計を設置した。画像の左下には、各ペー

ジのリンクが貼ってある。

5

図 1　トップページ　（出典）筆者作成

項目はそれぞれ｢PROFILE 、｣｢NOW 、｣｢REPORT 、｣｢PROGRAMING 、｣｢MESSAGE 、｣｢LINK 、の｣ 6 つである。また、各ページへのリンクを貼ってある文字は強調するため、

文字を枠で囲み違う色にした。図２を見てもらえば分かるように、リンクテキストのス

タイルは特にこだわった。状態によって異なるスタイルを指定するようにした。リンク

先が未訪問の時はリンクテキストの色は変わらず普段通りのままで、カーソルを項目に

合わせるとリンクテキストの色が白色に変化するようにした。そして、項目をクリック

するとリンクテキストの色がピンク色に変化するようにした。背景色は黒色で統一した

ので、リンクテキストは目立つようにそれぞれ、白色、ピンク色にした。はじめは、各

項目それぞれ自己紹介、近況、レポート、プログラミング、伝言板、リンク｢｣｢｣｢｣｢｣｢｣｢｣というようにすべて日本語表記にしていたが、先ほども述べたように自分のなかでクー

ルなホームページを作成しようと考えていたので、すべて日本語表記から英語表記に変

更した。

6

　　　

▲リンク先が未訪問のとき　　▲ポインターを乗せたとき　　▲クリックしているとき

図 2　各ページへのリンク　（出典）筆者作成

　

（２）各ページについて

　先ほどは、トップページについての説明をしたので、次はトップページからジャンプ

できる各ページについての説明をする。まずは｢PROFILE だが、このページでは自分の｣ことについて簡潔に自己紹介をしている。ただ文字を書いて並べるだけでは見にくいと

思い、図３のようなテーブル（表）を使用した。なお、枠線は格好悪かったので削除し

た。

図 3　PROFILE ページ　（出典）筆者作成

7

　

続いて、｢NOW のページ。このページは、自作ホームページの発展や自分の近況報告｣をするページである。報告することがあまりないので、てきとうに画像を記載している。

　｢REPORT のページでは、自分の作成した論文、レポートを公開している。このレポー｣トも、ここで公開されているはずだ。また、このレポートの他にはお試しワープロをひ

とつ公開している。

　次に、｢PROGRAMING のページだが、ここは自分が作成したプログラムを公開するた｣めのページである。旭ゼミでは、プログラミングも学んでいるので、作成したものはこ

の｢PROGRAMING のページにアップしていく。今現在では、回転する３｣ D オブジェク

ト、アルバイト賃金計算シート、JavaScript 加算器の３つを記載している。

　続いて、｢MESSAGE のページ。ここは伝言板ということなのだが、やることがなかっ｣たので、訪問者へのメッセージとして自分がたまたま見つけた画像を貼っといた。

３．自作ホームページの内部構造

（１）トップページの内部構造

　第 2 節では、自作ホームページの概要について紹介した。そこで第 3 節では、紹介し

た自作ホームページの内部構造についての説明をしていく。図４が自作ホームページの

トップページの内部構造となる。ホームページは、見出しや段落といった文章の構造や、

表やリストなどを定義する HTML タグによって構成される。HTML タグは開始タグと｢｣終了タグの２つで１セットになっている。終了タグの方には、タグ名の前に｢｣｢/ を挿入｣

する必要がある。文字コードは、｢UTF-8 を選択している。ｐタグで囲まれた部分は、段｣落を表す。また、h1 タグは見出しのことで見出し用のタグには、h1～h6 まで 6段階の

レベルがある。ページごとに、h1 が最も大きな見出しとなり、h6 が最も小さな見出し

となる。

8

図 4　トップページの内部構造　（出典）筆者作成

当然のことながら、ページの先頭にいきなり h3 が登場するのは不自然である。また、

h2 の次にいきなり h5 が登場するなど、見出しのレベルがいきなり下がるのも不自然で

ある。文脈にあった見出しレベルを設定することが重要となる。

<html>～</html> 内部構造の一番上には、<html>タグが表記されている。これは、そのファイルが

HTML 文書であることを定義するための HTML タグである。<html>タグは、他のタグ

を包括するので必ずファイルの一番上と下に表記する必要がある。図４では</html>の

表記が見られないが、実際はちゃんと一番下に</html>のタグが表記してある。

<head>～</head>　<html>タグの後には、<head>タグが表記されている。<head>タグは文書に関す

る情報を指定して、ブラウザや、検索エンジンに知らせるためのタグである。ここでは

文字コードを指定するために使用している。これにより、誰がホームページを見ても指

定された文字コードが使えるようになり、文字化け回避に繋がる。<meta>タグの下に

は、文書のタイトルを設定する<title>～</title>と表記してある。これにより、ウェブ

ブラウザの上部に｢RYU のホームページと表示されるようになる。｣<body>～</body>　次に<body>と表記してある。ここには文書をブラウザで開いた時に、文章、画像、

リンクなど画面に表示される内容を表記する。ホームページの背景色もここで決められ

る。さらに、自作ホームページでは２つの画像を表示させるために、<img src="imageq.jpg" alt="RYU">と<img src="IMG_4739.PNG">を表記した。これで

9

画像が表示されることになる。

　文字を記述しているタグに h1 や h2 などと書いてあるが、これは見出しのことである。

h の後の数字は文字の大きさの違いになっている。もし、見出しではなく普通の段落にし

たいときには、<p>タグを使用する。また、文字をクリックすると他のページへジャン

プするようにするため、図 4 にもあるように<li><a href="profile.html">PROFILE</a></li>と表記した。<a href>タグは、そのページ

の HTML ファイルと外部のファイルとを関連づけるために使用されるタグで、HTMLファイルを指定してページリンクを作る他に、ダウンロードさせたいファイルを指定し

て、ダウンロードリンクを作成することもできる。

　また、箇条書きにしたい項目は、ひとつひとつ li タグで囲む。その上で、すべての項

目をまとめて ul タグで囲むと箇条書きとして認識される。自分の場合、他のページへ移

動するためのナビゲーションメニューを箇条書きとして設定した。

（２）テーブル（表）

自作ホームページの｢PROFILE のページでは、テーブル（表）を使用した。作成した｣テーブル（表）の構造は図 5 のようになっている。テーブル（表）は、<body>～</b ody>部分に<tr>～</tr>で行を定義し、

そして、その中に見出しを定義する<th>～</th>と、内容を定義する<td>～</

t d>を記述することによって作成すること

ができる。

見出しはそれぞれ、

N AME、AGE、FROM、LIKE、FAN となって

おり、内容は、

R YU、19、NAGANO、SOCCER、CLUB、TR IP、MOVIE、JIP’S、URAWA　REDS と

なっている。また、ここでは<img src="akin.jpg">、<img src="imagme.jpg">の２枚の画像を挿入

した。

はじめは、見出しと内容を区切る線、テー

ブル（表）の囲い線を作成したが、ダサかったのですべての線を削除した。なので、見

やすいように空白を入れて整えた。

図 5　　テーブル　（出典）筆者作成

（３）CSS ファイル

10

第 1章でも触れたが、CSS はスタイルシートとも呼ばれ、ページ内の文字の大きさや

色、背景、画像などを自分の好きなように変更するためのものである。自分のホーム

ページでは、この CSS を使用してホームページをレイアウトしている。CSS の記述方法

は 2種類存在している。１つは、SCC を使用したいページの HTML ファイルに直接書き

込む方法、もう 1 つは、外部に SCC ファイルを作成し、SCC を使用したいページの

HTML ファイルと関連づける方法である。直接書き込む方法では、HTML ファイルの内部

構造が複雑化してしまうため、自分は、外部に SCC ファイルを作成する方法にした。図

4 に<link rel="stylesheet" href="style.css" media="all">と表記されているのが、

CSS ファイ

図 6　CSS ファイル　（出典）筆者作成

ルを HTML ファイルに関連づけるための記述であり、ここの”style.scc”が作成した SCCファイルである。図６が自分で作成した CSS ファイルの中身である。自分は、主に文字

のレイアウト、背景色にこだわって CSS ファイルを使用した。まず、文字が小さくて見

づらかったので、font-size:30px;と記述し、文字の大きさを変更した。次に、

background-color:#000000;と記述し、背景色を黒色に設定した。このように設定する

ことによって、<body>～</body>の文字の大きさ、背景色は、自分好みのレイアウト

になった。続いて、width:960px;、height:10px;と記述し、横幅、高さを整え見栄えを

よくした。また、CSS でレイアウトをする際には、ボックスモデルを理解しておく必要

がある。CSS の定義するボックスモデルは以下のように 4 つの領域から構成されている。

11

content（コンテンツ）とは

テキストや画像など、要素そのものの内容が表示される領域のことである。この領域

のサイズは width（幅）と height（高さ）プロパティで指定することができる。

padding（パディング）とは

content と border の間にある余白の領域のことである。要素の内側の余白を取るため

に使用する。この領域のサイズは padding プロパティで指定することができる。

border（ボーダー）とは

padding の外側にある領域、いわゆる枠線のことである。この領域のサイズは

border-width プロパティで指定することができる。

margin（マージン）とは

ボックスの一番外側の余白の領域のことである。この領域のサイズは margin プロパ

ティで指定することができる。

４．Excel を使った自作プログラム　（１）Excel について

　自作ホームページの｢PROGRAMING のページには、｣ Excel で作成した簡単なプログラ

ムを公開している。ここでは、Excel についての基本情報と自作した簡単なプログラムに

ついて説明する。Excel とは本来、表を作成して合計などを計算する表計算ソフトである。

また、これを基にしたグラフの作成などである。しかし、このほかに付属のマクロ

（VBA）作成ツール｢Visual Basic Editer を利用することでプログラミングをすること｣が可能になる。

　はじめに Excel でプログラミングをやろうとしても、Excel を起動させた段階では、

マクロ（VBA）を作成するためのツールである｢Visual Basic Editer｣が表示されないの

で、マクロ（VBA）を作成するためにまず、ファイルメニューをクリックし、オプショ

ン→リボンのユーザー設定→開発タブの表示の順にクリックしていく。そうすると、開

発タブが表示されるようになる。マクロ（VBA）を作成するためのツールである｢Visual Basic Editer は開発タブに入っている。｣　マクロ（VBA）を作成するための手順としては、まず、｢Visual Basic Editer を起動｣させ、VBA スクリプトを記述する。そして、記述が終わったら最後にコンパイルを行う。

（デバックメニュー→コンパイルの順にクリック。）コンパイルは記述した VBA スクリ

プトの内容を機械に理解できる形に変換することである。コンパイルを行った際に、

VBA スクリプトに何かしらの不備が存在していた場合、その不備のある箇所を教えてく

れるので、不備を修正してまたコンパイルをすれば良い。

　

（２）回転するオブジェクト

12

　回転するオブジェクトは、自分が最初に作成したプログラムである。（図 7）このプロ

グラムは、星形と十字型の３ D オブジェクトが、ボタン｢ 1 と書かれたボタンを押すこ｣とによって回転するというものである。このプログラムの作成方法を説明する。

　

図７　回転する３ D オブジェクト　（出典）筆者作成

　まず、挿入｢｣タブから図形をクリックする。そうすると、図形の下にたくさんの｢｣｢｣種類の図形が出てくるので、その中から自分好みの図形を選択しクリックする。そうし

たらポインターが十字マークになるので、その状態のまま図形を配置したい場所をク

リックすれば図形が配置される。続いて図形を立体にする方法を説明する。まず、先ほ

どは位置した図形を右クリックし、次に図形の書式を左クリックする。すると、ウイン

ドウが出てくるので、左側から３ D書式を探して左クリックし、奥行きの項目の数字｢｣を大きくする。同じようにして、左側から３ D 回転を探して左クリックし、標準スタイ

ルを自分好みに変更する。これで図形が立体になる。

　図形が立体になったら、次はボタンを配置する。やり方は、開発タブの挿入をク｢｣｢｣リックしてその下に出てきたボタンをクリックする。次は、先ほどと同様に図形を配置

したい場所をクリックする。このとき、マクロの登録というウインドウが出てきて、｢｣新規登録をクリックする。そうすると、｢｣｢Visual Basic Editer｣が自動で立ち上がる。

｢Visual Basic Editer が立ち上がったら、以下のように記述すれば良い。｣Sub ボタン 1_Click()

13

For n = 1 To 500 Cells(1, 2) = n '図形五度回転' Sheet1.Shapes("AutoShape 1").IncrementRotation (5) Sheet1.Shapes("AutoShape 2").IncrementRotation (-5) DoEvents Next nEnd Sub

これを記述したらコンパイルしてみる。（デバックメニュー→コンパイルの順にク

リック。）もし、VBA スクリプトに何かしらの不備が存在していた場合、その不備のあ

る箇所を教えてくれるので、不備を修正してまたコンパイルをすれば良い。

　この内容の解説をしよう。まずは、2 行目の「For」。これは繰り返しを意味している。

つまり For n = 1 To 500　～　Next n で挟まれた部分を 500 回繰り返す、変数 n には 1から 500 の数字が順番に代入される。次に 3 行目の Cells(1, 2) = n という記述だが、こ

れは 1 行 2列目のセルに、変数 n の値を書き込むというものである。繰り返し回数が増

えるとこの数値も変化する。

　そして、Sheet1.Shapes("AutoShape 1").IncrementRotation (5)の部分だが、この

構文は AutoShape 1 という名前のオブジェクトを 5度回転させる。ここで出てきた

AutoShape 1 は図形のことである。最後の DoEvents というのは、ボタンの動作を止め

させるための構文で、これが無いと回転の滑らかな動きが出なくなる。

（３）アルバイト賃金計算シート

図８は、自分が２番目に作成したプログラムである。ボタンをクリックすると、自動

的に時間給、交通費単価、勤務日数、勤務時間などを計算して交通費と支給額を導き出す

ものである。もちろん数字を変更してもちゃんと機能するようになっている。

14

図 8　アルバイト賃金計算シート　（出典）筆者作成

　このプログラムの作成方法は、まず、上の図 8 のように文字を入力し、ボタンを作成

する。この際に、4 つのボタンそれぞれにマクロの登録をしておく。そして、｢Visual Basic Editer に以下のように記述する。｣Sub ボタン 1_Click()kotsuhi = Cells(4, 3) * Cells(4, 4)Cells(4, 7) = kotsuhiCells(4, 8) = Cells(4, 2) * Cells(4, 5) + kotsuhiEnd Sub

Sub ボタン 2_Click()For i = 4 To 8kotsuhi = Cells(i, 3) * Cells(i, 4)Cells(i, 7) = kotsuhiCells(i, 8) = Cells(i, 2) * Cells(i, 5) + kotsuhiNext iEnd Sub

Sub ボタン 3_Click()For i = 4 To 8

15

If Cells(i, 5) > 0 Thenkotsuhi = Cells(i, 3) * Cells(i, 4)Cells(i, 7) = kotsuhiCells(i, 8) = Cells(i, 2) * Cells(i, 5) + kotsuhiEnd IfNext iEnd Sub

Sub ボタン 4_Click()For i = 4 To 8Cells(i, 7) = ""Cells(i, 8) = ""Next iEnd Sub

この内容の解説をする。それぞれ、*が掛け算、+が足し算、/が割り算を表している。

ボタン 1 では第 4 行目だけを計算するために、セルを指定して、計算して出た値を、指

定した別のセルへ代入している。ボタン 2 では For 文で，変数 i を使った繰り返し計算を

している。変数 i に 4 から 8 までの数字が代入され、For 文で処理部を繰返して実行して

いる。ボタン 3 では、if 文を使うことで「もしも勤務時間が 0以上なら」というのを計算

するようにしている。ボタン 4 では、空白を挿入することで、交通費と支給額セルに代

入されている。数字を空白に書き換える、つまり元の状態に戻るのである。

５．JavaScript とは　JavaScript は、Web 上でインタラクティブな表現をする為に開発されたオブジェクト

指向のスクリプト言語（簡易プログラミング言語）のことである。HTML 内にプログラ

ムを埋め込むことで、Web ページに様々な機能を付加できる（Web ブラウザの動作を定

義できる）為、HTML や CSS では表現できないユーザーの動きに応じたものを作ること

ができる。（マウスの動きにあわせてデザインが変化する複雑な WEB ページを作り出す

ことが可能になる。）従来Web ページは、印刷物（紙に印刷された本）のような静的な

表現しか作れなかったが、JavaScript の登場により幅広い表現（動的表現）が可能と

なった。

（１）動く時計

自分は、JavaScript を使って、Web ページにちょっとした動きを与えた。図 9 がそ

れである。これは、現在時刻を時計のように表示させるものである。最初は、一度表

16

示したら更新するまで表示が変わらなかった。時刻を表示しただけでは物足りなかっ

たので、1秒おきに勝手に変化させるように変更した。

図９　動く時計　（出典）筆者作成

（２）加算器

　　続いて、加算器を簡単に作成した。JavaScript では、数値を計算して出力すること

ができる。その計算に用いるのが算術演算子である。算術演算子は、加算、減算、乗算、

除算などがあり、それぞれ、＋、－、*、/、％、を使用する。作成するにあたって、気を

つけなければならないことは、テキストボックスの名前だ。自分は、ここでミスしてし

まい気がつくのに時間がかかった。うまくいかなかった原因は、太文字と小文字を統一

しないで記述してしまったことだ。自分は、(form1.x.value)の｢x のところを太文字に｣していた。HTML タグの区別はしないのに、プログラムでは区別するということがよく

分かった。以下が加算器の内部構造になる。

　<html><head>　<title>　JavaScript 加算器</title>　<style>input{font-size:20pt;font-weight:bold}</style>　<script type="text/javascript">　　</script>　</head>　

　<body bgcolor="#FFFFFF">

17

　<h1 align="left">JavaScript 加算器</h1>　<form name="form1">　<input type="text" size="10" name="x">　+　<input type="text" size="10" name="y">　=　<input type="text" size="10" name="z">　<br><br>　<input type="button" value="計算する" onClick="calc()">　</form>

</body>　</html>

・おわりに

　このレポートでは、自作したホームページを紹介するために、ホームページとはどう

いったものなのか、HTML、CSS とは何なのか、そして、自作したホームページ全体の概

要、自作したホームページの内部構造、自作したプログラム、JavaScript という流れで

説明してきた。ホームページを自作するにあたり、自分のなかでクールなホームペー｢ジというテーマを持ってやってきた。まだ納得のいくホームページにはなっていないが｣、

自分らしいオリジナルのホームページを作成することができていると思う。今後も旭ゼ

ミで色々学び、もっと素晴らしいものを作成していけたらと思う。

・参考文献

千貫りこ『これからはじめる HTML＆CSS の本』技術評論社　

『情報処理概論講義案内』

とほほ『とほほの HTML入門』（2017.07.01）

18

Documents

· Web viewWordファイルは｢.docx｣、Excelファイルは｢.xls ... 項目はそれぞれ｢PROFILE｣、｢NOW｣、｢REPORT｣、｢PROGRAMING