トップ＞HTML講座目次＞

３：文字と画像でページを飾ろう！

　前回は背景とリンクを導入し，いよいよページらしくなってきました。あのまま文をしっかり書けば， 立派なホームページの完成です。でも，何か足りないなあ〜と思っていませんか？例えばこのページでも， タイトルは文字が大きくてまん中に来ていますね。また，たいていのホームページは絵や写真等の画像も載せています。 今回は文字を飾ったり画像を入れたりしてページを飾り，この入門編のフィナーレとしましょう！！！

　さて，まずは文字の大きさを変えてみましょう。これには２つの方法があります。 最初に紹介するのは「見出し」の意味を持つ<H1>などのタグです。

<Hx>〜</Hx>（xには１〜６が入ります）

　HTMLというのは今でこそホームページに使われていますが，そもそもはタグによって文章に意味を持たせるための 物でした。例えば，メール等を打つ時に強調したい所には「」をつけたりしますよね。これも実は無意識に使っている タグと言えるのです。この<Hx>というのは，「ここは（本文じゃなくて）見出しだよ」という意味です。 今はただ文字を脚色するだけのタグ等も出てきていますが，そういう意味ではこのタグは歴史があるのかも知れませんね。
　<H1>から<H6>まであり，数字が小さい方が大きな見出しです。正確には<H1>はタイトル， <H2>は章，<H3>は節，などというようにちゃんと決まりがあるのですが，いまやほとんどただ単に文字を 大きくするためだけに使われてしまっています。
　表示される時はxが小さい程文字は大きくなり，また自動で太字になり前後は改行されます。さらに，そのあとには 空の行が入ります。その為本文中で文字を一時的に大きくしたりするのには使えないと言う問題があります。 以下はサンプルですが，このサンプル中では<BR>を一回も使っていないということを 考えてみてみて下さい。。

<H1>

<H2>

<H3>

<H4>

<H5>
<H6>
　注意点としては，上に書いた通り本来は大きさではなく「見出し」の意味であり，規定には「文字を大きくするタグ」 などとは，どこにもかいてありません。その為ひねくれたブラウザが大きくしなかったとしても 何の不思議もありません（IEやNetscapeは大丈夫ですが・・・）。しかし，見る人の環境によって 見え方が変わってしまうと困りますね。そこで，より確実に文字の大きさを設定できる物を紹介します。

<FONT SIZE="1" COLOR="red">〜</FONT>

　これはただ文字の大きさなどを設定する意味しか持たない「新しい」タグといえます。
　属性を見て見当がついた人もいると思いますが，このタグはサイズだけではなく色も設定できます。 <Hx>とは違って文字のスタイルを設定するためのタグなので，よけいな改行は入りません。
　では，属性の説明です。
属性入る値のタイプ説明
SIZE1〜7文字の大きさを設定します
(または)±1〜6文字の大きさを「標準よりどれくらい大きいか小さいか」で設定
COLOR色名テキストの色を決めます。
　もう一つ属性としてフォントを変えられる物もあるのですが，不特定多数の人がいろいろなパソコンから見るのですから 使うべきではありません。（よく「MSゴシック」とか入力してMacユーザーを泣かせてくれるものがあります）
　注意点としては，文字の大きさは数字が大きいほど大きいという事です。<Hx>とは逆なので 注意して下さい。普通に1〜7で設定するのが一番簡単です。ちなみに何も設定しないと3になっています。 （デフォルトを変えられるタグもありますが・・・）そしてちょっと不思議なのが±。これは早い話， デフォルトの3からどれくらい離れているかです。例えば「+2」とすると，デフォルトを変えていなければ ５になります。ちなみに「+6」とかにしても７より大きくはなりませんし，勿論１より小さくもなりません。 こんな物が何の為にあるのかについては，下のコラムを見て下さい。
　色の設定の仕方は背景と全く同じです。例えば・・・
<FONT SIZE="1" COLOR="red">こんな感じ</FONT>と打てば こんな感じとなります。

　では結局<Hx>と<FONT>のどっちがいいのか。先ほども言った通り<Hx>には「大きくする」意味は ないので<FONT>の方が確実ですが，勝手に太字と改行がもれなくついてくる<Hx>の方が タイトルとかをつけるのには便利ですね。私もタイトルなどで愛用しています。

