HTML 入門トップページ


目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
    1. 段落を作る
    2. 改行する
    3. 見出しの設定
    4. 文字スタイルの変更(太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル)
    5. 箇条書き
    6. 表を配置する
    7. 画像を配置する
    8. リンクを設定する
    9. 特殊文字を表示する
  4. HTML 文書を検証してみよう
  5. スタイルシート
  6. フォームを使ってみよう
  7. 参考サイト

基礎的なタグをマスターしよう

箇条書き

HTML では次の3種類の箇条書きが利用できます.

  1. 箇条書き
  2. 番号付きの箇条書き
  3. 定義リスト

通常の箇条書きを利用するには,箇条書き全体を <ul> ... </ul> で囲い,その中に箇条書きの各項目を <li> ... </li> で囲って記述します.各項目の先頭には「・」記号が自動的に付くようになります.

index.html(抜粋)
<ul>
  <li>経営学部</li>
  <li>法学部</li>
  <li>現代社会学部</li>
</ul>

ブラウザでの表示結果

  • 経営学部
  • 法学部
  • 現代社会学部

番号付き箇条書きを利用するには,箇条書き全体を <ol> ... </ol> で囲い,その中に箇条書きの各項目を <li> ... </li> で囲って記述します.各項目の先頭には番号が自動的に付くようになります.

index.html(抜粋)
<ol>
  <li>経営商学コース</li>
  <li>会計コース</li>
  <li>経営情報科学コース</li>
</ol>

ブラウザでの表示結果

  1. 経営商学コース
  2. 会計コース
  3. 経営情報科学コース

定義リストを利用するには,全体を <dl> ... </dl> で囲い,その中に箇条書きの見出しを <dt> ... </dt> で,詳細を <dd> ... </dd> で記述します.表示例のように, <dt> ... </dt> の内容は太字で表示されます.

index.html(抜粋)
<dl>
  <dt>入門演習</dt>
  <dd>1年生前期のゼミ</dd>
  <dt>基礎演習</dt>
  <dd>2年生のゼミです.</dd>
</dl>

ブラウザでの表示結果

入門演習
1年生前期のゼミ
基礎演習
2年生のゼミです.