ページレイアウトの例

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

 例1.水平線いろいろ
<hr width=300 size=8>

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


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



 例2.文字列の配置

  • <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> と違って空行が1行挿入されます
    <p align=left>テキストを左寄せ</p>
    <p align=center>テキストを中央寄せ</p>
    <p align=right>テキストを右寄せ</p>
    

    テキストを左寄せ

    テキストを中央寄せ

    テキストを右寄せ


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

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



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

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


    戻る