67

<ul>またはの見出し/タイトルをコーディングする最良の方法は何<ol>ですか? のように<caption>、<table>太字にしたくありません。

これでいいですか？

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

または、常に見出しを使用する必要がありますか?

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

bool の戻り値を適切な例外処理として使用することはお勧めしませんが、そのように記述されたコードが既にたくさんある場合は、どこにでも行って大幅な変更を行うことは最善の方法ではない可能性があります。

4

6 に答える 6

58

これは古いものですが、後で検索したときにこの質問を見つける可能性のある他の人のために更新しています.

@マット・ケリハー：

リストに css :beforeとdata- * 属性を使用することは素晴らしいアイデアですが、少し変更して、よりハンディキャップにアクセスしやすくすることもできます。

HTML:

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS:

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

これは、aria-label 属性の値に設定されたテキストで、その上に "header" 疑似要素を持つリストを作成します。その後、必要に応じて簡単にスタイルを設定できます。

data-* 属性を使用する場合よりも優れている点は、スクリーン リーダーによって aria-label がリストの「ラベル」として読み取られることです。これは、このデータの使用目的に対して意味的に正しいものです。

注: IE8 は :before 属性をサポートしていますが、単一のコロン バージョンを使用する必要があります (また、有効な doctype が定義されている必要があります)。IE7 は :before をサポートしていませんが、Modernizer または Selectivizr でその問題を修正する必要があります。最新のブラウザーはすべて古い :before 構文をサポートしていますが、::before 構文を使用することをお勧めします。一般に、これを処理する最善の方法は、古い形式を使用する IE7/8 用の外部スタイルシートと、新しい形式を使用する一般的なスタイルシートを用意することですが、実際には、まだ 100% クロスしているため、ほとんどの場合、古い単一コロン形式を使用するだけです。 CSS3 では技術的に有効ではありませんが、

于 2013-12-09T19:23:35.760 に答える
48

見出しには常に見出しタグを使用します。手がかりは名前にあります:)

太字にしたくない場合は、CSS でスタイルを変更してください。例えば：

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

見出しとリストがドキュメントのセクションを構成している場合は、<section>要素を使用して、見出しとリストをより明示的に関連付けることができます。

<section class=“list-with-heading”&gt;
    <h3>heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

次に、次のようにスタイルします。

.list-with-heading h3 {
    font-weight: normal;
}
于 2010-02-09T07:45:08.130 に答える
8

リストのcss:beforeと属性を利用したいdata-*

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

data-headerこれにより、リストの属性として指定されたテキストであるヘッダーを持つリストが作成されます。その後、必要に応じて簡単にスタイルを設定できます。

于 2013-05-21T15:44:30.140 に答える
4

見出しをリスト要素にするのはどうですか？

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

とCSS

ul .heading {font-weight: normal; list-style: none;}

さらに、リセットCSSを使用して、ulとliにマージンとパディングを設定します。これが良いリセットCSSです。余白とパディングをリセットしたら、リストに余白を適用できます。見出しクラス以外の要素を使用して、それらをインデントします。

于 2010-02-09T08:12:56.523 に答える
0

h3は、h2、h1、またはh6よりも絶対に優れたソリューションです。

  1. 特定のレベルを使用する必要があります。h1にいる場合はh2を使用し、h5にいる場合はh6を使用します（h6にいる場合は...ハム、例としてstrongまたはemを使用します）。それは義務ではなく、アクセシビリティの問題です（ここでは、緑色の部分）。

  2. リストにタイトルを付ける必要はありません...この要素は存在しないためです。したがって、スクリーンリーダーは特別なものを使用しません。

したがって、Hnを使用することはおそらく最良の解決策の1つですが、確かに特定のレベルではありません。

于 2010-02-09T09:29:26.517 に答える