ホームページを編集しよう
改行しよう
メモ帳を起動させ次の文章をて入力して下さい。（文章は何でもいいですけど、改行は入れて下さい。）

<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body>
        ようこそいらっしゃいました！！
        ビートルズファンのホームページです。
        1980年に他界したジョン・レノンに続いて
        昨年ジョージ・ハリソンまで他界してしまいました。
        メンバーの半数が他界してしまいました。
        残されたポール・マッカートニーとリンゴ・スターの２人には
        ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

入力できたら保存してします。
ファイル名は「page1.html」とここではします。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


表示されましたが、文章がつながってます。
メモ帳で改行していても、ブラウザーでは改行とは認識してくれません。
そこでブラウザー上で改行するために改行タグを使います。
改行タグは<br>です。
この<br>は「ここで改行しなさい」としてるだけなので、「開始タグ」「終了タグ」はありません。
このように単独で使用するタグを単独タグといいます。
先ほどのファイルに改行タグ<br>を入れます。
<br>を入れてファイルを修正しいます。
<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body>
        ようこそいらっしゃいました！！<br>
        ビートルズファンのホームページです。<br>
        1980年に他界したジョン・レノンに続いて<br>
        昨年ジョージ・ハリソンまで他界してしまいました。
        <br>メンバーの半数が他界してしまいました。
        <br>残されたポール・マッカートニーとリンゴ・スターの２人には
        <br>ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


今度はちゃんと改行されています。
あと、気付きましたか？
<br>の入れる位置が文の前に入れたのと、文の後に入れたのと。
どっちに入れても改行はされますが、使いやすい方で統一した方がいいと思います。
（ちなみに私は文の後に入れます。）

見出しをつける
「ようこそいらっしゃいました！！」の後ろの<br>は消して、
文の前に<h1>を、文の後ろに</h1>を入れて下さい。
<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body>
        <h1>ようこそいらっしゃいました！！</h1>
        ビートルズファンのホームページです。<br>
        1980年に他界したジョン・レノンに続いて<br>
        昨年ジョージ・ハリソンまで他界してしまいました。
        <br>メンバーの半数が他界してしまいました。
        <br>残されたポール・マッカートニーとリンゴ・スターの２人には
        <br>ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


<h1>〜</h1>で挟まれた部分「ようこそいらっしゃいました！！」の文字が太く大きくなりました。
そして自動的に改行されて、次の文との間に空白行が入りました。
h のあとの数字ですが、1〜6まで入れられます。
1 が一番大きくて6 が一番小さくなります。
サンプル[h1] [h2] [h3] [h4] [h5] [h6]

文字に色や大きさを指定する
「<h1>ようこそいらっしゃいました！！</h1>」の<h1>の後ろに、<font color="red">
</h1>の前に</font>を入れて下さい。
次に「ビートルズファンのホームページです。」の前に、<font size="5">後ろに</font>を入れて下さい。
<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body>
        <h1><font color="red">ようこそいらっしゃいました！！</font></h1>
        <font size="5">ビートルズファンのホームページです。</font><br>
        1980年に他界したジョン・レノンに続いて<br>
        昨年ジョージ・ハリソンまで他界してしまいました。
        <br>メンバーの半数が他界してしまいました。
        <br>残されたポール・マッカートニーとリンゴ・スターの２人には
        <br>ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


