ページレイアウトの例

赤い文字がHTMLコード，続いてブラウザの表示結果が表示してあります。

　例１．水平線いろいろ
<hr width=300 size=8>

<hr width=50% size=10 align=left>

<hr width=80% size=10 align=right noshade>


　例２．文字列の配置

  • <div> タグ 
    <div align=left>テキストを左寄せ [align=left]</div>
<div align=center>テキストを中央寄せ [align=center]</div>
<div align=right>テキストを右寄せ [align=right]</div>
    テキストを左寄せ [align=left]
    テキストを中央寄せ [align=center]
    テキストを右寄せ [align=right]

  • <p> タグ　　<div> と違って空行が１行挿入されます 
    <p align=left>テキストを左寄せ</p>
<p align=center>テキストを中央寄せ</p>
<p align=right>テキストを右寄せ</p>

    テキストを左寄せ

    テキストを中央寄せ

    テキストを右寄せ

  • <center> タグ　　複数行に渡る設定も可能です 
    <center>
文字列をセンタリング<p>
広範囲にセンタリングできます<br>
</center>
    文字列をセンタリング

    広範囲にセンタリングできます



    　例３．整形済みテキスト
    <pre>
整形済みテキストを使うと
    こんなふうに
    書いた通りに
        表示されます。
</pre>

    整形済みテキストを使うと
    こんなふうに
    書いた通りに
        表示されます。
    　例４．引用文

    <blockquote>
    BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。
    </blockquote>
    BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。BLOCKQUOTE を使うとこのように，テキストの左右がインデントされます。

    戻る