path: root/files/ja/archive/mozilla/xul/listitem/index.html

---
title: listitem
slug: Archive/Mozilla/XUL/listitem
tags:
  - XUL Elements
  - XUL Reference
translation_of: Archive/Mozilla/XUL/listitem
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
 « <a href="/ja/docs/XUL/XUL_Reference">XUL リファレンス HOME</a>    [
 <a href="#Examples">例</a> |
 <a href="#Attributes">属性</a> |
 <a href="#Properties">プロパティ</a> |
 <a href="#Methods">メソッド</a> |
 <a href="#Related">関連項目</a> ]
</span></div>
<p><code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> の一つの行。listitem のテキストは <code><a href="/ja/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> を使用するか、listitem 要素上に <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性を直接置いて指定します。デフォルトでは、listitem の要素に適切な形式とクラスの一つの listcell 要素を含みます。</p>
<p>詳しい情報が <a href="/ja/XUL_Tutorial/List_Controls" title="ja/XUL_Tutorial/List_Controls">XUL チュートリアル</a>にあります。</p>
<dl><dt> 属性 </dt><dd> <a href="#a-accesskey">accesskey</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-current">current</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-preference">preference</a>, <a href="#a-selected">selected</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-listitem.type">type</a>, <a href="#a-value">value</a> </dd></dl> <dl><dt> プロパティ </dt><dd> <a href="#p-accessKey">accessKey</a>, <a href="#p-accessible">accessible</a>, <a href="#p-checked">checked</a>, <a href="#p-control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-current">current</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a> </dd></dl> <dl><dt> スタイルクラス </dt><dd> <a href="#s-listitem-iconic">listitem-iconic</a> </dd></dl>
<h3 id="Examples" name="Examples">例</h3>
<div class="float-right"><img alt="Image:XUL_ref_listbox.png" class="internal" src="/@api/deki/files/1819/=XUL_ref_listbox.png"></div>
<pre> &lt;listbox id="theList"&gt;
   &lt;listitem label="Ruby"/&gt;
   &lt;listitem label="Emerald"/&gt;
   &lt;listitem label="Sapphire" selected="true"/&gt;
   &lt;listitem label="Diamond"/&gt;
 &lt;/listbox&gt;
</pre>
<h3 id="Attributes" name="Attributes">属性</h3>
<p> </p><div id="a-accesskey">




<dl>
 <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>
 <dd>型: <em>文字型</em></dd>
 <dd>ショートカットキーとして使用される文字を設定します。この文字はその要素の <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性のテキストに現れる文字の一つでなければいけません。

 </dd>
</dl>


</div> <div id="a-checked">

<dl>
 <dt>
  <code id="a-checked"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt>
 <dd>
  型: <em>論理型</em></dd>
 <dd>
  要素にチェックが入っているかどうかを示します。</dd>
 <dd>
  この属性が設定されているかどうかを確認するには、<code>getAttribute()</code> ではなく <code>hasAttribute()</code> を使用してください。</dd>
</dl>
<p>button 要素で、この属性による効果を得るには <code><code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code></code> 属性に checkbox か radio を設定しなければなりません。</p>
</div> <div id="a-command">

<dl><dt> <code id="a-command"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> </dt><dd> 型: <em>要素の id</em> </dd><dd> 要素に監視された <code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> 要素の <code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> をセットします。 </dd></dl>


</div> <div id="a-crop">


<dl>
 <dt><code id="a-crop"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt>
 <dd>型: <em>下記の値のいずれか一つ</em></dd>
 <dd>要素の label に与えられた空間が小さ過ぎるときは、<code>crop</code> 属性によって指定された側のテキストが切り取られます。テキストが切り取られた場所には省略記号 (ellipsis)が使用されます。ボックスの方向が反対の場合は、切り取られる場所も反対側になります。</dd>
</dl>

<ul>
 <li><code>start</code>: テキストは先頭から切り取られます。</li>
 <li><code>end</code>: テキストは末尾から切り取られます。</li>
 <li><code>left</code>: <span title="これは非推奨 API です。未だ動作しているかも知れませんが、将来的に削除される可能性があります。"><i class="icon-thumbs-down-alt"> </i></span> テキストは左側から切り取られます。</li>
 <li><code>right</code>: <span title="これは非推奨 API です。未だ動作しているかも知れませんが、将来的に削除される可能性があります。"><i class="icon-thumbs-down-alt"> </i></span> テキストは右側から切り取られます。</li>
 <li><code>center</code>: テキストの中央が切り取られ、通常、テキストの先頭と末尾が表示されます。</li>
 <li><code>none</code>: テキストは省略記号を使用して切り取られません。しかし、テキストがあまりに長い場合は単純に削除されます。削除する側は CSS の行揃え (text alignment)に依存します。</li>
