GithubXDiscord

customization-guide > CSS構造とスタイリングガイド

CSS構造とスタイリングガイド

ノーションプレッソは、柔軟で拡張可能なCSS構造を提供します。このセクションでは、CSS変数システム、主要なスタイリングポイント、そしてインデントの適用原理について説明します。

CSS変数システム

ノーションプレッソはCSS変数を使用してグローバルスタイルを定義します。これにより、テーマの変更や全体的なスタイルの調整を簡単に行うことができます。

主要なCSS変数は以下の通りです:

.notion {
  --notion-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
    "Segoe UI Emoji", "Segoe UI Symbol";
  --notion-max-width: 720px;
  --notion-header-height: 45px;
  --notion-indent: 27px;

  /* 色変数 */
  --fg-color: rgb(55, 53, 47);
  --fg-color-0: rgba(55, 53, 47, 0.09);
  --fg-color-1: rgba(55, 53, 47, 0.16);
  --fg-color-2: rgba(55, 53, 47, 0.4);
  --fg-color-3: rgba(55, 53, 47, 0.6);
  --fg-color-4: #000;
  --fg-color-5: rgb(233, 233, 231);
  --fg-color-6: rgba(55, 53, 47, 0.8);
  --fg-color-icon: var(--fg-color);

  --bg-color: #fff;
  --bg-color-0: rgba(135, 131, 120, 0.15);
  --bg-color-1: rgb(247, 246, 243);
  --bg-color-2: rgba(135, 131, 120, 0.15);

  --select-color-0: rgb(46, 170, 220);
  --select-color-1: rgba(35, 131, 226, 0.28);
  --select-color-2: #d9eff8;
}

これらの変数を再定義することで、全体的なスタイルを簡単に変更できます。

主要なスタイリングポイント

  1. クラス命名規則: すべてのクラスはnotion-で始まります。これはスタイルの衝突を防ぎます。

    例: .notion-block, .notion-h1, .notion-toggle

  2. ブロックレベルスタイル: すべてのブロックレベル要素にはnotion-blockクラスが適用されます。

    .notion-block {
      display: block;
    }
    
  3. 色の適用: 色はCSS変数を使用して適用されます。

    .notion-text {
      color: var(--fg-color);
    }
    
  4. レスポンシブデザイン: --notion-max-width変数を使用してレスポンシブレイアウトを実装します。

    .notion-body {
      width: 100%;
      max-width: var(--notion-max-width);
      margin: 0 auto;
    }
    

インデントの適用原理

ノーションプレッソは再帰的な構造を使用してインデントを実装します。これはCSSで以下のように処理されます:

.notion-block > .notion-block {
  margin-left: var(--notion-indent);
}

.notion-block > .notion-display-contents > .notion-block {
  margin-left: var(--notion-indent);
}

このCSSルールは、入れ子のブロックに対して自動的にインデントを適用します。--notion-indent変数を調整することで、インデントのレベルを簡単に変更できます。

ダークモードとカスタムテーマ

ノーションプレッソはデフォルトでダークモードをサポートしています。ダークモードは以下のように実装されています:

[data-theme="dark"] .notion {
  --fg-color: rgba(255, 255, 255, 0.9);
  --bg-color: #2f3437;
  /* 他のダークモード関連変数... */
}

さらに、カスタムテーマを簡単に適用できます。data-theme属性を使用して、希望するテーマを適用できます:

<Notion data-theme="custom">{/* Notionコンテンツ*/}</Notion>

そして、CSSで以下のようにスタイルを定義できます:

.notion[data-theme="custom"] {
  --fg-color: #333;
  --bg-color: #f4f4f4;
  /* 他のカスタムテーマ関連変数... */
}

この方法を使用すると、セレクタの優先順位を利用して、デフォルトのスタイルを簡単にオーバーライドできます。

スタイルのカスタマイズの例

  1. グローバルフォントの変更:

    .notion[data-theme="custom"] {
      --notion-font: "Roboto", sans-serif;
    }
    
  2. ヘッディングスタイルの変更:

    .notion[data-theme="custom"] .notion-h1 {
      font-size: 2.5em;
      color: var(--select-color-0);
      border-bottom: 2px solid var(--fg-color-1);
    }
    
  3. インデントの調整:

    .notion[data-theme="custom"] {
      --notion-indent: 20px;
    }
    
  4. ダークモードの実装:

    [data-theme="dark"] .notion[data-theme="custom"] {
      --fg-color: rgba(255, 255, 255, 0.9);
      --bg-color: #2f3437;
      /* 他の色変数も適切に調整 */
    }
    

これらのCSS構造とスタイリングガイドに従うことで、ノーションプレッソを使用して、一貫性のあるスタイルを実装できます。さらに、必要に応じて、細かいカスタマイズも可能です。