リスト
概要
情報を一覧表示し、ユーザーに選択や操作を促します。例えば、上下のみの罫線とマージンにより、情報のかたまりを明示します。
※リストのデザインについては、適時SCSS(module.scss)を改変してください。
一覧(INDEX)デザイン
基本リスト
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
<ul class="baseList">
<li><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
</ul>
BOXリスト
BOXリストの箱の数につきましては、グリッドを参考にしてください。
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
<ul class="boxList boxSet">
<li class="boxLine3"><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li class="boxLine3"><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
<li class="boxLine3"><a href="#">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
</ul>
まとめリスト
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
- 株式会社ケイツー・インタラクティブ 東京都台東区雷門2-19-17-316
<div class="matomeSelect">
<button type="button" class="labelType main"><span>BTN</span></button>
</div>
<ul class="matomeList">
<li><div class="checkBoxCell"><label><input type="checkbox" value="" checked><span class="inputCheck"></span></label></div>
<a href="#" class="matomeCell">
<span class="listTitle">株式会社ケイツー・インタラクティブ</span>
<span class="listMeta">東京都台東区雷門2-19-17-316</span>
</a></li>
</ul>
ページング
<ul class="listPaging">
<li class="lt"><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="gt"><a href="#">></a></li>
</ul>
改変対象ファイル
- CSS:
- modules.scss 内に改変対象箇所があります。
箇条書きデザイン
TYPE A
以下はサンプルです。用途を定めてデザインしてください。
- サンプルテキスト
- サンプルテキスト
- サンプルテキスト
<ul class="typeA">
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
</ul>
TYPE B
以下はサンプルです。用途を定めてデザインしてください。
- サンプルテキスト
- サンプルテキスト
- サンプルテキスト
<ul class="typeB">
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
</ul>
改変対象ファイル
- CSS:
- modules.scss 内に改変対象箇所があります。