11 レイアウトの修正


 このページでは全体のレイアウトを修正しましょう。修正するのは3箇所です。

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

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

  3. マーキーの上の間隔を1行分詰める。

    <MARQUEE> の前の <BR> を1個削除します。

  4. ページの左右にスペースを設ける。

    左右にスペースを設ける部分を <BLOCKQUOTE> </BLOCKQUOTE> で囲います。

  5. 文字と画像との横間隔を広げる。

    HSPACE="10" を入れて、
    <IMG SRC="gazou.jpg" ALIGN="RIGHT" HSPACE="10"> とします。



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




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

  7. ブラウザの「更新」アイコンをクリックします。少しは良くなりましたか?
<BLOCKQUOTE><BLOCKQUOTE>複数並べて用いることができます。</BLOCKQUOTE></BLOCKQUOTE>