投稿本文の基本機能とHTML要素

ol ul dl リスト

リスト表示を行う場合に使用します。
リストには、番号なしリスト(ul)番号付きリスト(ol)タイトル付リスト(dl)の3種類があります。
番号有り無しは、どちらの要素を使用してもCSSで表示を変更する事が出来ます。

 

ワードプレスは、リストをエディターのボタン操作や要素の手書き入力を行わないで記号を入力する事でリストを作る事もできますアスタリスクをまず入力します。 スペースを一つ入れると、アスタリスクが消えて、続けて文字を入力すると、自動的にリスト表示が出来ます。

 

レインドロップスでは、

テーマ組み込みクラスがあります

ul用クラス .rd-list-type-tree
ol用クラス .sectioned

表示例

ol 番号付きリスト

  1. ol
  2. あいうえお
  3. abc
  4. abc
  5. abc
  6. abc
<ol>
	<li>ol</li>
	<li>あいうえお</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ol>

ul 番号なしリスト

  • ol
  • あいうえお
  • abc
  • abc
  • abc
  • abc
<ul>
	<li>ol</li>
	<li>あいうえお</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ul>

例 rd-list-type-treeクラス

  • ol
  • あいうえお
    • あいうえお
  • abc
  • abc
  • abc
  • abc
<ul class="rd-list-type-tree">
	<li>ol</li>
	<li>あいうえお<ul><li>あいうえお</li></ul></li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
	<li>abc</li>
</ul>

例 sectionedクラス

  • ol
  • あいうえお
    • あいうえお
  • abc
  • abc
  • abc
  • abc
<ul class="sectioned">
<li>ol</li>
<li>あいうえお<ul><li>あいうえお</li></ul></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>

dl dt dd データリスト

データリストはブラウザ幅640pxを境界にスタイルが変更されます。
データリストタイトル1
データ1
データ2
データ3
データリストタイトル2
データ1
データ2
データ3
データリストタイトル3
データ1
データ2
データ3
<dl>
<dt>データリストタイトル1</dt><dd>データ1</dd><dd>データ2</dd><dd>データ3</dd>
<dt>データリストタイトル2</dt><dd>データ1</dd><dd>データ2</dd><dd>データ3</dd>
<dt>データリストタイトル3</dt><dd>データ1</dd><dd>データ2</dd><dd>データ3</dd>
</dl>

関連


一覧に戻る

1 2 3 4 5 6 7 8 9 10 11


コメントは受け付けていません。