| 表の幅を比率で決める |
ではさっそく、次の例題５をクリックして画面に出してください。
新しいウインドウが開いたでしょう。
次に、例題５のウインドウ内にマウスを置き、右クリック → ソースの表示 をクリック。
例題５のhtmlが見えたでしょうか？（この見方はパート２で説明しましたよね）
できない方は、もう一度やり直してくださいね。絶対にできますから・・・
この３つのウインドウができるだけ同時に見えるようにそれぞれ幅を狭くしましょう。
例題５をご覧いただくとわかるように、表の幅を比率で指定してます。
これは、今皆さんが見ているブラウザーの幅に対しての比率なのです。
この場合、ブラウザーの幅を広くしたり、狭くしたりしても、そのブラウザーの表示幅に対する
比率で表の幅が決まってくるのです。
試しにウインドウ幅を変えてみてください。
広くしても狭くしても同じ比率で変化するのがわかりますよ。
ここで注意しなければいけないのは、画面サイズと表示内容には余裕を持たせる ということが
大切です。
理由は、最近の画面サイズは横幅1,024ピクセルあたりが一般的ですが、まだまだ800ピクセルという
以前の表示サイズを利用されてる方も少なくないからです。
これは自分の画面サイズが1,024ピクセルでページを作っていると、800ピクセルの方が見ると
幅が狭くなるので、思いがけないところで文字などが改行されてしまい、見るに耐えない状況
になるからです。
だから、表の比率を指定す時は、少し多めに指定し、表の中の1行当たりの文字は少なめに
することが好ましいと言えます。
タグは以下のとおりで TABLE の中に WIDTH=XX% と指定します。（XXは数字で比率を指定）
<TABLE WIDTH=XX%>
なお、例題で１００％を指定していても、指定がなければ両端は空いてます。
これを本来の１００％にするには、左側はLEFTMARGIN=0、右側はRIGHTMARGIN=0 というタグを
BODY の中に記入すれば空白はなくなります。
|
|
| 表の幅をピクセル数で指定する |
例題６を見てください。
今度は、比率で指定するのではなく、絶対値でしてします。
比率の時にしたように、ウインドウの幅を変えてみてください。
今回は、ウインドウの幅には関係なく、表の幅が固定されてるのがわかりますよね。
ここでも注意点は比率の場合と同じですが、まだまだ800ピクセルの方もいますので
表の幅は800ピクセル未満で指定しましょう。
タグは以下のとおりで TABLE の中に WIDTH=XX と指定します。
<TABLE WIDTH=XX>
絶対値で指定した場合、表の幅よりウインドウサイズが小さければ、横のスクロールバー
がウインドウの下に出てきます。
比率も絶対値も <TD> で同じように指定ができます。
表の中で幅を何も指定しなければ、コンピューターが勝手に解釈して
体裁が悪くなったりしますので、これらの指定を上手に利用しましょう。
|
|
|
別のアドレスにリンクする |
さあ、表はこれくらいにしておかないと、皆さん飽きてきますよね。
今度は、自分の別のページや他のページに移るタグを説明しますね。
例題７を見てください。
タグは、簡単です。
<A HREF="リンクするhtmlの名前.html">コメント</A >
とすれば、コメントのところにマウスを置いてクリックすれば指定したHTMLに
リンクします。
この時、現在のHTMLと同一フォルダーにリンクするHTMLがある場合は、"HTML名.html"
とするだけでＯＫですが、同一フォルダ以外の場合は、指定が必要となってきます。
|
|
| 画像を表示するには |
ホームページ上で取扱える画像のタイプは一般的に ＪＰＧ（jpg ジェイペグ）、
ＧＩＦ（gif ジーアイエフまたはジフ）、最近では、ＰＮＧ（png ピング）が
あることは以前にお伝えしましたね。
では、これらの画像を表示するには、以下のようなタグを使います。
<IMG SRC="画像名.ファイルタイプ"> （ファイルタイプはjpg gif png）
とします。簡単でしょ。
|
|
| 画像リンクにする |
みなさん経験済みと思いますが、画像ボタンなどをクリックすると
別のページリンクできるはご存知ですよね。
リンクする箇所が文字ばかりではちょっと味気ないもの・・・
その方法は、以下の通りです。
<A HREF="リンクするhtmlの名前.html"><IMG SRC="画像名.ファイルタイプ" BORDER=0></A>
上のテキストリンクと見比べていただくとよくわかりますよね。
ここで注意することは、BORDER=0 としていますが、これは指定のない画像リンクは
画像のまわりにラインが付加され、リンクできる画像であることを一目で区別できます。
しかし、一般的には、このボーダーが付加されるとせっかくの画像のイメージが悪くなる
（見栄えだけですが）ので、そのボーダーをなくすために BORDER=0 と指定します。
今回は、この辺で終わりにしましょう。
ちょっとは変化もあり、簡単だったと思いますが・・・
とにかく何回も復習ですよ。それでは、また次回をお楽しみに！
|
|
