【賢威8】カスタマイズ用パーツ（リストの装飾）

賢威8ではあらかじめ親テーマでで用意されているデザインパーツ（スタイル）が複数ございます。
今回はリスト（ul,ol,li要素）を装飾するためのデザインパーツを紹介させていただきます。

デフォルトのリスト（ul）

  • リストのテキストです。
  • リストのテキストです。

HTML

<ul>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ul>

リストを横並びにする

  • リストのテキストです。
  • リストのテキストです。

HTML

<ul class="inline">
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ul>

先頭のマーカーを非表示にする

  • リストのテキストです。
  • リストのテキストです。

HTML

<ul class="none">
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ul>

番号リスト（ol）

デフォルトの番号リスト

  1. リストのテキストです。
  2. リストのテキストです。
  3. リストのテキストです。
  4. リストのテキストです。
  5. リストのテキストです。
  6. リストのテキストです。

HTML

<ol>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ol>

太字＆大

  1. リストのテキストです。
  2. リストのテキストです。
  3. リストのテキストです。
  4. リストのテキストです。
  5. リストのテキストです。
  6. リストのテキストです。

HTML

<ol class="list_style01">
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ol>

サークル番号

  1. リストのテキストです。
  2. リストのテキストです。
  3. リストのテキストです。
  4. リストのテキストです。
  5. リストのテキストです。
  6. リストのテキストです。

HTML

<ol class="list_style02">
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ol>

※サークル番号は設定しているカラーパターンによって色が異なります。カラーパターンについてはアイコンの色を変更する＜カラーパターンの設定を反映させる場合＞をご参照ください。

チェックリスト

  • リストのテキストです。
  • リストのテキストです。
  • リストのテキストです。

HTML

<ul class="check-list">
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
	<li>リストのテキストです。</li>
</ul>

Q&Aリスト

ここには質問が入ります。
ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。
ここには質問が入ります。
ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。

HTML

<dl class="qa-list">
<dt>ここには質問が入ります。</dt>
<dd>ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。</dd>
<dt>ここには質問が入ります。</dt>
<dd>ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。ここには回答が入ります。</dd>
</dl>

記述リスト（横並び）

ここには名前、用語等が入ります。
ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。
ここには名前、用語等が入ります。
ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。

HTML

<dl class="dl_style01">
<dt>ここには名前、用語等が入ります。</dt>
<dd>ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。</dd>
<dt>ここには名前、用語等が入ります。</dt>
<dd>ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。</dd>
</dl>

記述リスト（縦並び）

ここには名前、用語等が入ります。
ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。
ここには名前、用語等が入ります。
ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。

HTML

<dl class="dl_style02">
<dt>ここには名前、用語等が入ります。</dt>
<dd>ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。</dd>
<dt>ここには名前、用語等が入ります。</dt>
<dd>ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。ここには説明や解説等が入ります。</dd>
</dl>

※記述リスト（縦並び）は設定しているカラーパターンによって背景色が異なります。カラーパターンについてはアイコンの色を変更する＜カラーパターンの設定を反映させる場合＞をご参照ください。

【例】ターコイズの場合 ↓
ターコイズの記述リスト

この記事を書いた人

まえさん

賢威カスタマイズを運営する会社の代表です。なるべく「わかりやすく、シンプルに」を心がけた初心者の方向けのコンテンツ作りを目指しております。上級者の方には「物足りない」「ここはこの方が」なんてこともあるかと思いますが、どうかあたたかい目で見守っていただけると幸いです。

記事一覧へ