－ホームページ制作


	前置き
	では早速ホームページのデザインに入って行こうと思います。ホームページの見た目に反映されるデザインは<body></body>間に記述します。 <body text="#000000" bgcolor="#FFCCFF" background="bg.gif" link="#3333FF" vlink="#6633FF" alink="#FF0000"> <h1 align="center"><font color="#FF33FF">ようこそ私のホームページへ！</font></h1> <p align="center"> <b>こんにちは！<br>初めて作ったホームページだけど見て行ってください！</b></p> <hr size="5" width="50%" align="center"> <center> <table border="1" bgcolor="#FFCCFF" width="500"> <tr><th colspan="2" bgcolor="#FFFFCC"><h2><font color="#333333"><u>コンテンツ</u></font></h2></th></tr> <tr><th><i><font size="+3"><a href="#">Profile</a></font></i></th><td>…自己紹介です</td></tr> <tr><th><i><font size="+3"><a href="#">Diary</a></font></i></th><td>…普段の出来事を書いています</td></tr> <tr><th><i><font size="+3"><a href="#">BBS</a></font></i></th><td>…書き込みしてくださいねー</td></tr> </table> </center> <hr> <p align="right"> 連絡先はこちら。 <a href="mailto:xxx@xxx.com">xxx@xxx.com</a> </p> <center><a href="../../index.html"><img src="../../logo1.gif" width="95" height="95" alt="ONEWEB" border="0"></a></center> </body> この部分です。このタグと言う部分の羅列により見た目がきまっていくんですね。
	H
	では上から順に説明をしていきます。まず初めに表示される<h>タグ。これは文章中の見出しを現します。 <h>の種類は、<h1>から<h6>まであります。数字が小さい物のがホームページ上の大見出しとなり、数字が大きいものほど小見出しに使用します。数字が小さい物の方が、文字が大きくなるのですが、これは後々スタイルシートと言う物を使って制御できるのでここでは気にしなくても大丈夫です。また、画像にも指定する事が可能です。
	ALIGN
	次は<h>タグ内に指定されている、align=""タグです。これは指定した物の水平方向を指定するものです。 alignは使用用途がとても多く、これは必ず覚えておきましょう。 aignの""に指定できる位置は以下の3つなっています。　right　…　右方向　center　…　中央　left　…　左方向
	FONT
	次はFONTタグです。これはHTML内の文字に影響するタグです。 <font *="*"></font>の用に、font要素内に色々な指定をする事が可能です。ただ、次期htmlの記述では<font>タグは廃止され<p>タグがメインになってくるので余りお勧めは出来ません。
	COLOR
	次は、 <font>タグ内に記述されているcolor=""です。これはその名の通り、様々な要素の色を指定する事が出来ます。ここで指定したものは、<body>タグ内のtext=""で指定したものよりも優先されます。
	P
	次は確実にこれからのホームページ作りに必須になるであろうタグ、 <p>タグです。これはタグで囲った部分を一つの段落として取り扱うものです。文章を書いたり画像を貼り付けたりする時は、<p></p>で囲う事が決まりとなっています。 <p>は使わなくとも文章や画像を表示させる事は出来るのですが、今後必ず使わなければいけない時代がくるはずなので今から慣れておく事をお勧めします。また、文字などの前に必須と書いていますが他の<h>タグの様なもので囲われている場合は使わないでください。あくまでは<p>タグは段落取用なのです。
	B
	次は文字の太さを指定する<b>タグです。目立たせたい文字等に使用すると効果的かもしれません。類似タグに<strong>があります。どちらを使用しても特にかわりはありません。 B STRONG
	BR
	次は改行を行う<br>タグです。これもよく使うものなので覚えておきましょう。 <br>タグについては終了タグは必要ありません。また、見た目や高さを変更するために<br>を重複使用する事はお勧めできません。 spacer.gif(透過されている小さいgif画像)の高さを指定して利用したり、スタイルシートでの高さの指定をお勧めします。方法は後ほど記述致します。
	HR
	次は横罫線を現す<hr>タグです。何も指定せずに<hr>を使うと、画面いっぱいに伸びた横罫線が表示されます。 <hr>内に様々なタグを記述する事で<hr>の見た目に変化をもたらす事が出来ます。 <hr>ノーマル <hr width="50%" align="left" >幅50% 左寄せ <hr size="30">太さ30px <hr noshade>平面表示
	CENTER
	次は中央寄せをさせる<center>タグです。あれ？と思った方も居ると思いますが、上記で説明してalign="center"と同じ効果が出ます。ですが、right・left等はcenterと違い、単独で使用する事は出来ません。また、あまり単独での使用はお勧めできないので<p>タグ等にalign属性を持たせ指定する事をお勧めします。次は順番的に<table>タグを説明なのですが、これは少々厄介なため次のページを丸ごと使い説明させていただきます。
	A
	次は<a>タグを説明いたします。これは現ページから他ページ(内部外部問わず)へ移動するためのリンクをはるものです。 <a>タグの内部に<a href="*">と言う要素を追加し、*の部分に移動先のリンクアドレスを記入します(http://www.yahoo.co.jp/やindex.html等) 他にも<a href="mailto:メールアドレス">と記述する事によってメールブラウザを起動させ、宛先を記入したメールアドレスに指定することも可能です。また、このタグは文書以外に画像にも指定する事が可能です。
	IMG
	次は画像を表示させる<img>タグについて説明致します。 <img src="画像リンクアドレス" width="画像横幅" height="画像縦幅" alt="代替文字" border="ボーダーサイズ"> 上記のような要素があります。 src　…　***.jpg　の用に画像へのリンクをはります。 width　…　画像の横幅を指定します。何も指定がなければ原寸大。指定をした場合そちらが優先されます。 height　…　画像の縦幅を指定します。何も指定がなければ原寸大。指定をした場合そちらが優先されます。 alt　…　画像の代替文字を指定します。何らかの原因で画像を表示されない場合、こちらが表示されます。また、一定時間画像の上にマウスポインタを乗せるとこちらの文字が表示されます。 border　…　画像の周りの枠線を指定します。0にした場合、<a>タグで指定してもリンクカラーが表示されません。
	<!-- -->
	今回のサンプルに記述はありませんが、とても便利な要素なので紹介をします。ソースが長くなってしまったり、常に更新したりする部分などを分かりやすくするためにマーキングをするようなものがあります。 <!-- コメント --> と、<!-- -->で囲む事によってホームページ上では表示されないソース内のコメントを書き込む事が出来ます。
	まとめ
	今回はデザインの基礎の部分にふれてみました。今回の部分でホームページを作ってみると、簡単なテキストサイトならもう作成可能になっているはずです。サンプルページでは中心の<table>タグが抜けています。ここは今までより格段にややこしくなります。ですが、残るは<table>のみ！後一歩で完成するので次のSTEPもファイト！

First　＜　Second　＞　Third


	前置き
	では早速ホームページのデザインに入って行こうと思います。ホームページの見た目に反映されるデザインは<body></body>間に記述します。 <body text="#000000" bgcolor="#FFCCFF" background="bg.gif" link="#3333FF" vlink="#6633FF" alink="#FF0000"> <h1 align="center"><font color="#FF33FF">ようこそ私のホームページへ！</font></h1> <p align="center"> <b>こんにちは！<br>初めて作ったホームページだけど見て行ってください！</b></p> <hr size="5" width="50%" align="center"> <center> <table border="1" bgcolor="#FFCCFF" width="500"> <tr><th colspan="2" bgcolor="#FFFFCC"><h2><font color="#333333"><u>コンテンツ</u></font></h2></th></tr> <tr><th><i><font size="+3"><a href="#">Profile</a></font></i></th><td>…自己紹介です</td></tr> <tr><th><i><font size="+3"><a href="#">Diary</a></font></i></th><td>…普段の出来事を書いています</td></tr> <tr><th><i><font size="+3"><a href="#">BBS</a></font></i></th><td>…書き込みしてくださいねー</td></tr> </table> </center> <hr> <p align="right"> 連絡先はこちら。 <a href="mailto:xxx@xxx.com">xxx@xxx.com</a> </p> <center><a href="../../index.html"><img src="../../logo1.gif" width="95" height="95" alt="ONEWEB" border="0"></a></center> </body> この部分です。このタグと言う部分の羅列により見た目がきまっていくんですね。
	H
	では上から順に説明をしていきます。まず初めに表示される<h>タグ。これは文章中の見出しを現します。 <h>の種類は、<h1>から<h6>まであります。数字が小さい物のがホームページ上の大見出しとなり、数字が大きいものほど小見出しに使用します。数字が小さい物の方が、文字が大きくなるのですが、これは後々スタイルシートと言う物を使って制御できるのでここでは気にしなくても大丈夫です。また、画像にも指定する事が可能です。
	ALIGN
	次は<h>タグ内に指定されている、align=""タグです。これは指定した物の水平方向を指定するものです。 alignは使用用途がとても多く、これは必ず覚えておきましょう。 aignの""に指定できる位置は以下の3つなっています。　right　…　右方向　center　…　中央　left　…　左方向
	FONT
	次はFONTタグです。これはHTML内の文字に影響するタグです。 <font *="*"></font>の用に、font要素内に色々な指定をする事が可能です。ただ、次期htmlの記述では<font>タグは廃止され<p>タグがメインになってくるので余りお勧めは出来ません。
	COLOR
	次は、 <font>タグ内に記述されているcolor=""です。これはその名の通り、様々な要素の色を指定する事が出来ます。ここで指定したものは、<body>タグ内のtext=""で指定したものよりも優先されます。
	P
	次は確実にこれからのホームページ作りに必須になるであろうタグ、 <p>タグです。これはタグで囲った部分を一つの段落として取り扱うものです。文章を書いたり画像を貼り付けたりする時は、<p></p>で囲う事が決まりとなっています。 <p>は使わなくとも文章や画像を表示させる事は出来るのですが、今後必ず使わなければいけない時代がくるはずなので今から慣れておく事をお勧めします。また、文字などの前に必須と書いていますが他の<h>タグの様なもので囲われている場合は使わないでください。あくまでは<p>タグは段落取用なのです。
	B
	次は文字の太さを指定する<b>タグです。目立たせたい文字等に使用すると効果的かもしれません。類似タグに<strong>があります。どちらを使用しても特にかわりはありません。 B STRONG
	BR
	次は改行を行う<br>タグです。これもよく使うものなので覚えておきましょう。 <br>タグについては終了タグは必要ありません。また、見た目や高さを変更するために<br>を重複使用する事はお勧めできません。 spacer.gif(透過されている小さいgif画像)の高さを指定して利用したり、スタイルシートでの高さの指定をお勧めします。方法は後ほど記述致します。
	HR
	次は横罫線を現す<hr>タグです。何も指定せずに<hr>を使うと、画面いっぱいに伸びた横罫線が表示されます。 <hr>内に様々なタグを記述する事で<hr>の見た目に変化をもたらす事が出来ます。 <hr>ノーマル <hr width="50%" align="left" >幅50% 左寄せ <hr size="30">太さ30px <hr noshade>平面表示
	CENTER
	次は中央寄せをさせる<center>タグです。あれ？と思った方も居ると思いますが、上記で説明してalign="center"と同じ効果が出ます。ですが、right・left等はcenterと違い、単独で使用する事は出来ません。また、あまり単独での使用はお勧めできないので<p>タグ等にalign属性を持たせ指定する事をお勧めします。次は順番的に<table>タグを説明なのですが、これは少々厄介なため次のページを丸ごと使い説明させていただきます。
	A
	次は<a>タグを説明いたします。これは現ページから他ページ(内部外部問わず)へ移動するためのリンクをはるものです。 <a>タグの内部に<a href="*">と言う要素を追加し、*の部分に移動先のリンクアドレスを記入します(http://www.yahoo.co.jp/やindex.html等) 他にも<a href="mailto:メールアドレス">と記述する事によってメールブラウザを起動させ、宛先を記入したメールアドレスに指定することも可能です。また、このタグは文書以外に画像にも指定する事が可能です。
	IMG
	次は画像を表示させる<img>タグについて説明致します。 <img src="画像リンクアドレス" width="画像横幅" height="画像縦幅" alt="代替文字" border="ボーダーサイズ"> 上記のような要素があります。 src　…　***.jpg　の用に画像へのリンクをはります。 width　…　画像の横幅を指定します。何も指定がなければ原寸大。指定をした場合そちらが優先されます。 height　…　画像の縦幅を指定します。何も指定がなければ原寸大。指定をした場合そちらが優先されます。 alt　…　画像の代替文字を指定します。何らかの原因で画像を表示されない場合、こちらが表示されます。また、一定時間画像の上にマウスポインタを乗せるとこちらの文字が表示されます。 border　…　画像の周りの枠線を指定します。0にした場合、<a>タグで指定してもリンクカラーが表示されません。
	<!-- -->
	今回のサンプルに記述はありませんが、とても便利な要素なので紹介をします。ソースが長くなってしまったり、常に更新したりする部分などを分かりやすくするためにマーキングをするようなものがあります。 <!-- コメント --> と、<!-- -->で囲む事によってホームページ上では表示されないソース内のコメントを書き込む事が出来ます。
	まとめ
	今回はデザインの基礎の部分にふれてみました。今回の部分でホームページを作ってみると、簡単なテキストサイトならもう作成可能になっているはずです。サンプルページでは中心の<table>タグが抜けています。ここは今までより格段にややこしくなります。ですが、残るは<table>のみ！後一歩で完成するので次のSTEPもファイト！

前置き

H

ALIGN

FONT

COLOR

P

B

BR

HR

CENTER

A

IMG

まとめ