見出しの文字が赤くなり、その下の文字が大きくなりました。
このように文字に色をつけたり大きさを指定するには<font>〜</font>タグを使います。
色をつける 文字の色を指定するには<font color="">を使います。
「color=""」の " " の中に色を指定します。
色の指定は英語で指定できる色とRGB値で指定する方法と２通りあります。
  • 英語で指定する場合は、「<font color="red">」というように記述します。 (W3Cで勧告されている、Windows VGAパレットでサポートされている標準的な16色）
    サンプル<font color="red">赤い文字</font>

  • RGB値で指定する場合は、 「<font color="#ff6600">」と16進表記で記述します。
    ただし約1670万色ある色すべてをどのPCで見ても同じ色に表現されるわけではなく、バラツキが出ます。 その中ですべてのPCで表示できる色は216色しかありません。その216色をWebセーフカラーといいます。
    （Webセーフカラーとは、ウインドウズとマッキントッシュのシステムパレットに共通する216色の事です。）
    サンプル<font color="#ff0000">これも赤い文字</font>
Webセーフカラーチャートを別ウインドで開く。
大きさを指定 文字の大きさを指定するには<font size="">を使います。
「size=""」の " " の中に数値を指定します。数値は1から7まで指定できます。
「<font size="5">」と指定します。標準の文字サイズは「3」です。
（ 1 が一番小さくて 7 が一番大きくなります。見出しの数値の指定とは逆ですので注意して下さい。）
サンプル<font size="5">文字の大きさが5</font>

大きさ見本
色と大きさを
一度に指定		 色の指定(color)と大きさ(size)の指定を組み合わせます。
「<font color="red" size="5">」と指定します。
サンプル<font color="red" size="5">赤い文字で大きさが5</font>
「color=」とか「size=」の事をタグの「属性」といい、
「"red"」や「"5"」のように「" "」（ダブルコーテーション）で囲まれた部分を「属性値」といいます。
<font color = "red">
要素 属性 属性値

文字飾りを指定する
「1980年に他界したジョン・レノンに続いて」のジョン・レノンの前に、<b> 後に</b>を入れて下さい。
次に「昨年ジョージ・ハリソンまで他界してしまいました。」のジョージ・ハリソンの前に、<i>
後に</i>を入れて下さい。
さらに「残されたポール・マッカートニーとリンゴ・スターの２人には」のポール・マッカートニーの前に、<u>
リンゴ・スターの後に</u>を入れて下さい。
<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body>
        <h1><font color="red">ようこそいらっしゃいました！！</font></h1>
        <font size="5">ビートルズファンのホームページです。</font><br>
        1980年に他界した<b>ジョン・レノン</b>に続いて<br>
        昨年<i>ジョージ・ハリソン</i>まで他界してしまいました。
        <br>メンバーの半数が他界してしまいました。
        <br>残された<u>ポール・マッカートニーとリンゴ・スター</u>の２人には
        <br>ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


ジョン・レノンの文字が太くなり（ボールド）、ジョージ・ハリソンの文字が斜体（イタリック）
ポール・マッカートニーとリンゴ・スターの下には下線（アンダーバー）が引かれています。
もう一つ打ち消し文字があります。打ち消し文字
文字を太く（ボールド）するには<b>〜</b>タグを使います。
文字を斜体（イタリック）にするには<i>〜</i>タグを使います。
文字に下線（アンダーバー）を引くには<u>〜</u>タグを使います。
文字に線を入れて打ち消すには<s>〜</s>タグを使います。

組み合わせて使う事もできます。（組み合わせのサンプル）

ページ全体に色を付ける
「<body>」このボディタグに記述します。
<body bgcolor="navy">（注意 bodyの後に半角スペースを入れるのを忘れないで下さい。）
<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body bgcolor="navy">
        <h1><font color="red">ようこそいらっしゃいました！！</font></h1>
        <font size="5">ビートルズファンのホームページです。</font><br>
        1980年に他界した<b>ジョン・レノン</b>に続いて<br>
        昨年<i>ジョージ・ハリソン</i>まで他界してしまいました。
        <br>メンバーの半数が他界してしまいました。
        <br>残された<u>ポール・マッカートニーとリンゴ・スター</u>の２人には
        <br>ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


ページ全体がNavy色になりましたけど、見出し以外の文字が黒で見づらくなってしまいました。
色の指定はフォントで指定したのと同じやり方です。 （英語表記 またはRGB値の16進表記）
そこで今度は、全体の文字の色を変えてみます。
「<body bgcolor="navy">」このボディタグに続けて記述します。
<body bgcolor="navy" text="white"> （注意 "navy"の後に半角スペースを入れるのを忘れないで下さい。）
<html>
    <head>
        <title>ホームページ</title>
    </head>
    <body bgcolor="navy"  text="white">
        <h1><font color="red">ようこそいらっしゃいました！！</font></h1>
        <font size="5">ビートルズファンのホームページです。</font><br>
        1980年に他界した<b>ジョン・レノン</b>に続いて<br>
        昨年<i>ジョージ・ハリソン</i>まで他界してしまいました。
        <br>メンバーの半数が他界してしまいました。
        <br>残された<u>ポール・マッカートニーとリンゴ・スター</u>の２人には
        <br>ジョンとジョージのぶんまで頑張ってもらいたいです。
    </body>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「page1.html」を開いて下さい。


文字が白になって見やすくなりました。（フォントタグで色の指定をしてる箇所はフォントの指定がいきるので変わりません。）
このようにページ全体の背景の色を変えるのは「bgcolor=" "」で、
ページ全体の文字の色を変えるのは「text=" "」を使って変える事ができます。
色の指定はフォントで指定したのと同じやり方です。 （英語表記 またはRGB値の16進表記）

段落とテキスト横位置指定
新たに別のページを作ります。
次のようなものを記述して下さい。（文書は何でもいいですが段落を付けてください）
<html>
    <head>
        <title>４人の紹介</title>
    </head>
    <body>
        <h2>ビートルズの４人</h2>
        ジョン・レノン<br>
        リズムギター主にを担当。<br>
        ポール･マッカートニーと共に多くの作詞･作曲をしました。<br>
        1980年12月8日に狂信者に射殺されてしまいました。 享年40歳。 <br>
        <br>
        ポール・マッカートニー<br>
        主にべースを担当しましたがピアノやギターなども演奏しました。<br>
        ジョン レノンと共に多くの作詞･作曲をしました。<br>
        1979年まで妻の｢リンダ｣と｢Wings｣というバンドを結成しました。 <br>
         その後もソロとして活動を続けています。<br>
        <br>
        ジョージ・ハリスン<br>
        主にリードギターを担当<br>
        ジョンとポールの陰になって目立ちませんでしたが、多くの作品を作っています。<br>
        解散後は、最初に1位をとった曲はジョージの｢マイ スィート ロード｣でした。<br>
        近年になって重病を患い、2001年11月29日、死去しました。享年58歳。 <br>
        <br>
        リンゴ・スター<br>
        本名は｢リチャ−ド スターキー｣。 ドラムスを担当。<br>
        デビューの直前になってメンバーに加入し、<br>
        温厚な性格と独特なキャラクターを持ってます。<br>
        日本のコマーシャルにも出演ていました。（リンゴすった） <br>
    </body>
</html>

修正できたら、「ファイルメニュー」から「名前を付けて保存」を選び、ファイル名を「beatles.html」とします。
ブラウザーで確認します。
保存した「beatles.html」を開いて下さい。


見出しの「ビートルズの４人」を見出しらしくページの中央に持ってくるのと、 ４人をそれぞれ段落にしてテキストの横位置を指定してみます。
見出しの部分は「<h2>ビートルズの４人</h2>」の<h2の後に記述します。
<h2 align="center">ビートルズの４人</h2>
<h2タグの後に半角スペースをあけて align="center" を記述する事によって、横位置を中央に指定できます。
４人をそれぞれ段落にして横位置を指定するのは、段落タグの <p>〜</p> タグで囲って、
横位置を指定する align=" " を記述します。
<p align="left">ジョン〜40歳。</p>この後の<br>２つは削除します。
<p align="center">ポール〜ます。</p>この後の<br>２つは削除します。
<p align="right">ジョージ〜58歳。</p>この後の<br>２つは削除します。
<p align="left">リンゴ〜ました。</p>この後の<br>は削除します。
を記述します。
さらに名前のところを強調するためにボールド指定をします。
<html>
    <head>
        <title>４人の紹介</title>
    </head>
    <body>
        <h2 align="center">ビートルズの４人</h2>
        <p align="left"><b>ジョン・レノン</b><br>
        リズムギター主にを担当。<br>
        ポール･マッカートニーと共に多くの作詞･作曲をしました。<br>
        1980年12月8日に狂信者に射殺されてしまいました。 享年40歳。</p>
        <p align="center"><b>ポール・マッカートニー</b><br>
        主にべースを担当しましたがピアノやギターなども演奏しました。<br>
        ジョン レノンと共に多くの作詞･作曲をしました。<br>
        1979年まで妻の｢リンダ｣と｢Wings｣というバンドを結成しました。 <br>
         その後もソロとして活動を続けています。</p>
        <p align="right"><b>ジョージ・ハリスン</b><br>
        主にリードギターを担当<br>
        ジョンとポールの陰になって目立ちませんでしたが、多くの作品を作っています。<br>
        解散後は、最初に1位をとった曲はジョージの｢マイ スィート ロード｣でした。<br>
        近年になって重病を患い、2001年11月29日、死去しました。享年58歳。 </p>
        <p align="left"><b>リンゴ・スター</b><br>
        本名は｢リチャ−ド スターキー｣。 ドラムスを担当。<br>
        デビューの直前になってメンバーに加入し、<br>
        温厚な性格と独特なキャラクターを持ってます。<br>
        日本のコマーシャルにも出演ていました。（リンゴすった）</p>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「beatles.html」を開いて下さい。
段落タグ（<p >〜</p>）で段落を指定すると、次の行は改行されて１行分空白行が入ります。
そして段落ごとに左・中央・右と揃いました。揃えのサンプル
横位置の指定は align="※※" で指定します。
また、段落タグ（P）とalign=" " を使うと（<p align=" ">〜</p>）囲っている部分が同じ揃えになります。

画像を表示しよう
配置する画像を用意します。見出しの横に使うのと、背景に使いますので小さめの画像がいいでしょう。 （持っている写真でもいいですし、インターネットで見つけてもいいです。）
見出しの横用に2点
Rickenbacker325_s.gif Rickenbacker325_s_left.gif
背景用に1点用
img src="back.jpg"

イメージタグというのを使います。<img src="画像のファイル名">
ファイルに追加します。
<html>
    <head>
        <title>４人の紹介</title>
    </head>
    <body>
        <h2 align="center"><img src="Rickenbacker325_s.gif">ビートルズの４人
         <img src="Rickenbacker325_s_left.gif"></h2>
        <p align="left"><b>ジョン・レノン</b><br>
        リズムギター主にを担当。<br>
        ポール･マッカートニーと共に多くの作詞･作曲をしました。<br>
        1980年12月8日に狂信者に射殺されてしまいました。 享年40歳。</p>
        <p align="center"><b>ポール・マッカートニー</b><br>
        主にべースを担当しましたがピアノやギターなども演奏しました。<br>
        ジョン レノンと共に多くの作詞･作曲をしました。<br>
        1979年まで妻の｢リンダ｣と｢Wings｣というバンドを結成しました。 <br>
         その後もソロとして活動を続けています。</p>
        <p align="right"><b>ジョージ・ハリスン</b><br>
        主にリードギターを担当<br>
        ジョンとポールの陰になって目立ちませんでしたが、多くの作品を作っています。<br>
        解散後は、最初に1位をとった曲はジョージの｢マイ スィート ロード｣でした。<br>
        近年になって重病を患い、2001年11月29日、死去しました。享年58歳。</p>
        <p align="left"><b>リンゴ・スター</b><br>
        本名は｢リチャ−ド スターキー｣。 ドラムスを担当。<br>
        デビューの直前になってメンバーに加入し、<br>
        温厚な性格と独特なキャラクターを持ってます。<br>
        日本のコマーシャルにも出演ていました。（リンゴすった）></p>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「beatles.html」を開いて下さい。


見出しの「ビートルズの４人」の両側に画像が表示されました。
画像を表示する<img src="画像のファイル名">タグですが、終了タグはありません。 （img はイメージの略、src はソースの略です。）
前に背景の色を変えましてが、背景に画像を表示する事もできます。
背景に画像を表示するのにはボディタグに記述します。
<html>
    <head>
        <title>４人の紹介</title>
    </head>
    <body background="back.jpg">
        <h2 align="center"><img src="Rickenbacker325_s.gif">ビートルズの４人
        　　<img src="Rickenbacker325_s_left.gif"></h2>
        <p align="left"><b>ジョン・レノン</b><br>
        リズムギター主にを担当。<br>
        ポール･マッカートニーと共に多くの作詞･作曲をしました。<br>
        1980年12月8日に狂信者に射殺されてしまいました。 享年40歳。</p>
        <p align="center"><b>ポール・マッカートニー</b><br>
        主にべースを担当しましたがピアノやギターなども演奏しました。<br>
        ジョン レノンと共に多くの作詞･作曲をしました。<br>
        1979年まで妻の｢リンダ｣と｢Wings｣というバンドを結成しました。 <br>
         その後もソロとして活動を続けています。</p>
        <p align="right"><b>ジョージ・ハリスン</b><br>
        主にリードギターを担当<br>
        ジョンとポールの陰になって目立ちませんでしたが、多くの作品を作っています。<br>
        解散後は、最初に1位をとった曲はジョージの｢マイ スィート ロード｣でした。<br>
        近年になって重病を患い、2001年11月29日、死去しました。享年58歳。</p>
        <p align="left"><b>リンゴ・スター</b><br>
        本名は｢リチャ−ド スターキー｣。 ドラムスを担当。<br>
        デビューの直前になってメンバーに加入し、<br>
        温厚な性格と独特なキャラクターを持ってます。<br>
        日本のコマーシャルにも出演ていました。（リンゴすった）></p>
</html>

修正できたら、「ファイルメニュー」から「上書き保存」をして下さい。
ブラウザーで確認します。
保存した「beatles.html」を開いて下さい。


背景に画像が表示されました。
ボディタグの中に、<body  background="画像ファイル名">を記述します。
背景に画像を表示した場合はブラウザー画面いっぱいに繰り返して表示されます。


ここまでがHTML記述の基本その1です。

topページに戻る