第1節 とにかく作ってみよう

  ぼくは,ぱーぷりんの助手の くまさん といいます。
  これからぼくのホームページを作っていきますので、みなさんも一緒に進めて行きませんか。
  ぼくは、何とかワープロソフトが扱える程度の初心者です。
  持っているのは、パソコンだけで、ホームページを作るソフトもありません。
  それでも、何とか ホームページ というものを作ってみようと思っています。
  まさに ゼロからのホームページづくり です。
  同じような方は、一緒に作っていきましょう!



 @ 文章をつくる
 A 改行を入れる
 B 横方向のレイアウト
 C 文字の大きさ
 D 文字の色
 E 文字の書体
 F 強調文字・斜文字等
 G 空白文字・空白行
 H ソースファイルを見やすく



@ 文章をつくる

まず初めに、「アクセサリー」に入っている「メモ帳」を開きましょう。
  メモ帳の開き方
スタート → プログラム → アクセサリー → メモ帳
そして、ワープロを打つように、ホームページの内容を作っていきます。
ここで、「何を書くか」については、最も大切でかつ難しい問題ですが、悩んでいては進みません。
とりあえず、タイトル・あいさつ・自己紹介を書きましょう。
僕はメモ帳には、次のように入力しました。
メモ帳
くまさんのホームページ
ようこそ、くまさんのホームページへ、おいでくださいました。
まだ始めたばかりなので、内容はあまりありませんが、
すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
まずは、自己紹介します。
私のなまえは、くまさんです。
また、住所は兵庫県の中部の田園地帯に住んでいます。
仕事はぱーぷりんの助手をしています。
年齢は30歳代です。趣味はパソコン・スキーが特に好きです。
学歴は、ぱーぷりん高校を何とか卒業しました。
そして、ぱーぷりん大学でパソコンを専攻しました。
保存場所について説明する事がありますが、現時点では混乱するので、4節で詳しく説明し、それまでは、すべてのファイルを「デスクトップ」に保存します。

入力が出来れば、「ファイル名を付けて保存」でセーブします。
まず最上段の「保存する場所」の、入力窓右の▲マークをクリック、「デスクトップ」を指定します。
次に、下より2段目の「ファイル名」の入力欄に index.html を入力して、すぐ右の「保存」をクリック。

うまく保存出来ていれば、デスクトップ(初期画面)上に index.html ファイルのアイコンが表示されます。

このように、ファイル名のピリオド以下の部分(拡張子という)を htmlhtm にすれば、ホームページで扱えるファイル(HTMLファイル)になります。
  ホームページで使えるファイルにする
ファイル名.htm または ファイル名.html

 memo : ファイル名は、漢字を使わず、アルファベットから始まる半角文字にしましょう。

実は、これで色々問題はあっても、ホームページが出来たのです。
実際に、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。

 PS : 作成した、HTMLファイルをパソコンで実行するには、ファイルアイコンをダブルクリックします。


A 改行を入れる

メモ帳では改行しているにも係わらず、実際のページでは全く改行がされていません。
これでは、非常に見づらいですね。

HTMLの文章は、そのウィンドウの幅の大小に合わせて、自動改行してくれます。
その反面、改行の指示を出さない限り、途中での改行は行われません。

それでは、改行を行う指示を覚えて下さい。
  改行の指示法
<br> : 一カ所に付き、一回の改行し、連続使用も可能
  以降、これらの指示は、すべて半角で書きます。
  以降、これらの指示は、大文字・小文字どちらで書いてもOKです。
改行の練習をしてみましょう。 メモ帳で入力します。
メモ帳
ここが始まりの位置です
<br>
一回改行しました
<br><br>
二回改行しました
<br><br><br>
三回改行しました
これを,HTMLファイルにして表示すると,次のようになります。
ここが始まりの位置です
一回改行しました

二回改行しました