</ul>


</div> <div id="a-current">

<dl><dt> <code id="a-current"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/current">current</a></code> </dt><dd> 型: <em>論理型</em> </dd><dd> この属性は、<code>listitem</code> が現在の項目のとき、<code>true</code> に設定されます。これは一般的に、フォーカス順をカスタマイズするため、テーマによって使用されます。<code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> 内の現在選択された項目を変更するには <code>listbox</code> プロパティを使用してください。 </dd></dl>

</div> <div id="a-disabled">

<dl>
  <dt>
    <code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt>
  <dd>
    型: <em>論理型</em></dd>
  <dd>
    要素が無効化されているかどうかを示します。ある要素が <code>true</code> に設定されていたら、その要素は無効化されています。無効化された要素は通常グレイ表示のテキストで描画されます。要素が無効化されていると、ユーザのアクションには応答せず、フォーカスもあてられず、<code>command</code> イベントも発生しません。

  </dd>
</dl>

<p> </p>
</div> <div id="a-image">

<dl>
  <dt>
    <code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt>
  <dd>
    型: 画像の <em>URL</em></dd>
  <dd>
    要素上に表示する画像の URL。この属性が空または除外された場合、画像は表示されません。画像の位置は <code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> 属性および <code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> 属性によって決定されます。</dd>
</dl>


</div> <div id="a-label">

<dl><dt> <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt><dd> 型: <em>文字列型</em> </dd><dd> 要素上に表示するlabel。 省略された場合、テキストは表示されない。 </dd></dl>


</div> <div id="a-preference">

<dl><dt> <code id="a-preference"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code> </dt><dd> 型: <em>要素の id</em> </dd><dd> 要素を対応する <code><a href="/ja/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> につなぎます。この属性は <code><a href="/ja/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code> 内で使用された場合のみ効果があります。preference の値は、要素の <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/value">value</a></span></code> プロパティと一致するように更新されます。 </dd></dl>

</div> <div id="a-selected">

<dl>
 <dt>
  <code id="a-selected"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></dt>
 <dd>
  型: <em>論理型</em></dd>
 <dd>
  要素が選択されているかどうかを返します。この値は読み取り専用です。選択された項目を変更するには <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code> か <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedItem">selectedItem</a></span></code> プロパティの値を変更してください。</dd>
</dl>


<p> </p>
</div> <div id="a-tabindex">

<dl><dt> <code id="a-tabindex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> </dt><dd> 型: <em>整数型</em> </dd><dd> 要素のタブの順番。タブの順番は <code>tab</code> キーが押下されたときにフォーカスが移動する順番です。より大きな <code>tabindex</code> の値をもつ要素は、タブの遷移が後になります。 </dd></dl>

</div> <div id="a-listitem.type">

<dl><dt> <code id="a-listitem.type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/listitem.type">type</a></code> </dt><dd> 型: <em>文字列型</em> </dd><dd> この属性の値を <code>checkbox</code> に設定することによって、<code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> 内の項目をチェックボックスにすることができます。 </dd></dl>

</div> <div id="a-value">

<dl><dt> <code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt><dd> 型: <em>文字列型</em> </dd><dd> 文字列の属性はデータ値を要素に関連付けます。特定の目的のために使われるわけではありませんが、スクリプトからあなた自身の用途のためにアクセスできます。 </dd></dl>


</div>
<h3 id="Properties" name="Properties">プロパティ</h3>
<p> </p><div id="p-accessKey">
<dl>
  <dt><code><span><a href="http://api/ja/docs/XUL/Property/accessKey">accessKey</a></span></code></dt>
  <dd>型: <em>文字型</em></dd>
  <dd><code id="a-accesskey"><a href="http://api/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> 属性の値の取得と設定。</dd>
