08 画像の左・右寄せ


　このページでは画像を画面の左右に寄せて表示してみましょう。

  1. index.html をダブルクリックしてページを表示します。

  2. 「メニューバー」の「表示」→「ソース」とクリックをして、→「ソース」を表示します。

  3. <CENTER><IMG SRC="gazou.jpg"></CENTER> の <CENTER> と </CENTER> を削除します。

  4. 画像を画面の左に寄せて表示したい場合は ALIGN="LEFT" を用い、 <IMG SRC="gazou.jpg" ALIGN="LEFT">>のように記述します。

  5. 　右に寄せて表示したい場合は <IMG SRC="gazou.jpg" ALIGN="RIGHT"> と記述します。

    ここでは画像を右に寄せて表示しましょう。


    <HTML>
    <HEAD>
    <TITLE>初めてのホームページ</TITLE>
    </HEAD>
    <BODY BACKGROUND="wallpaper.gif">
    <CENTER><FONT SIZE="6" FACE="ＭＳ 明朝" COLOR="#FF0000"><B><I>私のホームページ</I></B></FONT></CENTER><BR><BR><BR>
    <IMG SRC="gazou.jpg" ALIGN="RIGHT" ><BR><BR>
    <FONT SIZE="3" FACE="ＭＳ ゴシック" COLOR="#0000FF">この写真はフィリピンのセブ島沖に浮かぶ小さな島です。<BR>周りは穏やかな珊瑚礁の海に囲まれひっそりと佇んでいます。<P>あなたをこの美しい南の海へご案内しましょう。</FONT>
    </BODY>
    </HTML>


  6. 入力が終わったら、→「ファイル」→「上書き保存」とクリックして、→「メモ帳」を閉じます。

  7. ブラウザの「更新」アイコンをクリックします。右寄せされて表示されましたか？
    文字が画像の横に表示されていますね。
  • ALIGN="　" を使うと画像の周りに文字が回り込みます。

    左寄せの場合は ALIGN="　" を使わなくてもＯＫですが、文字が画像に回り込みません。

  • 画像に対して文字が回り込まないようにするには
    <IMG SRC="gazou.jpg" ALIGN="RIGHT"> の後に <BR CLEAR="ALL"> と記述します。

    <IMG SRC="gazou.jpg" ALIGN="LEFT"><BR CLEAR="ALL">