三回改行しました
これでわかるように、空白行は <br> を連続使用して作ります。
ホームページに応用
<br> の使い方がわかったところで、ホームページに改行指示を入れましょう。
赤字 の部分が追加記入したところです。
メモ帳
くまさんのホームページ<br><br>
ようこそ、くまさんのホームページへ、おいでくださいました。  <br>
まだ始めたばかりなので、内容はあまりありませんが、<br>
すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。<br><br>
まずは、自己紹介します。<br><br>
私のなまえは、くまさんです。<br>
また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
仕事はぱーぷりんの助手をしています。<br>
年齢は30歳代です。<br>
趣味はパソコン・スキーが特に好きです。<br>
学歴は、ぱーぷりん高校を何とか卒業しました。<br>
そして、ぱーぷりん大学でパソコンを専攻しました。<br>
入力が出来れば、今度は「上書き保存」で、index.html を保存します。
改行すれば、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。
かなり、読みやすいページになりましたね。


B 横方向のレイアウト

各行ごとに、文字の左寄せ、中央表示、右寄せの指示をします。
この指示で、後で出てくる、 画像 の横方向のレイアウトも出来ます。

それでは、その指示方法を覚えて下さい。
  横方向の位置指定の指示法
<div align="****"> この間に文章を入れる </div>
 ****=left:左寄せ  ****=center:中央寄せ  ****=right:右寄せ
  align="****" の部分は align=**** と " " がなくてもokです
  div と align="****" の間のスペースは 必ず半角にします
レイアウトの練習をしてみましょう。 メモ帳で入力します。
メモ帳
<div align="left">align属性を左寄せに設定しています</div>
<div align="center">align属性を中揃えに設定しています</div>
<div align="right">align属性を右寄せに設定しています</div>
これを,HTMLファイルにして表示すると,次のようになります。
align属性を左寄せに設定しています
align属性を中揃えに設定しています
align属性を右寄せに設定しています
ホームページに応用
<div align="***"> 〜 </div> を、ホームページに使用してみましょう。
タイトル・あいさつ の部分を、「中央寄せ」してみましょう。
赤字の部分が align で修正したところです。
メモ帳
<div align="center">
くまさんのホームページ<br><br>
ようこそ、くまさんのホームページへ、おいでくださいました。<br>
まだ始めたばかりなので、内容はあまりありませんが、<br>
すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。<br><br>
</div>
まずは、自己紹介します。<br>
私のなまえは、くまさんです。<br>
また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
仕事はぱーぷりんの助手をしています。<br>
年齢は30歳代です。<br>
趣味はパソコン・スキーが特に好きです。<br>
学歴は、ぱーぷりん高校を何とか卒業しました。<br>
そして、ぱーぷりん大学でパソコンを専攻しました。<br>
入力が出来れば、今度は「ファイル名を付けて保存」で、index.html を保存します。
この結果、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。
「タイトル」と「あいさつ」が中央揃えになりました。

 PS : <div align="center">〜</div>は、<center>〜</center>と書くことも出来ます。


C 文字の大きさ

次に、文字の大きさを設定してみましょう。
ホームページでは、タイトルや項目の文字を大きくすると、見栄えをよく出来ます。
それでは、文字の大きさの指示方法を覚えて下さい。
  文字の大きさの指示法
<font size="**"> この間に文章を入れる </font>
  ** : 1〜7を指定、1から順に大きくなり、初期値は3
   size="**" の部分は size=** とと " " がなくてもokです
   以降類似部分については同様ですが、入れておく方が無難でしょう
文字の大きさの練習してみましょう。 メモ帳で入力します。
メモ帳
これが初期設定の大きさの文字です
<font size="1">size=1の文字の大きさです </font><br>
<font size="2">size=2の文字の大きさです </font><br>
<font size="3">size=3の文字の大きさです </font><br>
<font size="4">size=4の文字の大きさです </font><br>
<font size="5">size=5の文字の大きさです </font><br>
<font size="6">size=6の文字の大きさです </font><br>
<font size="7">size=7の文字の大きさです </font>
これを,HTMLファイルにして表示すると,次のようになります。
これが初期設定の大きさの文字です
size=1の文字の大きさ
size=2の文字の大きさ
size=3の文字の大きさ
size=4の文字の大きさ
size=5の文字の大きさ
size=6の文字の大きさ
size=7の文字の大きさ
ホームページの応用は次の項目を併せます。


