前のページ
HTML入門の表紙へ
次のページへ


4．絵も欲しいよね

〜 ヘアライン、絵の貼り方と背景 〜


4-1. スパッとヘアライン

ホームページには、よくこんな風に

っと水平線が入っています。これをヘアラインといいます。

ヘアラインはただ、

<HR>

とやるだけで引けます。

また、次のようなオプション指定を使えばさまざまな線を引くことができます。

指定 意味
<HR SIZE=？> 太さの指定 （ピクセル）
<HR WIDTH=？> 長さの指定 （ピクセル または ％）
<HR ALIGN=？> 表示位置の指定 （left, center, rightのどれか）
<HR NOSHADE> 塗りつぶし指定
※ これらは組み合わせて指定することができます。

［使用例はここ］


4-2. 画像のいろいろ

ホームページで扱える画像の形式には二種類あります。
一つはファイル名の最後か ".gif" で終わる形式、もう一つは ".jpg"（または".jpeg"）で終わる形式です。

これらはそれぞれ、

  • gif
    イラストなどの色数の少ない画像に適しています。

  • jpg （jpeg）
    写真など色数の多い画像に適しています。
といった特徴があります。

今日の授業ではこれらの画像を自分で作成する方法はやりませんが、インターネット上ではいろいろな「素材集」を手に入れることができますので、それを活用するのも良いでしょう。


4-3. 絵っ

画像は、

　　<IMG SRC="ファイル名 ">

で貼りつけます。

たとえば、元のhtmlファイルと同じフォルダに "run.gif" という画像があるときには、

<IMG SRC="moheji.gif">

とやるだけで、

へのへのもへじ

と、表示されます。


4-4. ファイルの位置指定について

さっきの画像ファイルは html ファイルと同じフォルダにあったので、そのまま "run.gif" と指定することができましたが、画像ファイルが上や下のフォルダにあることもあります。そのときには、
  • 上のフォルダにあるとき
    一つ上のフォルダにのぼるには ../ を使って、

    "../run.gif"

  • 下のフォルダに入っているとき
    たとえば "gif" というフォルダに入っているときは

    "gif/run.gif"

と指定します。


4-5. ここらで背景

背景色の指定は「2-1. ホームページのおまじない」ででてきた <BODY> タグの中で BGCOLORオプションを使って行います。

<HTML>
<HEAD>
<TITLE> タイトル </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFDD">
 ・
・
・
本文

・
・
・
</BODY>
</HTML>

色の名前はフォントのときと同じ形式なので、「3-4. 色もいろいろ」を参照してください。


また、背景に画像を貼る（壁紙にする）こともできます。

壁紙を指定するには BACKGROUNDオプションを使います、

<HTML>
<HEAD>
<TITLE> タイトル </TITLE>
</HEAD>
<BODY BACKGROUND="moheji.gif">
 ・
・
・
本文

・
・
・
</BODY>
</HTML>

壁紙は文字色との兼ね合いも考えて選ばないと、[こういうこと]になってしまいます。


4-6. こんなんできましたけど その3

これを使ってさっきの noRiのページを飾ってみると、

<HTML>
<HEAD>
<TITLE> noRiのホーム </TITLE>
</HEAD>
<BODY BACKGROUND="honobono.gif">
<BR>
<BR>

<CENTER>
<H1>
noRiのぺーじ <IMG SRC="moheji.gif">
</H1>
</CENTER>

<HR>
<BR>
<BR>

まだ<B>なんにも</B>ないから、<FONT SIZE=5 COLOR="hotpink">あんまりじろじろ見ないでね。</FONT> <P>

<FONT SIZE=2> （誰も見ないか・・・） </FONT> <P>

</BODY>
</HTML>

これを表示すると ［このとおり］
(ブラウザの［戻る］ボタンで戻ってきてください）

う〜ん、見ちがえるようになりましたね。とりあえずこれで表紙はよしとしましょう。

「2-5. わたしのホームはここです」で説明したとおり、表紙（ホーム）は"index.html" という名前で保存します。

なんとか表紙（らしきもの） をつくることができました。

つぎはこの表紙に、自己紹介のページをリンクさせてみましよう。


前のページ
HTML入門の表紙へ
次のページへ