## HTMLの基本テクニック

トップ > ホームページ入門 > HTMLの基本テクニック

#### ■ 目次

- 章や段落を設けるには
- 太字にするには
- 斜体文字にするには
- 文字の大きさを変えるには
- 文字の色を変えるには
- フォントを変更するには
- 改行するには
- リスト書きするには

#### ■ 章や段落を設けるには

文書を章や段落で構成させる場合には、次のように記述します。

    <html>
    <head>
    <title>ホームページの練習</title>
    </head>
    <body>
    <h1>第一章 入門編</h1>
    <h2>1.1 ブラウザとは</h2>
    <p>ブラウザとは本をパラパラ・・・</p>
    <h2>1.2 HTMLとは</h2>
    <p>HTML とは HyperText Markup Language の略で・・・</p>
    </body>
    </html>

これをブラウザで表示させると次のようになります。

    第一章 入門編

    1.1 ブラウザとは

    ブラウザとは本をパラパラ・・・

    1.2 HTMLとは

    HTML とは HyperText Markup Language の略で・・・

<h1>〜</h1> で囲まれた部分が章の表題を表わします。数字は表題のレベルで、1〜6まで指定できます。

<p> は paragraph の略で、各段落の始まりを表わします。</p> は省略することも可能ですが、省略した場合に動作が異なることがあるので、省略しない方がオススメです。

#### ■ 太字にするには

太字にするには <b>〜</b> を用います。

    テキストの一部分を<b>太字</b>にします。

これをブラウザで表示すると次のようになります。

    テキストの一部分を太字にします。

#### ■ 斜体文字にするには

斜体文字にするには <i>〜</i> を用います。

    テキストの一部分を<i>斜体文字</i>にします。

これをブラウザで表示すると次のようになります。

    テキストの一部分を斜体文字にします。

#### ■ 文字の大きさを変えるには

文字の大きさは <font size=...>〜</font> で指定します。サイズには 1〜7 の値を指定できます。

    テキストの一部分を<font size=5>大きな文字</font>にします。

これをブラウザで表示すると次のようになります。

    テキストの一部分を大きな文字にします。

SIZE="+2" とすると、現在の大きさよりも 2レベル分大きな文字にします。

    テキストの一部を<font size="+2">大きな文字</font>にします。

<font size="+1">の代わりに <big>〜</big> や <small>〜</small> を用いることもできます。

もっと大きな文字は、スタイルシート という機能を用いて指定することが可能です。

#### ■ 文字の色を変えるには

文字の色は <font color=...>〜</font> で指定します。指定できる色については「とほほの色入門・色見本」を参照してください。

    テキストの一部分を<font color=red>赤い文字</font>にします。

これをブラウザで表示すると次のようになります。

    テキストの一部分を赤い文字にします。

#### ■ フォントを変更するには

フォントを変更するには <font face=...>〜</font> を用います。

    テキストの一部分を <font face="ＭＳ 明朝">明朝体</font> にします。

これをブラウザで表示すると次のようになります。

    テキストの一部分を 明朝体 にします。

#### ■ 改行するには

HTML文書のテキストの改行は通常、ひとつの空白文字に変換されてしまいます。自分の好きな位置で改行するには <br> を用います。

    テキストのここで<br>改行します。

これをブラウザで表示すると次のようになります。

    テキストのここで
    改行します。

改行を禁止するには <nobr>、HTML文書の改行や空白をそのまま表示するには <pre> を用います。

#### ■ リスト書きするには

リスト書きするには <ul>〜</ul>、<ol>〜</ol>、<dl>〜</dl> を用います。

    <ul>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    </ul>

    <ol>
    <li>さしすせそ</li>
    <li>たちつてと</li>
    </ol>

    <dl>
    <dt>HTML</dt>
    <dd>HTMLとは・・・</dd>
    <dt>JavaScript</dt>
    <dd>JavaScriptとは・・・</dd>
    </dl>

これをブラウザで表示すると次のようになります。

- あいうえお
- かきくけこ

1. さしすせそ
2. たちつてと

HTML
  HTMLとは・・・
JavaScript
  JavaScriptとは・・・

Copyright (C) 1997-2002 杜甫々
初版：1997年3月30日、最終更新：2002年3月3日
http://www.tohoho-web.com/wwwbeg3.htm