· web...
TRANSCRIPT
基礎演習レポート
金曜日 4時限旭 貴朗 先生
２年春学期自作ホームページ
経営学部 経営学科
２年 ATELIER
目次
１ はじめに
・はじめに
・HTMLとは・Webページ作成の手順と準備
２ ホームページについて
・トップページ作成
・自己紹介ページ作成
・論文・報告書ページ作成
・プログラミング練習ページ作成
・LINKページ作成・アップロードについて
３ CSSについて・CSSとは・CSSファイル作成
４ Excelプログラミング
５ おわりに
６ 参考文献
1
１ はじめに・はじめに
このレポートは筆者であるATELIERが２年生春学期にゼミで学んだホームページの作成方法と Excelを使ったプログラミング方法について紹介するものである。１章ではホームページ作成の概要、２章では ATELIERが作成したホームページの内容、３章ではCSSについて、４章では Excelを使ったプログラミングについて解説していく。・HTMLとは HTMLとはハイパー・テキスト・マークアップ・ランゲージ(Hyper Text Markup
Language)のことで、この言語で書かれたファイルをHTMLファイルと言う。ハイパーテキストとはハイパーリンクを埋め込むことができるテキストである。ハイパー
リンクとは、ウェブページ上の、クリックすると別のページに飛ぶことができるリン
クのことである。ウェブ上で閲覧することのできるウェブページのほとんどはこの
HTML言語で書かれている。HTMLファイルはテキストエディタで作成と編集を行うことができる。ATELIERは
Windowsのパソコンを使用しているため「メモ帳」というテキストディタを使用した。メモ帳はスタート＞すべてのプログラム＞アクセサリ＞メモ帳の順に見つけることが
できる。
HTMLはHTMLタグによって書かれている。HTMLタグとは「< >」で前後を囲って記述した文章の構造を定義した文字列である。タグは開始のタグと終了のタグで対
になっていて、開始と終了を区別するために終了タグの前には「/」を入れる。HTMLの基本的な構造は図１のようになる。構成は大きく分けて<html>～</html>、<head>～</head>、<body>～</body>の３つに分けることができる。<html>～</html>でファイル全体を囲み、<head>～</head>でタイトルやスタイルなどのファイルの基本情報を記述し<body>～</body>でブラウザを使用して表示した時に表示される内容を記述する。
図１ HTMLの基本構造（筆者作成）
2
・Webページ作成の手順と準備
図２ ホームページ作成手順（筆者作成）
Webページ作成の手順の簡単な概要と作成する前に必要な準備について説明する。図２は自宅の PCでホームページを作成し、WWWサーバにアップロードして閲覧者に閲覧してもらうまでの概要である。まず、①の準備である。ホームページを開設する
ためにはWWWサーバに自分のホームページの場所を確保する必要がある。今回ATELIERは YAHOO!JAPANの無料でスペースを確保できるサービスである、YAHOO!ジオシティーズ（ http://geocities.yahoo.co.jp/ ）を利用した。このサービスを利用するには YAHOO!JAPANに会員登録をする必要がある。登録をするとジオシティーズからURLを受け取ることができる。次に②の作成・修正と③の確認である。メモ帳を使用して HTMLファイルを作成する。保存する時に「（ファイル名） .html」と拡張子を記述すると HTMLファイルになり、ブラウザで閲覧可能になる。修正する時はHTMLファイルを右クリックし、プログラムから開く＞メモ帳の順に開くとメモ帳でHTMLファイルを開くことができる。次に④のアップロードである。作成したファイルを誰でも閲覧出来るようにWWWサーバにデータを転送することが必要である。通常 FTPソフトを利用してアップロードする必要があるが、YAHOO!ジオシティーズにはアップロードをする機能（ファイルマネージャ）があるため ATELIERは FTPソフトを使用していない。最後に⑤の閲覧である。正しくアップロードされているかウェブ
ブラウザを使用して確認する。
3
２ ホームページについて・トップページ作成
図３ トップページのソースコード（筆者作成）
これがトップページのソースコードである。このソースコード内で使われているタ
グの種類は主に
<meta>、<title>、<div>、<h1>、<hr />、<a>、<img>、<span>の 6つである。
<meta http-equiv="content-type" content="text/html;"cahraset=utf-8">
これはXML 宣言である。文字コードを定義することで XML文書であることを明確に示すためのものである。このページは「utf-8」の文字コードであると宣言している。
<title>ATELIERのホームページ</title>
4
<title>～</title>で囲まれた文字はページ上部のタブに表示されることになる。<div align="center"> ～ </div>
これは<div>から</div>の間に書かれた文字を全てページで中央揃えにして表示さ
せるためのものである。
<hr color="#FF7000" />これはページ内に垂直な横線を引くためのものである。このページでは線に色をつ
けているため「color="#FF7000"」と記述してあるが、色をつけずに黒のままにする
場合は「<hr />」と記述すればよい。
<a href="profile.html">自己紹介</a><br /><a href="ronbun.html">論文・報告書</a><br /><a href="programing.html"> プ ロ グ ラ ミ ン グ 練
習</a><br /><a href="link.html">LINK</a><br />
ここでは aタグを使って別ページへのリンクを定義している。１行目は自己紹介
ページへ、２行目は論文・報告書ページへ、３行目はプログラミング練習ページへ、４
行目は LINKページへのリンクになっている。
<img src="img/IMG_index.jpg" alt="ATELIERの TOP 画像" /> これはページ中央に使用している画像を定義している。ウェブページにアップロー
ドできる画像の形式は JPEG（ジェイペグ）、GIF（ジフ）、PNG（ピング）の３種類
である。このページで使用している写真は、写真の保存に向いている JPEGを使用している。「img src=」の後に画像のファイル名を記述すると画像を配置することができ
る。「alt=」の後には画像を簡単に説明する文を記述する。これは alt 属性と呼ばれ、
ブラウザの制限によって画像がうまく表示しれない時に替りにここで記述した文が表
示される。「代替テキスト」とも呼ばれる。
<span onMouseOver="javascript:window.alert(`WELCOME!!`)">CLICK HERE</span> 最後に、これは spanタグを使用して JavaScriptを定義している。JavaScriptとは
HTMLファイル内にスクリプトを書き込むことで簡単な動きを付けることができると
いうものである。このページでは「CLICK HERE」の上にマウスのポインターを乗せ
ると別ウインドウが開き、「JavaScriptのアラート WELCOM」と表示されるようにした。
5
図４ トップページ（筆者作成）
・自己紹介ページ作成
6
図５ 自己紹介ページのソースコード（筆者作成）
これは自己紹介ページのソースコードである。このソースコード内で使用されてい
る主なタグは<table>である。<table border="2">
<tr><td colspan=2><img src="img/IMG_profile.jpg" alt="ATELIERのプロフィール画像" /></td></tr>
7
<tr><th bgcolor="#FF6000">名前</th><td align="center" bgcolor="#FFFF80">ATELIER（アトリエ）</td></tr><tr><th bgcolor="#FF6000">出身地</th><td align="center" bgcolor="#FFFF80"> 横浜</td></tr><tr><th bgcolor="#FF6000">趣味</th><td align="center" bgcolor="#FFFF80">ベース、映画・ドラマ鑑賞</td></tr>
</table>tableタグを使用することで表を作成することができる。<tr>～<tr>タグの間で１
行を定義し、<td>～<td>タグの間で１列を定義する。また表の見出しとなるセルを
作成するには<th>～<th>の間に定義すればよい。「border="2"」は表の線の種類を
定義している。
図６ 自己紹介ページ（筆者作成）
8
・論文・報告書ページ作成
図７ 論文ページのソースコード（筆者作成）
これは論文・報告書ページのソースコードである。このソースコード内で使用して
いる主なタグは<br />タグである。このタグは改行するときに使用する。aタグ内にWordで作成した文書の名前を定義することで閲覧者がダウンロードすることができる。
図８ 論文ページ（筆者作成）
9
・プログラミング練習ページ作成
図９ プログラミング練習ページのソースコード（筆者作成）
これはプログラミング練習ページのソースコードである。論文・報告書ページと同
様に、aタグ内に Excelで作成したファイルの名前を定義することで閲覧者がファイルをダウンロードすることができる。
図 10 プログラミング練習ページ（筆者作成）
10
・LINKページ作成
図 11 LINKページのソースコード（筆者作成）これは LINKページのソースコードである。このソースコード内で使用している主な
タグは自己紹介ページと同様に<table>タグである。aタグ内に外部ページのURLを書き込むことで外部のページのリンクを定義することもできる。現段階では東洋大学、
旭ゼミ、ATELIER Z Guitar Worksのリンクを載せている。ATELIER Z Guitar Worksは筆者が使用しているエレキベースのメーカーである。
図 12 LINKページ（筆者作成）・アップロードについて
通常作成したWebページを公開するには FTPソフトを使用してアップロードする必要があるが、今回使用している YAHOO!ジオシティーズにはサイト内にアップロードする機能があるため FTPソフトは使用しない。
11
３ CSSファイルについて・CSSとは
CSSとはカスケーディング・スタイル・シート(Cascading Style Sheet)のことである。この言語は HTMLと組み合わせて使うもので、HTMLでページを定義し、CSSではそのページの文字の大きさや色、レイアウトなどの装飾を定義するこができる。
文字の大きさや色は HTMLファイル内でも書き込むことができるが、作成したすべてのHTMLファイルに同じように書き込む必要がある。１つの CSSファイルを使うことによってすべての HTMLファイルを同じ文字の大きさや色に統一することが容易に行
える。HTMLファイルと同様にメモ帳を使って作成し、拡張子に「 .css 」と記述して保存することで CSS ファイルとなる。全ての HTML ファイル内に「<link rel="stylesheet" type="text/css" href="basic.css">」と記述することで CSSファイルのリンクを作り、一つの CSSファイルで全ての HTMLファイルのスタイルを定義することが可能になる。
・CSSファイル作成
12
図 13 CSSソースコード（筆者作成） これがCSSのソースコードである。「body」、「h1」、「a」はHTMLファイルで定義する時に使用したタグである。
body{background-color:#d3d3d3;}
このように記述することでページの背景の色を定義している。色は 16 進数で指定す
るか、あるいは「white」「black」などのように名前で指定することができる。
シャープ「＃」の後に２桁ずつ赤・緑・青順に並べる。なお、色の名前で記述するとき
はシャープ「＃」は必要ない。「#d3d3d3」の場合は薄い灰色になる。
図 14 色の指定（筆者作成）
h1{font-size:45;border-left:10px solid #FF7000;border-right:10px solid #FF7000;border-top:2px solid #FF7000;border-bottom:2px solid
#FF7000;padding:10px 0 8px 20px;}
このように記述することで h１タグの文字の大きさ、周りに線の色と太さ空白の大
きさを指定している。この場合#FF7000はオレンジ色になる。
a{text-decoration:none}a:hover{background-
13
color:#FF6000;}a{font-size:24px;}
このように記述することで aタグのスタイルを定義している。１行目は aタグで定義されたリンクの文字の下の線を消すためのものである。２行目はマウスオーバー時
にリンクの文字上に表示される色をオレンジ色に変更するためのものである。３行目
は aタグの文字サイズを 24 ピクセルに統一するためのものである。
４ Excelプログラミング・Excelマクロとは Excelマクロとは表計算ソフト Excelの中で単純な作業をスクリプトとして記録して
ボタンを押すことによってその作業を自動的に処理してくれる機能である。今回は２
つの３Dオブジェクトを作成し、ボタンを押すとその２つが回転するというスクリプ
トを書き込んだ。
・回転する３Dオブジェクト
図 15 Excelプログラミング まず Excelには開発タブというものが存在する。しかし、はじめからリボンには表
示されていないため、自分で表示させなくてはいけない。ファイルメニュー＞オプ
ション＞リボンのユーザー設定＞開発タブ表示の順にクリックすると表示することが
できる。次に「挿入タブ」の「図形」から矢印と十字の図形を選択する。図形を右ク
リックして図形の書式を変更する。図形が３Dになったことを確認してからボタンの
挿入をする。ボタンを挿入するには開発タブ＞挿入とクリックするとフォームコント
ロール内の右上に「ボタン」という項目があり、それを選択する。シート内にドラッ
グしながらボタンの大きさを決めて挿入して「新規作成」を選択すると自動的に VBエディターが開く。「Sub ボタン 1 Click()」と「End Sub」は既に記述されているため、
残りを図 15のように記述する。
14
For n = 1 To 500Next n
この意味は nという変数に 1～500までの数字を代入して 500回計算をするという
意味である。
Sheet1.Shapes("上矢印 1").IncrementRotation (5)Sheet1.Shapes("十字形 2").IncrementRotation (-5)
この意味は「上矢印 １」の図形を５度ずつ右方向に回転、「十字形 ２」の図形を
-５度ずつ左方向に回転させるという意味である。
記述が終了したらデバッグ＞VBAProjectのコンパイルの順にクリックしてコンパイルする。コンパイルとは PCが書き込んだスクリプトを理解できる形式に変換すること
である。コンパイルが完了したら VBエディターを閉じてボタンを押すと図形が回転す
る。
５ おわりに 自分でホームページを作るということは初めての経験であった。現段階で自作した
ホームページは初歩的な事だけを使って作成した。しかし、それでもかなりの時間を
必要とした。たった１つの文字や大文字・小文字を間違えただけでもうまくいかない
からである。これからすこしずつ時間をかけて知識を増やし、より良い高度なホーム
ページに改良していこうと考えている。また、Excelを使ったプログラミングはホームページ作成よりも難しかったと感じた。秋からはプログラミングについて学ぶ。春
に学んだことを秋に最大限に発揮できるようにしたいと考えている。
６ 参考文献・中邨登美枝（2008年）『これからはじめるHTML＆スタイルシートの本』技術評論社
・とほほのWWW入門 http://www.tohoho-web.com/www.htm
15