カスタム検索

リスト形式

文書ではリスト形式での表示もよく使用されます。

<ul>と<li>タグ

リスト形式で表示するには、<ul><li>タグを使用します。

list.html
<html>
    <head>
        <title>サイト作成で用意するもの</title>
    </head>
    <body>
        <h1>サイト作成で用意するもの</h1>
        <p>用意するものは以下の通りです。
        </p>
        <ul>
            <li>テキストエディタ</li>
            <li>ウェブブラウザ</li>
            <li>画像編集ソフト</li>
        </ul>
    </body>
</html>

<ul>タグでリスト形式であることを定義し、<li>タグで各項目を定義します。項目の数だけ<li>タグを使用します。<ul>タグで<li>タグをネストすることになります。

通常、多くのブラウザでは各項目の先頭に黒丸を付加します。

番号つきリスト

番号付きリストにするには、<ul>の替わりに<ol>を使用します。

number_list.html
<html>
    <head>
        <title>ウェブページ作成の流れ</title>
    </head>
    <body>
        <h1>ウェブページ作成の流れ</h1>
        <ol>
            <li>テキストエディタでHTMLファイルを作成</li>
            <li>ブラウザでHTMLファイルを開く</li>
            <li>必要に応じてテキストエディタで編集し、2の手順へ</li>
        </ol>
    </body>
</html>

<li>は<ul>、<ol>共通で使用されます。<ol>を使用した場合、<li>で指定した項目の数だけ自動で数字を増やして表示します。

まとめ
  • <ul>でリスト形式を定義する
  • <ol>で番号付きのリスト形式を定義する
  • <li>でリストの各項目を定義する
CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