一覧
このページの汎用的なパターンを組み合わせることで、多くの一覧を構成できます。
基本一覧
-
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
-
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
-
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
-
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
<ul class="indexList">
<li>
<a href="#">
<div class="meta">
<span class="label">ラベル</span>
<time datetime="2026-04-01">日付</time>
</div>
<p>
テキスト
</p>
</a>
</li>
</ul>
カード一覧
基本構成
<div class="card shadow">
<a href="#">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</a>
</div>※親要素にクラスを設定すると、子要素全てにカードが設定されます。
（一覧以外にも使用可能）
| クラス | 効果 |
|---|---|
| .shadow | 影を設定 |
| .line | 枠線を設定 |
| .fill | 背景色を設定 |
| .radius | 角丸を設定 |
| .hover | ホバー時の背景色を設定 |
影 (.shadow)
3段型
-
構造を見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
-
構造を見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
-
構造を見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
<ul class="card shadow flex gap-8">
<li class="line-3">
<a href="#">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</a>
</li>
</ul>※画像が不要な場合は、イメージタグを削除してください。
構造を見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
構造を見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
構造を見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
<ul class="card shadow flex gap-8">
<li class="line-3">
<a href="#">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</a>
</li>
</ul>※画像が不要な場合は、イメージタグを削除してください。