WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <ul>「箇条書きリストの領域定義」

<ul> 「箇条書きリストの領域定義」[読み方:ユーエル]

<ul>タグは、数字付き箇条書きや英字などの箇条書きリストの定義を行います。箇条書きの内容は<li>~</li>タグで記載します。
また、英数字の箇条書きリストの場合は<ol>~</ol>タグを使用します。

HTML規格HTML4.01HTML5
使用可否
広告

<ul> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフローコンテンツを子要素にもてる場所<li>不可

<ul> の属性

【構文】
<ul>
<li>~説明部~</li>
<li>~説明部~</li>
・・・
</ul>
属性意味値のサンプルなど
type="マーカー種類"
※HTML5で廃止。スタイルシートで指定。
マーカーの種類
意味
disc●:黒丸
circle○:白丸
square■:黒四角
廃止された属性
  • compact
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<ul>タグのサンプル

<ul>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
</ul>
  • HTMLはホームページを記述するための言語です。
  • JavaScriptはホームページの動作を記述するためのスクリプト言語です。

TYPEを指定する場合
※TYPEはHTML5で廃止されたため指定できません。スタイルシートで指定してください。
<ul type="circle">
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ul>
<ul type="square">
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ul>
  • HTMLはホームページを記述するための言語です。
  • JavaScriptは動作を記述するための言語です。
  • STYLE(CSS)は見た目を記述するための言語です。
  • HTMLはホームページを記述するための言語です。
  • JavaScriptは動作を記述するための言語です。
  • STYLE(CSS)は見た目を記述するための言語です。

IEなど一部ブラウザによっては、TYPEに対応していない場合があります。

スタイルシートを使用したサンプル
<head>
<style type="text/css">
<!--
#css-s1 ul {
list-style-type: circle;
}
#css-s2 ul {
list-style-type: square;
}
-->
</style>

</head>

<div id="css-s1">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目(色や線、配置など)を記述するための言語です。</li>
</ul>
</div>
<div id="css-s2">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目(色や線、配置など)を記述するための言語です。</li>
</ul>
</div>
  • ホームページを記述するための言語です。
  • ホームページの動作を記述するためのスクリプト言語です。
  • ホームページの見た目(色や線、配置など)を記述するための言語です。
  • ホームページを記述するための言語です。
  • ホームページの動作を記述するためのスクリプト言語です。
  • ホームページの見た目(色や線、配置など)を記述するための言語です。

詳細はスタイルシートリファレンスのlist-style-typeを参照ください。

リストマーカーに画像を使用する場合
<head>
<style type="text/css">
<!--
#css-s4 ul {
list-style-image: url(mark.png);
}
-->
</style>

</head>

<div id="css-s4">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目(色や線、配置など)を記述するための言語です。</li>
</ul>
</div>
  • ホームページを記述するための言語です。
  • ホームページの動作を記述するためのスクリプト言語です。
  • ホームページの見た目(色や線、配置など)を記述するための言語です。

詳細はスタイルシートリファレンスのlist-style-imageを参照ください。

ページTOP

留意事項

  • type属性はHTML5で廃止されました。スタイルシートで指定してください。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン