HTML - ボディ部

■ページ目次

ボディの基本
見出し
フォント
物理スタイル
論理スタイル
改行
段落
水平線
整形済テキスト

■ボディの基本

■見出し


 <hN>見出しの内容</hN>, N = 1, 2, ... 6

 <hN align="位置指定"^(*)>見出しの内容</hN>, N = 1, 2, ... 6
                                    位置指定 = "left" | "center" | "right"

         (*) 非推奨属性

■例題

見出しタグを指定した例です。(hn01.html)


 <!-- hn01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ページの内容</h2>         
 <h3>家族</h3>                 
 <h4>ペット</h4>               
 <h5>犬</h5>                   
 <h6>ホイップ</h6>             
 女の子で、誕生日は12月14日です。
 </body>
 </html>

□ 実行結果

Top

■改行


 <br/>

■例題

改行を指定した例です。(linebreak01.html)


 <!-- linebreak01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 女の子で、<br/>
 誕生日は12月14日です。
 </body>
 </html>

□ 実行結果

Top

■段落


 <p>段落の内容</p>

■例題

段落を指定した例です。(paragraph01.html)


 <!-- paragraph01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <p>
     女の子で、誕生日は12月14日です。
 </p>
 </body>
 </html>

□ 実行結果

Top

■水平線


 <hr/>

 <hr size="太さ"^(*)
        width="長さ"^(*)         ... "数値%" を使って、相対的な長さを指定できます。
        align="表示位置"^(*)   ... 表示位置 = "left" | "center" | "right"
        noshade^(*)/>

         (*) 非推奨属性

■例題

水平線を指定した例です。(horizontalrule01.html)


 <!-- horizontalrule01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <hr/>
 <h2>ホイップ</h2>
 <hr size="20" width="50%" align="left" noshade/>
 女の子で、誕生日は12月14日です。
 </body>
 </html>

□ 実行結果

Top

■フォント


 <big>内容</big>

 <small>内容</small>

 <font size="文字サイズ" ... 絶対サイズ: 1, 2, ..., 7; 
                                相対サイズ: -7, -6, ..., -1, +1, +2,  ..., +7
        color="文字色">^(*)
      内容
 </font>

 <basefont size="文字サイズ"
           color="文字色"/>^(*)

         (*) 非推奨要素または属性

■例題

フォントを指定した例です。(font01.html)


 <!-- font01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <font size="6" color="red">女の子</font>で、
         誕生日は<font size="+1" color="blue">12月14日</font>です。
 </body>
 </html>

□ 実行結果

Top

■物理スタイル


 <b>太字</b>

 <i>斜体</i>

 <tt>等幅(タイプライター)</tt>

 <sup>上付添字</sup>

 <sub>下付添字</sub>

 <u>^(*)下線</u>

 <s>^(*)取消線</s>

         (*) 非推奨要素

■例題

物理スタイルを指定した例です。(pstyle01.html)


 <!-- pstyle01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <b>女の子</b>で、誕生日は<u><i>12月14日</i></u>です。
 </body>
 </html>

□ 実行結果

Top

■論理スタイル


 <em>強調</em>

 <strong>強調</strong>

 <cite>引用文</cite>

 <code>ソース･コード</code>

 <dfn>定義</dfn>

 <kbd>キーボード入力</kbd>

 <samp>メッセージ</samp>

 <var>変数</var>

■例題

論理スタイルを指定した例です。(lstyle01.html)


 <!-- lstyle01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <strong>女の子</strong>で、誕生日は<em>12月14日</em>です。
 </body>
 </html>

□ 実行結果

Top

■整形済テキスト


 <pre>内容</pre>

■例題

整形済テキスト内で、改行した例です。(pre01.html)


 <!-- pre01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 <pre>
     女の子で、
     誕生日は12月14日です。
 </pre>
 </body>
 </html>

□ 実行結果

Top