Regalis Japan Group株式会社 Logo

記事内リストスタイルガイド

概要

記事内のリストを、ガラスモーフィズム風のデザインに統一しました。既存のデザインシステム（ダークテーマ、ゴールドアクセント）に合わせたスタイルです。

使用方法

基本的な箇条書きリスト

<div class="list-box">
  <ul>
    <li>リストアイテム1</li>
    <li>リストアイテム2</li>
    <li>リストアイテム3</li>
  </ul>
</div>

番号付きリスト

<div class="list-box">
  <ol>
    <li>最初の項目</li>
    <li>2番目の項目</li>
    <li>3番目の項目</li>
  </ol>
</div>

タイトル付きリスト

<div class="list-box">
  <div class="list-box__title">リストタイトル</div>
  <ul>
    <li>リストアイテム1</li>
    <li>リストアイテム2</li>
  </ul>
</div>

強調リスト（ゴールドアクセント強化）

<div class="list-box list-box--highlight">
  <ul>
    <li>重要な項目1</li>
    <li>重要な項目2</li>
  </ul>
</div>

コンパクトリスト（小さめのスペーシング）

<div class="list-box list-box--compact">
  <ul>
    <li>コンパクトな項目1</li>
    <li>コンパクトな項目2</li>
  </ul>
</div>

ネストされたリスト

<div class="list-box">
  <ul>
    <li>親項目1
      <ul>
        <li>子項目1-1</li>
        <li>子項目1-2</li>
      </ul>
    </li>
    <li>親項目2</li>
  </ul>
</div>

Markdownでの使用例

Markdownファイル内では、以下のように記述します：

<div class="list-box">
  <div class="list-box__title">U-22限定プランの特徴</div>
  <ul>
    <li>キャリアの門出にふさわしいスタイル提案（就活、入学式、インターン）</li>
    <li>ハレの日を彩る品格あるデザイン（成人式、結婚式参列）</li>
    <li>東京・麹町のプライベートサロンでの特別な採寸体験</li>
  </ul>
</div>

デザイン特徴

適用推奨箇所

以下のような箇所で使用を推奨します：

  1. 特徴・メリットの列挙
  2. 手順・プロセスの説明
  3. 比較項目のリスト
  4. チェックリスト形式の情報
  5. FAQの回答内のリスト

注意事項