D 文字の色

次に、文字の色を設定してみましょう。
要所ごとに文字に色を付けると、とても読みやすく出来ます。
それでは、文字の色の指示方法を覚えて下さい。
  文字の色の指示法
<font color="**"> この間に文章を入れる </font>
  ** : 色を指定します。 その指定法には次の二つがあります。
   color="red"    ... 色の名前を指定する。
   color="#ff0000" ... 色の RGB値(三原色 赤・緑・青の割合)を指定する。

   ひとこと・・・大きさと色を併せて、次のようにまとめて書けます。
    <font size="**" color="**"> この間に文章を入れる </font>

実際の色と、色名・RGB値を一覧で揚げておきます。
カラーサンプル
色の名前を指定する場合
black
gray
silver
white



red
yellow
lime
aqua
blue
fuchsia
maroon
olive
green
teal
navy
purple

pink
gold
orange
deeppink
brown
magenta
色のRGB値を指定する場合
#000000
#000055
#0000AA
#0000FF
#005500
#005555
#0055AA
#0055FF
#00AA00
#00AA55
#00AAAA
#00AAFF
#00FF00
#00FF55
#00FFAA
#00FFFF
 
#550000
#550055
#5500AA
#5500FF
#555500
#555555
#5555AA
#5555FF
#55AA00
#55AA55
#55AAAA
#55AAFF
#55FF00
#55FF55
#55FFAA
#55FFFF
 
#AA0000
#AA0055
#AA00AA
#AA00FF
#AA5500
#AA5555
#AA55AA
#AA55FF
#AAAA00
#AAAA55
#AAAAAA
#AAAAFF
#AAAA00
#AAAA55
#AAAAAA
#AAAAFF
 
#FF0000
#FF0055
#FF00AA
#FF00FF
#FF5500
#FF5555
#FF55AA
#FF55FF
#FFAA00
#FFAA55
#FFAAAA
#FFAAFF
#FFFF00
#FFFF55
#FFFFAA
#FFFFFF
文字の色の練習してみましょう。 メモ帳で入力します。
メモ帳
これが規定の文字色です<br>
<font color="red">color=redの文字の色です </font><br>
<font color="olive">color=oliveの文字の色です </font><br>
<font color="#996633">color=#996633の文字の色です </font><br>
<font color="#cc9966">color=#cc9966の文字の色です </font>
これを,HTMLファイルにして表示すると,次のようになります。
これが規定の文字色です
color=redの文字の色です
color=oliveの文字の色です
color=#996633の文字の色です
color=#cc9966の文字の色です
ホームページに応用
文字の大きさ・色の使い方が分かったところで、ホームページで使用してみましょう。
赤字 の部分が修正したところです。
メモ帳
<div align="center">
<font size="7" color="red">くまさんのホームページ</font><br><br>
<font color="navy">
ようこそ、くまさんのホームページへ、おいでくださいました。<br>
まだ始めたばかりなので、内容はあまりありませんが、<br>
すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。</font><br><br>
</div>
<font color="#bb00ff">まずは、自己紹介します。</font><br><br>
私のなまえは、くまさんです。<br>
また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
仕事はぱーぷりんの助手をしています。<br>
年齢は30歳代です。<br>
趣味はパソコン・スキーが特に好きです。<br>
学歴は、ぱーぷりん高校を何とか卒業しました。<br>
そして、ぱーぷりん大学でパソコンを専攻しました。<br>
入力が出来れば、今度は「上書き保存」で、index.html を保存します。
この結果、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。
少しは、見栄えがするようになりましたね。


E 文字の書体

HTMLではいろいろな書体の文字が使えます。 その指示方法を説明しましょう。
  文字の書体の指示法
<font face="****"> 文字列 </font>
 書体の種類
  MS P明朝 , MS 明朝 , MS Pゴシック , MS ゴシック
  MS UI Gothic , DHP行書体 , HG丸ゴシックM-PRO , HG正楷書体-PRO
  HG創英角ゴシックUB , HG創英角ポップ体 , 他
