メモ帳で作る簡単「Webサイト」
はじめに
Webサイトを作るって、なんだか難しそうだし、お金がかかりそうだし・・・と考えられる方が多いのではないでしょうか。
そんなことは決してありません。実は、すごく簡単にしかも無料で作ることができます。
本Webサイトでは、初めての方向けにできるだけ簡単に、Webサイトの作り方を説明して行きたいと思います。
興味のある方はご覧ください。
１ 準備
１−１ Webサイトの簡単製作に必要なもの
パソコン
パーソナルコンピュータ。
ブラウザ
Webサイトを閲覧するソフト。（Internet Explorer,Firefox,Safari等）
テキストエディタ
テキスト文章を編集するソフト。（メモ帳、ワードパッド）
画像編集ソフト
写真などの画像を編集するために必要。（ペイント）
１−２ 製作したWebサイトをインターネット上に公開するために必要なもの
サーバ
製作したWebサイトのデータを保存しておく場所。
インターネットの接続契約しているプロバイダのサービスを利用できる。
（様々な方法がある）
コンテンツ
直訳すると”中身”。
Webサイトで考えると公開する情報の内容。
２ 製作
２−１ Webサイトを作る
いきなりではありますが、早速Webサイトを作ってみましょう。
行うことは簡単、まずはメモ帳を開きます。
次に、囲み内「プログラム例1」のオレンジ色の文字を打ち込んでください。
はじめての方にとってはよくわからないと思いますが、これがWebサイトを表示させるためのプログラムとなります。
内容はひとまず置いといて、とりあえず打ち込んでみてください。
プログラム例１
<html>
<head>
</head>
<body>
メモ帳で作る簡単Webサイト
</body>
</html>
最後に保存します。
この保存のときに大事なポイントがあります。それは、ファイル名を”○○○.html”とすることです。
普通メモ帳で作った文章を保存するときは、拡張子が”.txt”となりますが、そのままだとコンピューター上でWebサイトのファイルだと認識されません。
”.html”とすることで、Webサイトとして認識されブラウザで表示されます。
では今回は”test.html”という名前で保存先をデスクトップにして保存してください。
保存後デスクトップを見ると、保存されたファイルがブラウザのアイコンになっているのがわかります。
それでは、そのアイコンをダブルクリックで開いてみましょう。
ブラウザが立ち上がり、そこには「メモ帳で作る簡単Webサイト」と書かれてます。
これが先ほど作ったWebサイトです。
どうでしょうか。簡単ですが、とりあえずサイトが完成しました。
拡張子についての詳細
拡張子は、そのファイルの種類を示す3〜4文字の文字列で、WindowsなどのOSで利用されています。
Windowsなど主要なOSでは、拡張子とアプリケーションソフトを対応づけることができ、ファイルのアイコンをダブルクリックするだけで対応づけられたアプリケーションソフトを起動することができます。
２−２ 作成したプログラムの解説
それでは、作成したプログラムを解説していきます。
今回作成したプログラムは”ＨＴＭＬ”という言語で作成されています。
このＨＴＭＬとはWebサイトを表示するために必要な言語で、Webサイトを作るにはこのＨＴＭＬ言語を理解することが必要になります。
では、今回作ったプログラムの中身を見てＨＴＭＬ言語の基礎を理解していきましょう。
プログラムの中のいたるところに、＜＞でくくられた文字がたくさん出てきます。
<html>や<body>がそれですが、これらは”ＴＡＧ”と呼ばれるもので、ＨＴＭＬ言語で重要な役割を持っています。
ＴＡＧは文字や画像の情報などに構造上の意味を持たせ、ブラウザ上でどう表示させるかを決めるもので、様々な種類があります。
最初に出てくる<html>ＴＡＧは、以下のプログラムがWebサイトを表示させる言語のＨＴＭＬであることを表しています。
次に出てくる<head>ＴＡＧは、そのサイトのタイトルやサイトの特徴などの情報であることを表しています。
今回はここには何も書きませんでした。（詳細は後ほど）
次に<body>ＴＡＧですが、ここが一番重要な部分で実際にWebサイトとして、ブラウザに表示される部分となります。
よって今回は<body>と</body>の間に書かれた「メモ帳で作る簡単Webサイト」という文字がブラウザに表示されました。
このようにＨＴＭＬ言語はＴＡＧを利用してＷｅｂサイトにコンテンツを表示させるプログラムなのです。
ＴＡＧについて
ＴＡＧは＜＞で命令を区切ります。
ＴＡＧには開始TAGと終了TAGがついで存在します。
ＴＡＧに属性を付けることによって、様々な付加価値をつけることができます。
２−３ 正しい文章構造でサイトを製作
この章ではＨＴＭＬ言語を利用して、より具体的にＷｅｂサイトを作りこんで行きます。
なんらかの文章というのは、人に読んでもらうために見やすさの工夫をします。
以下の簡単な文章を見てください。
岐阜工業高等専門学校の教育の目的・目標について
教育の目的
準学士課程
教育の目的
準学士課程
岐阜工業高等専門学校（以下「本校」という。）は，教育基本法の精神にのっとり，及び学校教育法に基づき，深く専門の学芸を教授し，職業に必要な能力を養い，有為の人材を育成することを目的とする。
専攻科課程
高等専門学校の基礎の上に，精深な程度において工業に関する高度な専門的知識及び技術を教授し，その研究を指導することを目的とする。
教育の基本方針
本校への多様な役割が期待される中にあって，高等学校や大学とは異なる高等専門学校本来の魅力を一層高めるという使命に燃え，日本の産業構造の国際化ならびに高度化に伴う急速な変化に柔軟に対応できる学力や創造力に加えて，環境に配慮した人間性豊かで倫理観を備えた技術者を育成するということが本校の教育方針である。
教育理念，教育目標及びその具体的な内容は不断に改善し，計画的に教育・研究活動を実行する。より具体的には，以下に示すような「教育理念」，「養成すべき人材像」及び「教育目標」を高く掲げ，教職員はその目標に向かって努力する。
教育理念
- 科学技術に夢を託し，人類愛と郷土愛に目覚めること。
- 国際性豊かで世界に羽ばたく気概を持つこと。
- 情報化社会の最前線で活動すること。
この例文は、大見出しの文字を緑色で大きく、次に続く中見出しや小見出し、そして本文と徐々に文字が小さくなるように表示されています。
このように文章は、見出しや本文などそれぞれ役割ごとに文字の大きさや色を変えてやると、見やすい文章になります。
Webサイトの製作も、何かしらの文章を書いて表現をするわけですから見やすさを考慮して作っていく必要があります。
そこでまず行うのが、製作する文章に対して正しい「文章構造」を設定してやることです。
それを行うとブラウザ上で見やすい文章の表示を行うことができるのです。
実はブラウザというものは、文章構造を理解しその構造に合った表現をする機能を持っているのです。
では、ブラウザに上記の文章を正しい文章構造で表示させる場合、ＨＴＭＬ言語で記述するとどうなるかを見てみましょう。
以下のプログラムをメモ帳で打ち込み、ブラウザで表示してみましょう。
プログラム例２
<html>
<head>
</head>
<body>
<h1>岐阜工業高等専門学校の教育の目的・目標について</h1>
<h2>教育の目的</h2>
<h3>準学士課程</h3>
<p>岐阜工業高等専門学校（以下「本校」という。）は，教育基本法の精神にのっとり，及び学校教育法に基づき，深く専門の学芸を教授し，職業に必要な能力を養い，有為の人材を育成することを目的とする。</p>
<h3>専攻科課程</h3>
<p>高等専門学校の基礎の上に，精深な程度において工業に関する高度な専門的知識及び技術を教授し，その研究を指導することを目的とする。</p>
<h2>教育の基本方針</h2>
<p>本校への多様な役割が期待される中にあって，高等学校や大学とは異なる高等専門学校本来の魅力を一層高めるという使命に燃え，日本の産業構造の国際化ならびに高度化に伴う急速な変化に柔軟に対応できる学力や創造力に加えて，環境に配慮した人間性豊かで倫理観を備えた技術者を育成するということが本校の教育方針である。教育理念，教育目標及びその具体的な内容は不断に改善し，計画的に教育・研究活動を実行する。より具体的には，以下に示すような「教育理念」，「養成すべき人材像」及び「教育目標」を高く掲げ，教職員はその目標に向かって努力する。</p>
</body>
</html>
ブラウザで確認すると、大見出しは文字が大きく表示され、中見出し、小見出し、本文と文字が小さくなっています。
これは、ブラウザ自身が文章構造である大見出しや中見出しを理解し、それようの表示を行ったということです。
これが文章構造を正しくして作られたサイトです。
ではプログラムの中で文章構造をどのように設定したのかを解説して行きます。
前章にもあったように、ブラウザで表示される部分は<body>と</body>の間に書かれた内容です。
その中身を見ていくと、<h1>や<h2>など文章に関係ない記述がところどころにあります。これも前章にも出てきたTAGと呼ばれるものです。
TAGは文字や画像の情報などに構造上の意味を持たせ、ブラウザ上でどう表示させるかを決めるものでした。
例プログラムでは、<h1>〜</h1>、<h2>〜</h2>、<h3>〜</h3>、<p>〜</p>の４種類が使われていて、意味は以下のようになります。
<h1>〜</h1> ： 見出し１（大見出し）を設定するタグ
<h2>〜</h2> ： 見出し２（中見出し）を設定するタグ
<h3>〜</h3> ： 見出し３（小見出し）を設定するタグ
<p>〜</p> ： ひとつの段落を意味するタグ
(＊)見出しは１から６まで設定することができます。
例プログラムのＴＡＧの流れを見ていくと、
見出し１ → 見出し２ → 見出し３ → 段落（段落の中に改行のタグあり）
見出し３ → 段落（段落の中に改行のタグあり）
と並んでいるのがわかります。
例プログラムはひとつひとつの見出しや文に、文章構造上意味を持つＴＡＧを適切に設定しました。
それによりブラウザは見出しの種類や段落をＴＡＧにより判断し、文字の大きさを様々に変え表示することができたのです。
２−４ ブラウザの振る舞い
前章のようにＴＡＧは、文字や画像の情報などに構造上の意味を持たせ、ブラウザ上でどう表示させるかを決めるものでした。
たとえば<h1>〜</h1>というＴＡＧは、構造上「見出し１」という意味になり、ブラウザの表示は「一番大きな文字サイズで太字」となります。
この表示の仕方はブラウザがTAGを判断し、ブラウザ自身が持っているデフォルトの設定によって決められています。
しかし、このデフォルトの設定というのは非常にシンプルでそれをそのまま利用すると味気ないWebサイトにしかなりません。
そこでＨＴＭＬでは、ここに「見栄え」という表現を付加することができるようになっています。
先ほど作成したサイトの「見出し１」に見栄えを加えてみましょう。
<h1> を <h1 style=" color : red ; font-size:60px ; "> に変更します
変更後ブラウザで確認してみると、<h1>ＴＡＧで設定された文字が赤くなりサイズが大きくなりました。
これは<h1>というＴＡＧにその表示の見栄えを決めるスタイルというものを埋め込んで達成させています。
この場合 style=" color : red ; font-size:60px ; " がそれです。
color:red が文字の色を赤くし、 font-size : 60px が文字の大きさを60ピクセルに設定しています。
このようにＨＴＭＬでは、ＴＡＧを利用して文字や画像の情報に様々な「見栄え」を施すことができるようになっているのです。
２−５ スタイルシートの設定方法
この章では見栄えをよくしていく方法を解説して行きます。
WEBページ上の「見栄え」を定義するための技術のことをスタイルシートといいます。
このスタイルシートの設定方法は3種類あります。
- ＨＴＭＬ内のＴＡＧに直接スタイルを埋め込む。
- <head>〜</head>内にスタイルを埋め込む。
- 別ファイルを用意しそこにスタイルを作る。
先ほど行ったのは１の方法でした。
では３の方法でスタイルシートを作ってみましょう。
新規でメモ帳を開き、以下のように打ち込んでください。
h2{
color : green;
font-size: 15px;
}
h3{
color : ＃555555;
font-size: 12px;
}
打ち終わったらファイル名を“test.css”で保存してください。
次に、“test.html”を開き<head>〜</head>の部分を以下のように変えてください。
<head>
<LINK rel="stylesheet" href="test.css" type="text/css">
</head>
打ち込みが終わったら上書き保存しブラウザで確認です。
<h2>と<h3>で書かれた文字情報の見栄えが変更されているのがわかります。
では詳細を説明します。
新規メモ帳で作ったプログラムは、単独でスタイルシートを設定するためのプログラムです。
このプログラムでは、各ＴＡＧの見栄えを様々に設定することができます。
たとえば<h2>というＴＡＧには、文字の色を緑、文字サイズを15ピクセルでという設定をしました。
これは前章で<h1>のＴＡＧに埋め込んだスタイルと同じようなことをしています。
結局、ＨＴＭＬ内のＴＡＧに直接スタイルを埋め込もうが、外部ファイルでスタイルを設定しようが結果は同じになります。
ただし外部ファイルにスタイルを設定したほうが何かと都合がいいことが多いです。
スタイルシートを外部ファイルにする利点
サイト全体のファイルサイズの縮小化
サイト全体のスタイルを統一させる
メンテナンスをしやすくする
次に<head>のＴＡＧ内に書いた
<LINK rel="stylesheet" href="test.css" type="text/css">
ですが、これはスタイルシートのリンク先をブラウザに教えています。
これにより<body>内の各TAGはそのリンク先のスタイルにしたがって表示されることになります。
ちなみにこのWebサイトも外部スタイルシートを利用しています。
ではそのスタイルシートを解除して表示してみましょう。
インターネットエクスプローラーの場合はアドレスに
javascript:for(var%20i=0;i を記入しエンターキーを押すと解除できます。 ファイヤーフォックスの場合はブラウザ上部メニューの「表示」→「スタイルシート」→「スタイルシートを使用しない」と進んでください。 どうでしょうか、とてもシンプルなWebサイトが表示されました。 スタイルシートを使った見栄えの設定方法は多種多様です。 この章では、シンプルなWebサイトの例を使い見栄えに関する基本テクニックを解説して行きます。 まずは下のリンクをクリックしてください。別ウインドで解説に使用するWebサイトが開きます。 岐阜高専の教育目的・目標と銘打たれたWebサイトですが、主な特徴として、
といったところでしょうか。 では、このWebサイトのＨＴＭＬプログラム「プログラム例３」を見てみましょう。 このＨＴＭＬプログラムを見てみると、前章例２のプログラムと大差はないですが、いくつか新しいＴＡＧが登場してるのがわかります。 新たに登場したＴＡＧは、 <div id="sotowaku">，<ol>，<li>，<div id="footer">，<a href="http://www.gifu-nct.ac.jp/"> の5種類になります。 <html> <head> <LINK rel="stylesheet" href="kadai.css" type="text/css"> </head> <body> <div id="sotowaku"> <h1>岐阜工業高等専門学校の教育の目的・目標について</h1> <h2>教育の目的</h2> <h3>準学士課程</h3> <p>岐阜工業高等専門学校（以下「本校」という。）は，教育基本法の精神にのっとり，及び学校教育法に基づき，深く専門の学芸を教授し，職業に必要な能力を養い，有為の人材を育成することを目的とする。</p> <h3>専攻科課程</h3> <p>高等専門学校の基礎の上に，精深な程度において工業に関する高度な専門的知識及び技術を教授し，その研究を指導することを目的とする。</p> <h2>教育の基本方針</h2> <p>本校への多様な役割が期待される中にあって，高等学校や大学とは異なる高等専門学校本来の魅力を一層高めるという使命に燃え，日本の産業構造の国際化ならびに高度化に伴う急速な変化に柔軟に対応できる学力や創造力に加えて，環境に配慮した人間性豊かで倫理観を備えた技術者を育成するということが本校の教育方針である。教育理念，教育目標及びその具体的な内容は不断に改善し，計画的に教育・研究活動を実行する。より具体的には，以下に示すような「教育理念」，「養成すべき人材像」及び「教育目標」を高く掲げ，教職員はその目標に向かって努力する。</p> <h2>教育理念</h2> <ol> <li>科学技術に夢を託し，人類愛と郷土愛に目覚めること。</li> <li> 国際性豊かで世界に羽ばたく気概を持つこと。</li> <li>情報化社会の最前線で活動すること。 </li> </ol> <div id="footer"> <p> <a href="http://www.gifu-nct.ac.jp/">岐阜高専トップページへ</a></p> </div> </div> </body> </html> では、見栄え（スタイル）の設定です。 さきほどから何度か出てきているようにスタイルはＴＡＧに対して設定して行くものです。 今回のプログラムで全体的な見栄えを決定しているＴＡＧがあります。 それが<div id="sotowaku">です。 <div id="sotowaku">は詳しく言うと、divという「要素名」にid="sotowaku"という「属性」が付けられたＴＡＧになります。 divの意味は「特定の範囲を示す」となり、開始ＴＡＧと終了ＴＡＧの間に書かれた文章内容がひとつのまとまりとして扱われます。 このプログラムの場合、上から6行目の開始ＴＡＧと下から３行目の終了ＴＡＧの間の文章がひとつのまとまりになります。 id="sotowaku"はその要素に名前付けを行っています。すなわちこのdivと言う要素はsotowakuと言う名前が付けられた事になります。 で、ここからが肝心です。 sotowakuのように要素に付けた名前ですが、この名前には専用の見栄えすなわちスタイルを設定してやる事ができます。 これは先ほどの章でＴＡＧの<h2>や<h3>にスタイルを設定した事と同じ事が、sotowakuという要素名にもできるという事です。 下記の「スタイルシート例１」を見てください ＃sotowakuの｛ ｝の中に書かれた内容が、sotowakuのスタイルを決めるさまざまな設定になっています。 その設定は、「背景を白で文字は左寄せ、上下左右の余白を決め全体の幅を900pxにしブラウザの中央に表示、そこに枠線を灰色で表示する」、というような事を行っています。 これでこのsotowakuと銘打たれたdivは、開始ＴＡＧから終了ＴＡＧの間、つまり本文すべてをひとつのまとまりの中に収め、スタイルの設定どうりブラウザで表示されるのです。 * { margin: 0px; padding: 0px; font-size: 13px; text-decoration: none; font-weight: normal; color : #666666; } body { background-color: #eeeeee; text-align: center; } #sotowaku{ background-color: white; background-image: url(kousyou.gif); background-repeat: no-repeat; background-position: right top; text-align : left; margin : 10px auto 0 auto; padding: 30 0 0 0px; width : 900px; border : 1px solid #cccccc; -moz-box-shadow: 3px 3px 10px #555; -webkit-box-shadow: 3px 3px 10px #555; } h1 { font-size: 25px; color: #0099cc; margin : 30 0 0 30px; } h2 { font-size: 18px; margin: 30 30 0 30px; padding: 0 0 0 10px; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #cccccc; } h3 { font-size : 16px; margin : 30 40 0 40px; padding : 2 10 2 10px; border-left : 10px solid #0099cc; } p { margin : 0 30 0 30px; padding: 10 30 0 50px; line-height: 20px; } a{ border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #00a9e1; } a:hover{ color: #00a9e1; } li{ color: #555555; margin : 20 20 20 80px; } #footer{ background-color: #eefbff; text-align : right; border-top-width: 1px; border-top-style: solid; border-top-color: #c8f1ff; padding : 0 0 30 0px; } ＴＡＧは他にもたくさんあります。 見栄えを自分の思いどうりに設定してやるには、すべてのＴＡＧに対してスタイルを決めてやる必要があります。 「スタイルシート例１」を見るとすべてのＴＡＧにスタイルを設定している事がわかります。 スタイルシートの設定ひとつひとつがなにを行っているかはこちらを参照ください。 ＴＡＧについてもそれぞれの説明はこちらを参照ください。 ２−６ さまざまなスタイルの設定
プログラム例３
ＨＴＭＬプログラムの基本構造
スタイルシート例１ （kadai.css)