　文字には大きさだけでなく，ワープロと同じく太字・斜体・下線の三点セットが使えます。 設定するタグもMS Wordなどと表記が同じで「<B>・<I>・<U>」と なっています。例えば・・・
　<U>こんな感じ</U>と打てばこんな感じとなります。

　さらに良く使われるのが<CENTER>タグです。その名のとおりこのタグで囲まれた文や絵は まん中揃えになります。例えば，このページのタイトルもCENTERでまん中に表示しています。

　ここまでできれば文章は飾り放題です♪しかし，使い過ぎると見にくくなるのは目に見えていますから 読みやすいページを心掛けましょう。だいたい初心者はよけいな修飾をつけ過ぎて見苦しいページにしてしまう 傾向があります。自分の技術に酔いしれる前にブラウザで表示させてデザインを要チェック！！
（ついでですが，↑この線は<HR>タグです。終了タグはありません。属性は・・・今は無視（爆）
　さて，私のページでもトップページではロゴの画像を載せています。ホームページに写真や絵をのせるのは， これまたとっても簡単です。HTMLは単なるテキストなので，画像は違うファイルとして保存しておいて HTML内にはタグで画像ファイルへのリンクを貼るような形になります。リンクとはいっても，<A>タグだと 画像が別ページで開いてしまいます。ここでは画像をページ内に張り付けられる<IMG>タグを紹介します。

<IMG SRC="http://xxx.com/xxx.gif" WIDTH="100" HEIGHT="80">

　終了タグはありません。これ以外にも物凄い数の属性がありますが，重要な物を紹介します。
属性入る値のタイプ説明
SRC画像のURL表示する画像を設定
ALT文画像が表示できない時にかわりに表示する文を設定
WIDTH数字or％画像の横幅を設定
HEIGHT数字or％画像の高さを設定
ALIGN(下で詳しく解説)次の文をどこから始めるか設定
　なんか見た感じややこしいですねえ・・・（汗）。しかし，ひとつひとつ理解していけば実は そんなに難しくありません。あきらめて帰らずに以下を読んでみて下さい。
　まず，「SRC」は説明するまでもないでしょう。画像ファイルの位置なのですが，リンクの時と同じく 同じフォルダ内ならファイル名だけでOKです。
　「ALT」も上の説明の通りです。中には画像を表示しないテキストブラウザもありますので，必須ではないですが つけておく事をお勧めします。また，目の見えない方が音声でホームページを読むときには，画像の部分では ここで設定した文章が読み上げられるので，そこら辺も考えるとなお良いでしょう。
　「WIDTH・HEIGHT」を使うと，画像を拡大縮小できます。設定しないと原寸大となりますが，原寸大表示にしたい時も サイズが分かっていれば一応書く事をお勧めします。パーセントで設定する事もできますが， この場合はウィンドウサイズが100%になります。画像の元のサイズではないので注意して下さい。 正直あまり役に立ちません（笑）

　一番ややこしいのが「ALIGN」です。これはもうサンプルで見てもらうしかありません。<IMG>タグのALIGN属性を 変えて，「画像とテキストの関係は，ALIGN属性で決まるのであります。テキストの回り込み方に注目するのであります。」 という文章を続けています。

ALIGN="top"の場合
画像とテキストの関係は，ALIGN属性で決まるのであります。 テキストの回り込み方に注目するのであります。

ALIGN="middle"の場合
画像とテキストの関係は，ALIGN属性で決まるのであります。 テキストの回り込み方に注目するのであります。

ALIGN="bottom"の場合
画像とテキストの関係は，ALIGN属性で決まるのであります。 テキストの回り込み方に注目するのであります。

ALIGN="left"の場合
画像とテキストの関係は，ALIGN属性で決まるのであります。 テキストの回り込み方に注目するのであります。

ALIGN="right"の場合
画像とテキストの関係は，ALIGN属性で決まるのであります。 テキストの回り込み方に注目するのであります。