※ 全角・半角および、半角スペースが混在していますので、注意しましょう!

 ひとこと・・・大きさと色、さらに書体を併せて、次のようにまとめて書けます
 <font size="**" color="**" face="****"> この間に文章を入れる </font>
文字の書体の練習をしてみましょう。 メモ帳で入力します。
メモ帳
これが初期設定の書体の文字です <br><br>

<font face="MS P明朝">MS P明朝体にします</font><br>
<font face="MS 明朝">MS明朝体にします</font><br><br>

<font face="MS Pゴシック">MS Pゴシックにします</font><br>
<font face="MS ゴシック">MS ゴシック体にします</font><br><br>

<font face="MS UI Gothic">MS UI Gothic体にします</font><br>
<font face="HG丸ゴシックM-PRO">HG丸ゴシックM-PRO体にします</font><br>

<font face="DHP行書体">DHP行書体にします</font><br>
<font face="HG正楷書体-PRO">HG正楷書体-PRO体にします</font><br><br>

<font face="HG創英角ゴシックUB">HG創英角ゴシックUB体にします</font><br>
<font face="HG創英角ポップ体">HG創英角ポップ体にします</font><br>
これを,HTMLファイルにして表示すると,次のようになります。
これが初期設定の書体の文字です

MS P明朝体にします
MS明朝体にします

MS Pゴシックにします
MS ゴシック体にします

MS UI Gothic体にします
HG丸ゴシックM-PRO体にします

DHP行書体にします
HG正楷書体-PRO体にします

HG創英角ゴシックUB体にします
HG創英角ポップ体にします
ホームページに応用
書体の指示法が分かったところで、ホームページで使用してみましょう。
あいさつ文を、「HG創英角ポップ体」に書き直してみます。
赤字の部分が修正したところです。
メモ帳
<div align="center">
<font size="7" color="red">くまさんのホームページ</font><br><br>
<font color="navy" face="HG創英角ポップ体">
ようこそ、くまさんのホームページへ、おいでくださいました。<br>
まだ始めたばかりなので、内容はあまりありませんが、<br>
すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。</font><br><br>
</div>
<font color="#bb00ff">まずは、自己紹介します</font><br><br>
私のなまえは、くまさんです。<br>
また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
仕事はぱーぷりんの助手をしています。<br>
年齢は30歳代です。<br>
趣味はパソコン・スキーが特に好きです。<br>
学歴は、ぱーぷりん高校を何とか卒業しました。<br>
そして、ぱーぷりん大学でパソコンを専攻しました。<br>
入力が出来れば、「上書き保存」で、index.html を保存します。
この結果、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。


F 強調文字・斜文字等

強調文字、斜文字、アンダーラインの設定してみましょう。
それでは、その指示方法を覚えて下さい。
  強調文字、斜文字、アンダーラインの設定法
<b> 文字列 </b> : 文字列を強調文字(太字)にします
<i> 文字列 </i>   : 文字列を斜文字にします
<u> 文字列 </u> : 文字列にアンダーラインを引きます
文字の飾り付けの練習してみましょう。 メモ帳で入力します。
メモ帳
はじめは普通です<b>ここから強調文字になりました</b>また戻ります<br>
はじめは普通です<i>ここから斜文字になりました</i>また戻ります<br>
はじめは普通です<u>ここから下線が引かれます</u>また戻ります
これを,HTMLファイルにして表示すると,次のようになります。
はじめは普通ですここから強調文字になりましたまた戻ります
はじめは普通ですここから斜文字になりましたまた戻ります
はじめは普通ですここから下線が引かれますまた戻ります
ホームページの応用は次の項目を併せます。


G 空白文字・空白行

半角および全角の空白が、どのように表示されるかを説明します。
  空白文字・空白行の表示法
半角の空白文字
 ・文の途中では、何文字あっても、1文字分の半角の空白を空けます
 ・文の先頭や末尾では、無視されます
全角の空白文字
 ・どこに置いても,書いた数分の,全角分の空白を空けます
空白行
 ・無視されます
 ・<br>を指定しないと、空白行は表示されません
