MENU

リスト・テーブル

  • HOME
  • リスト・テーブル

リスト

丸

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
ソースを表示
印刷SyntaxHighlighterについて
1<ul class="list_01">
2<li>テキストテキスト</li>
3<li>テキストテキスト</li>
4<li>テキストテキスト</li>
5</ul>

数字

  1. テキストテキスト
  2. テキストテキスト
  3. テキストテキスト
ソースを表示
印刷SyntaxHighlighterについて
1<ol class="list_01">
2<li>テキストテキスト</li>
3<li>テキストテキスト</li>
4<li>テキストテキスト</li>
5</ol>

丸数字

  1. テキストテキスト
  2. テキストテキスト
  3. テキストテキスト
  1. テキストテキスト
  2. テキストテキスト
  3. テキストテキスト
ソースを表示
印刷SyntaxHighlighterについて
1<ol class="list_number">
2<li>テキストテキスト</li>
3<li>テキストテキスト</li>
4<li>テキストテキスト</li>
5</ol>
6<ol class="list_number red">
7<li>テキストテキスト</li>
8<li>テキストテキスト</li>
9<li>テキストテキスト</li>
10</ol>

Q&A

テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ソースを表示
印刷SyntaxHighlighterについて
1<dl class="list_qa">
2<dt>テキストテキストテキストテキストテキスト</dt>
3<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
4</dl>

見出し太字と説明文

・見出し見出し見出し見出し見出し
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
1. 見出し見出し見出し見出し見出し
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ソースを表示
印刷SyntaxHighlighterについて
1<dl class="dlList01">
2<dt>・見出し見出し見出し見出し見出し</dt>
3<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
4</dl>
5<dl class="dlList01">
6<dt>1. 見出し見出し見出し見出し見出し</dt>
7<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
8</dl>

お知らせリスト

2015年 00月 00日
テキストテキストテキストテキストテキストテキスト。
2015年 00月 00日
テキストテキストテキストテキストテキストテキスト。
ソースを表示
印刷SyntaxHighlighterについて
1<dl class="dlInfo01">
2<dt>2015年 00月 00日</dt>
3<dd>テキストテキストテキストテキストテキストテキスト。</dd>
4</dl>
5<dl class="dlInfo01">
6<dt>2015年 00月 00日</dt>
7<dd>テキストテキストテキストテキストテキストテキスト。</dd>
8</dl>

テーブル

上下ライン

th1td1
th2td2
ソースを表示
印刷SyntaxHighlighterについて
1<table class="table_01" border="0" cellspacing="0" cellpadding="0">
2<colgroup><col width="30%"><col width="70%"></colgroup>
3<tbody>
4<tr>
5<th>th1</th>
6<td>td1</td>
7</tr>
8<tr>
9<th>th2</th>
10<td>td2</td>
11</tr>
12</tbody>
13</table>

ライン

th1td1
th2td2
ソースを表示
印刷SyntaxHighlighterについて
1<table class="table_02" border="0" cellspacing="0" cellpadding="0">
2<colgroup><col width="30%"><col width="70%"></colgroup>
3<tbody>
4<tr>
5<th>th1</th>
6<td>td1</td>
7</tr>
8<tr>
9<th>th2</th>
10<td>td2</td>
11</tr>
12</tbody>
13</table>

th色付き

th1td1
th2td2
ソースを表示
印刷SyntaxHighlighterについて
1<table class="table_03" border="0" cellspacing="0" cellpadding="0">
2<colgroup><col width="30%"><col width="70%"></colgroup>
3<tbody>
4<tr>
5<th>th1</th>
6<td>td1</td>
7</tr>
8<tr>
9<th>th2</th>
10<td>td2</td>
11</tr>
12</tbody>
13</table>

ストライプ

th1td1
th2td2
th2td2
th2td2
ソースを表示
印刷SyntaxHighlighterについて
1<table class="table_01 striped" border="0" cellspacing="0" cellpadding="0">
2<colgroup><col width="30%"><col width="70%"></colgroup>
3<tbody>
4<tr>
5<th>th1</th>
6<td>td1</td>
7</tr>
8<tr>
9<th>th2</th>
10<td>td2</td>
11</tr>
12<tr>
13<th>th2</th>
14<td>td2</td>
15</tr>
16<tr>
17<th>th2</th>
18<td>td2</td>
19</tr>
20</tbody>
21</table>

スマホ対応スクロール

classに「scroll」を追加します。theadにthの項目を入れ、tdはtbodyで囲います。
※rowspan等のセルの結合と改行（<br>）は対応していません。

th1th2th3
td1テキストテキストtd2テキストテキストtd3テキストテキスト
td1テキストテキストテキストtd2テキストテキストテキストtd3テキストテキストテキスト
ソースを表示
印刷SyntaxHighlighterについて
1<table class="table_03 scroll" border="0" cellspacing="0" cellpadding="0">
2<thead>
3<tr>
4<th>th1</th>
5<th>th2</th>
6<th>th3</th>
7</tr>
8</thead>
9<tbody>
10<tr>
11<td>td1テキストテキスト</td>
12<td>td2テキストテキスト</td>
13<td>td3テキストテキスト</td>
14</tr>
15<tr>
16<td>td1テキストテキストテキスト</td>
17<td>td2テキストテキストテキスト</td>
18<td>td3テキストテキストテキスト</td>
19</tr>
20</tbody>
21</table>

左側の幅を調整

テーブルブロックを選択後、サイドパネルのブロック下部にある「高度な設定」→「追加CSSクラス」に以下のクラスを設定します。

・幅20%　クラス名：table-td-w20
・幅30%　クラス名：table-td-w30
・幅40%　クラス名：table-td-w40
・幅50%　クラス名：table-td-w50
・幅60%　クラス名：table-td-w60
・幅70%　クラス名：table-td-w70
・幅80%　クラス名：table-td-w80

幅20%を設定テキストテキストテキストテキストテキストテキスト
幅20%を設定テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2014年10月31日