　違いがわかりますか？画面が大きい人はウィンドウの幅を狭くして，文章を折り返させて下さい。 上の3つは1行しか画像の横に来ませんが，下の2つは画像の左右にずっとその後の文章が続きます。 上3つの使い道がわからんという方もいるかも知れませんが，要するに画像を一つの文字のように扱っているわけです。 例えばフォントに入っていない難しい漢字などを表示させたい場合は，その漢字を画像で保存しておいてその文字の 欲しい所に<IMG>で挿入すればOKです。例えばALIGNをbottomにすると こんな感じになります。
下2つについては見れば分かると思いますが，画像を資料として扱いたい場合にはこちらを設定した方が 良いと思います。もし画像の横を終わりにして画像の下から文章をはじめたくなったら・・・ そんな時には<BR>タグに属性を指定します。

<BR>

　改行のかわりでしかなさそうなこのタグにも属性が一つあったのですね。
属性入る値のタイプ説明
CLEARall,left,rightIMGタグによる文の回り込みを解除
　left,rightを設定するとALIGNの設定と一致する回り込みしか解除してくれません。 取りあえずは，全てallを指定しちゃっても良いでしょう。left,rightは，画像を左右に配置して本格的なページを 作る時に効果を発揮します。

　では，今回もサンプルを作ってみましょう。盛り沢山の内容だったのでこんがらがっているかも知れませんが， サンプルを作りながら復習です。「このタグ何？」と思ったら前に戻って確認し，自分の物にしましょう。
<HTML>
<HEAD>
<TITLE>サンプル３号</TITLE>
</HEAD>
<BODY BGCOLOR="black" TEXT="white" LINK="lightgreen" ALINK="red" VLINK="purple">
<CENTER><H1>サンプルのページ！！</H1></CENTER>
　テキストは<FONT SIZE="6">大きく</FONT>したり，<I>斜めに</I>したり，
<FONT COLOR="red"><B>血染めに</B></FONT>したり・・・？<BR><BR>

<IMG SRC="sample.gif" ALIGN="right">これはサンプルな絵です。<U>ただそれだけ</U>です。</A>
<BR CLEAR="all">

<IMG SRC="sample.gif" WIDTH="50" HEIGHT="400">びよ〜ん♪<BR>
</BODY>
</HTML>
　ここまで打てたら保存しますが，ファイル名は「sample3.htm」にしておきましょう。そして， 画像を適当に作り「sample.gif」の名前でGIFファイルで保存。ソフトがない人や良くわからない人は， 上の「SAMPLE PICTURE」と書いてある絵をダウンロードして下さい。やり方は：
　・Windowsなら画像の上で右クリック
　・MacOSなら画像の上でControl+クリック
　出てきたメニューから「画像のダウンロード」を選び保存して下さい。
　sample.gifは必ずsample3.htmと同じフォルダに入れ， 　ブラウザで「sample3.htm」を見てみましょう。こんな感じになるはずです。

※注：ネット上の画像には著作権があります。自分のページを公開する場合は，他のページからとってきた画像の 使用は控えるべきです。（勿論使うために公開されている素材集等もありますが，規約をよく読んで使いましょう）

　どうだったでしょうか。ここまでできればもう立派なホームページが作れます。あとはあなたのデザイン力と創作力です。 ホームページで大事なのはオリジナルなコンテンツであり，HTMLはそれを表現するための手段に過ぎないのです。 せっかく世界に公開されるホームページ，みんなが見たくなるような情報をきれいに飾って素晴しい物を作ってみましょう！

コラム：デフォルトのフォントサイズを変えちゃおう
　何も設定しないと３になる文字の大きさ。小さすぎるとか大きすぎるという人は，これを 勝手に変える事ができます。ここで出てくるタグが<BASEFONT>です。

<BASEFONT SIZE="4">

　終了タグはありません。終了したくなったらSIZE="3"に設定し直して下さい。 これを使うと，このタグのあとのデフォルトのフォントがSIZE属性になります。 SIZE属性の中身は1〜7です。
　こうした時に役に立つのが<FONT>タグの±です。BASEFONTを何にしていたかに関係なく 大きくしたい時は+，小さくしたい時は-をつければ良いというわけです。以下はサンプルです。
	
<FONT SIZE="+1">ここのサイズは4になります。</FONT>

<BASEFONT SIZE="5">

<FONT SIZE="+1">ここのサイズは6になります。</FONT>
　±の存在理由はこういうわけだったのですね。
　これで入門編は終わりです。できたページを一般公開する方法は要望があれば載せたいと思います。 次は応用編として，さまざまなタグの紹介を中心に書いていきたいと思います。 おつきあいいただきありがとうございました。m(_ _)m
＞戻る