以降、半角の空白を _ で表し、全角の空白を □ で表します
空白文字の練習をしてみましょう。 メモ帳で入力します。
メモ帳
まず文字列があります_半角空白を入れました□全角空白を入れました。<br>
_はじめに半角空白を入れました___3文字分の半角空白を入れました。<br>
□はじめに全角空白を入れました□□□3文字分の全角空白を入れました。<br>
まず文章があります。空白行(空白文字もない行)を入れます<br>

行を空けて文章を置きます
これを,HTMLファイルにして表示すると,次のようになります。
まず文字列があります 半角空白を入れました 全角空白を入れました。
はじめに半角空白を入れました 3文字分の半角空白を入れました。
 はじめに全角空白を入れました   3文字分の全角空白を入れました。
まず文章があります。空白行(空白文字もない行)を入れます
行を空けて文章を置きます
ホームページに応用
<b> 〜 </b> ,<i> 〜 </i>,<u> 〜 </u>空白文字をホームページで使用してみましょう。
赤字の部分が修正したところです。全角の空白をで表します
メモ帳
<div align="center">
<font size="7" color="red">くまさんのホームページ</font><br><br>
<font color="navy" face="HG創英角ポップ体">
ようこそ、くまさんのホームページへ、おいでくださいました。<br>
まだ始めたばかりなので、内容はあまりありませんが、<br>
すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。</font><br><br>
</div>
<font color="#bb00ff"><b>
□□□まずは、自己紹介します</b></font><br><br>
私のなまえは、<i>くまさん</i>です。<br>
また、住所は兵庫県の中部の田園地帯に住んでいます。<br>
仕事はぱーぷりんの助手をしています。<br>
年齢は30歳代です。<br>
趣味は<u>パソコン・スキー</u>が特に好きです。<br>
学歴は、ぱーぷりん高校を何とか卒業しました。<br>
そして、ぱーぷりん大学でパソコンを専攻しました。<br>
入力が出来れば、今度は「上書き保存」で、index.html を保存します。
この結果、どのように表示されるか見てみましょう。 右のスイッチをクリックしてください。
やや、メリハリが付いたかな。


H ソースファイルを見やすく

次第にHTMLファイルの内容(ソースファイルという)が見難くなってきました。
これから益々見難くなっていくのを、如何に見やすく書くかが重要になってきます。

そこで、先程の半角の空白文字が、文頭で無視されるのと、空白行が無視されるのを利用します。
先頭位置をずらたり、まとまり毎に空白行を入れる事で、より見やすく出来ます。

もう1点、ソース内容の案内を書く、注釈文を挿入します。
注釈文は、HTMLファイルを実行した時、何も実行されない部分です。
それでは、注釈文の入れ方を説明します。
  注釈文の表示法
< !-- ここに注釈文を入れる -->
ホームページに応用
それでは、ホームページのソースファイルを、見やすく工夫してみましょう。
全角の空白を□で表します。
メモ帳
<div align="center">
       ← 空白行 <!-- ++++++++++ タイトル ++++++++++ -->  ← 注釈文 <font size="7" color="red"> くまさんのホームページ </font><br><br>        ← 空白行 <!-- ++++++++++ あいさつ ++++++++++ -->  ← 注釈文 <font color="navy" face="HG創英角ポップ体"> ようこそ、くまさんのホームページへ、おいでくださいました。<br> まだ始めたばかりなので、内容はあまりありませんが、<br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font><br><br>        ← 空白行 </div>        ← 空白行 <!-- ++++++++++ 自己紹介 ++++++++++ -->  ← 注釈文 <font color="#bb00ff"> <b>□□□まずは、自己紹介します</b> </font><br><br>        ← 空白行 □私のなまえは、<i>くまさん</i>です。<br> □また、住所は兵庫県の中部の田園地帯に住んでいます。<br> □仕事はぱーぷりんの助手をしています。<br> □年齢は30歳代です。<br> □趣味は<u>パソコン・お酒</u>が特に好きです。<br> □学歴は、ぱーぷりん高校を何とか卒業しました。<br> □そして、ぱーぷりん大学でパソコンを専攻しました。<br>
半角の空白文字と空白行・注釈文を使うと、かなり解りやすくなりましたね。