</dl></div> <div id="p-accessible">
<dl><dt> <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/accessible">accessible</a></span></code> </dt><dd> 型: <em><a href="/ja/nsIAccessible" title="ja/nsIAccessible">nsIAccessible</a></em> </dd><dd> 要素の accessibility object を返す。 </dd></dl>
</div> <div id="p-checked">
<dl><dt> <code><span><a href="http://api/ja/docs/XUL/Property/checked">checked</a></span></code> </dt><dd> 型: <em>論理型</em> </dd><dd> <code id="a-checked"><a href="http://api/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-control">
<dl>
 <dt>
  <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/control">control</a></span></code> </dt>
 <dd>
  型: <em>要素の id</em></dd>
 <dd>
  <code id="a-control"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> 属性の値の取得と設定。</dd>
</dl>


<p> </p></div> <div id="p-crop">
<dl><dt> <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/crop">crop</a></span></code> </dt><dd> 型: <em>文字列型</em> </dd><dd> <code id="a-crop"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-current">
<dl><dt> <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/current">current</a></span></code> </dt><dd> 型: <em>論理型</em> </dd><dd> <code id="a-current"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/current">current</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-disabled">
<dl><dt> <code><span><a href="http://api/ja/docs/XUL/Property/disabled">disabled</a></span></code> </dt><dd> 型: <em>論理型</em> </dd><dd> <code id="a-disabled"><a href="http://api/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-image">
<dl><dt> <code><span><a href="http://api/ja/docs/XUL/Property/image">image</a></span></code> </dt><dd> 型: <em>image の URL</em> </dd><dd> <code id="a-image"><a href="http://api/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-label">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/label">label</a></span></code></dt>
  <dd>
    型: <em>文字列型</em></dd>
  <dd>
    <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性の値の取得と設定。</dd>
</dl>

</div> <div id="p-selected">
<dl>
<dt><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selected">selected</a></span></code></dt>
<dd> 型: <em>論理型</em> </dd><dd> このプロパティの値は、要素が選択されているときは <code>true</code>、選択されていないときは <code>false</code> です。このプロパティは読み取り専用です。</dd>
</dl></div> <div id="p-tabIndex">
<dl><dt> <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/tabIndex">tabIndex</a></span></code> </dt><dd> 型: <em>整数型</em> </dd><dd> <code id="a-tabindex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> 属性の値の取得と設定。 </dd></dl>
</div> <div id="p-value">
<dl>
  <dt>
    <code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/value">value</a></span></code></dt>
  <dd>
    型: <em>文字列型</em></dd>
  <dd>
    <code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> 属性の値の取得と設定。</dd>
</dl>
</div>
<h3 id="Methods" name="Methods">メソッド</h3>
<div style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;">
<p><strong>XUL 要素からの継承</strong><br>
<small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span> </small></p>
<p><strong>DOM 要素からの継承</strong><br>
<small> <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.appendChild">appendChild()</a></code>, <a class="internal" href="/ja/DOM/Node.compareDocumentPosition" title="ja/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/ja/DOM/Node.getFeature" title="ja/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/ja/DOM/Node.getUserData" title="ja/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.insertBefore">insertBefore()</a></code>, <a class="internal" href="/ja/DOM/Node.isEqualNode" title="ja/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/ja/DOM/Node.isSameNode" title="ja/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/ja/DOM/Node.lookupNamespaceURI" title="ja/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/ja/DOM/Node.lookupPrefix" title="ja/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ja/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/ja/DOM/Node.setUserData" title="ja/DOM/Node.setUserData">setUserData</a></small></p>
</div>
<h3 id="Style_classes" name="Style_classes">スタイルクラス</h3>
<p>次のクラスは要素のスタイル付けに使用されます。これらのクラスは、ユーザの選択したテーマに自然に合うようにするため、要素のスタイルを直接変更する代わりに使用されます。</p>
<dl><dt> <code><a href="https://developer.mozilla.org/ja/docs/XUL/Style/listitem-iconic">listitem-iconic</a></code> </dt><dd> <code><a href="/ja/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 上に画像を表示するにはこのクラスを使用します。<code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> 属性を使用して画像を指定してください。 </dd></dl>
<h3 id="Related" name="Related">関連項目</h3>
<dl><dt> 要素 </dt><dd> <code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>, <code><a href="/ja/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code>, <code><a href="/ja/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code>, <code><a href="/ja/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code>, <code><a href="/ja/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code>, <code><a href="/ja/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code> </dd></dl> <dl><dt> インタフェース </dt><dd> <a href="/ja/nsIAccessibleProvider" title="ja/nsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="/ja/NsIDOMXULSelectControlItemElement" title="ja/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a> </dd></dl>
<div class="noinclude">

</div>