HTML入門:リストの作成

    • このページをはてなブックマークに追加

    公開日:2016年08月15日 最終更新日:2019年09月12日

    HTML文書でリストを作成する方法を解説します。HTML文書は見出しと段落で構成されますが、内容に応じてリスト表示すると情報が整理され分かりやすくなります。本コラムでは箇条書きリストと番号付きリストを表示するタグについて説明しますので、サンプルを元に自身のPC上でHTMLタグを記述しブラウザーで表示を確かめてみて下さい。

    目次

    1. 箇条書きのリストを作成する【<ul><li>~</li></ul>】タグ

    箇条書きのリストを作成する場合には【<ul>】タグの中に【<li>】タグを追加すると自動で「●」マークがつき各項目がリスト表示されます。"<ul>"は「unordered list」の略で順番で整列されていないリストの事です。"<ul>"は「list」の略で項目の意味です。

    ●基本書式

    list.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset=”utf-8″>
    <title>HTML入門-リストの作成</title>
    </head>
    <body>
    <h1>リストを作成しよう!</h1>
    <ul>
    <li>箇条書きリスト1</li>
    <li>箇条書きリスト2</li>
    <li>箇条書きリスト3</li>
    </ul>
    </body>
    </html>

    ●ブラウザーの表示

    html_list1

    ▲ページトップへ戻る

    2. 番号付きのリストを作成する【<ol><li>~</li></ol>】タグ

    番号付きのリストを作成する場合には【<ol>】タグの中に【<li>】タグを追加すると項目の先頭に連番の数字が表示されます。"<ol>"は「ordered list」の略で順序付けられた項目です。

    ●基本書式

    list2.html

    <body>
    <h1>リストを作成しよう!</h1>
    <ol>
    <li>番号付きリストです</li>
    <li>番号付きリストです</li>
    <li>番号付きリストです</li>
    </ol>
    </body>

    ●ブラウザーの表示

    html_list2

    ▲ページトップへ戻る

    3. リストの入れ子構造

    リストを入れ子構造にして表示することも可能です。

    ●入れ子の基本書式

    list3.html

    <body>
    <h1>リストを作成しよう!</h1>
    <ul>
    <li>箇条書きリスト1
    <ol>
    <li>箇条書きリスト1の項目1</li>
    <li>箇条書きリスト1の項目2</li>
    <li>箇条書きリスト1の項目3</li>
    </ol>
    </li>
    <li>箇条書きリスト2
    <ol>
    <li>箇条書きリスト2の項目1</li>
    <li>箇条書きリスト2の項目2</li>
    <li>箇条書きリスト2の項目3</li>
    </ol>
    </li>
    </ul>
    </body>

    ●ブラウザーの表示

    html_list3

    「list3.html」のサンプルでは、箇条書きリスト(<ul>~</ul>タグ)の各項目(<li>~</li>タグ)中に番号付きリスト(<ol>~</ol>タグ)を入れ子構造にしてます。HTMLでは入れ子構造はよく使われます。始めのうちは慣れないかもしれませんが、「入れ子」の基本的な構造はHTMLの基礎としてしっかりと身に付けておきましょう。

    ▲ページトップへ戻る

    4. リストのデザイン

    箇条書きリストは通常は黒丸「●」が頭に付きますが、このマーカーのスタイルを変更したり非表示にすることができます。

    4.1 マーカーを白丸に変更する【list-style-type:circle】

    スタイル属性の「list-style-typeプロパティ」でマーカーの種類を変更が可能です。

    ●白丸マーカーの基本書式

    list4.html

    <body>
    <h1>リストを作成しよう!</h1>
    <ul style="list-style-type: circle">
    <li>白丸のリストです</li>
    <li>白丸のリストです</li>
    <li>白丸のリストです</li>
    </ul>
    </body>

    ●ブラウザーの表示

    html_list5

    ▲ページトップへ戻る

    4.2 マーカーを四角に変更する【list-style-type:square】

    ●四角マーカーの基本書式

    list4.html

    <body>
    <h1>リストを作成しよう!</h1>
    <ul style="list-style-type: square">
    <li>黒四角のリストです</li>
    <li>黒四角のリストです</li>
    <li>黒四角のリストです</li>
    </ul>
    </body>

    ●ブラウザーの表示

    html_list7

    ▲ページトップへ戻る

    4.3 マーカーを非表示にする【list-style-type:none】

    ●非表示マーカーの基本書式

    list4.html

    <body>
    <h1>リストを作成しよう!</h1>
    <ul style="list-style-type: none">
    <li>非表示マーカーのリストです</li>
    <li>非表示マーカーのリストです</li>
    <li>非表示マーカーのリストです</li>
    </ul>
    </body>

    ●ブラウザーの表示

    html_list6

    ▲ページトップへ戻る

    4.4 マーカーを漢数字にする【list-style-type:cjk-ideographic】

    ●漢数字マーカーの基本書式

    list4.html

    <body>
    <h1>リストを作成しよう!</h1>
    <ul style="list-style-type: cjk-ideographic">
    <li>漢数字のリストです</li>
    <li>漢数字のリストです</li>
    <li>漢数字のリストです</li>
    </ul>
    </body>

    ●ブラウザーの表示

    html_list8

    その他にも小文字ローマ数字「lower-roman」、大文字ローマ数字「upper-roman」、先頭に0がついた算用数字 「decimal-leading-zero」、小文字アルファベット「lower-latin」、大文字アルファベット「upper-latin」などがありますので、プロパティを変更して表示を確認してみて下さい。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【プロジェクトマネージャー】1億4千万ユーザーのアプリ開発/O2Oソリューション

    スマートフォンアプリ向けの自社プロダクトFANSHIPを用いた大規模案件の プロジェクトマネジメント業務...

    株式会社アイリッジ

    正社員

    【JavaScript】アプリケーションエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【Scala/Ruby】サーバーサイドエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【リーダーポジション】国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)のサービスサイトおよび基幹システムの開発業務 - テックリード - 開発案件...

    夢の街創造委員会株式会社

    正社員

    【JavaScript/CSS/React】フロントエンドエンジニア|国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)サービスサイトおよび基幹システムのフロントエンド開発業務 UI/U設計、ツ...

    夢の街創造委員会株式会社

    OCTPASS

    絞り込みメニュー

    絞り込みメニュー

    職種で探す

    SEACH_LISTjobcat257

    SEACH_LISTjobcat258

    SEACH_LISTjobcat259

    SEACH_LISTjobcat260

    SEACH_LISTjobcat261

    SEACH_LISTjobcat262

    SEACH_LISTjobcat263

    SEACH_LISTjobcat264

    SEACH_LISTjobcat265

    SEACH_LISTjobcat266

    SEACH_LISTjobcat267

    業種で探す

    雇用形態で探す

    勤務地で探す

    SEACH_LISTloccat391

    SEACH_LISTloccat394

    SEACH_LISTloccat403

    SEACH_LISTloccat413

    スキルで探す

    SEACH_LISTsklcat465

    SEACH_LISTsklcat466

    SEACH_LISTsklcat467

    SEACH_LISTsklcat468

    SEACH_LISTsklcat469

    SEACH_LISTsklcat470

    SEACH_LISTsklcat471

    こだわり条件で探す

    SEACH_LISTgoodcat337

    SEACH_LISTgoodcat338

    SEACH_LISTgoodcat339

    SEACH_LISTgoodcat340

    SEACH_LISTgoodcat341

    SEACH_LISTgoodcat342

    SEACH_LISTgoodcat343