メインコンテンツまでスキップ

スタイルとレイアウト

docStaticサイトはシングルページのReactアプリケーションです。Reactアプリのスタイリング方法と同じようにスタイルを設定できます。

グローバルスタイル​

docStaticは @docusaurus/preset-classic テーマを使用し、/src/css/custom.css ファイルでCSSを上書きしています。そのファイルに記述したCSSはグローバルに利用可能で、文字列リテラルを使用して直接参照できます。

Infimaを使ったサイトのスタイリング​

docStaticは基盤となるスタイリングフレームワークとしてInfimaを使用しています。Infimaは、ブログ、ドキュメント、ホームページなどのコンテンツ中心のウェブサイトに適した柔軟なレイアウトと共通UIコンポーネントのスタイリングを提供します。詳細については、Infimaのウェブサイトを参照してください。

Infimaは各色について7段階のシェードを使用します。選択したプライマリカラーの異なるシェードを見つけるにはColorBoxを使用することをお勧めします。サンプルページのツールを使用してウェブサイト用の異なるシェードを生成し、変数を /src/css/custom.css にコピーできます。

ダークモード​

ライトモードでは、<html> 要素に data-theme="light" 属性があり、ダークモードでは data-theme="dark" になります。したがって、特定の属性を持つ html をターゲットにすることで、CSSをダークモードのみにスコープ設定できます。

/* Overriding root Infima variables */
[data-theme='dark'] {
  --ifm-color-primary: #4e89e8;
}
/* Styling one class specially in dark mode */
[data-theme='dark'] .purple-text {
  color: plum;
}

モバイルビュー​

docStaticはモバイル画面幅とデスクトップの境界として996pxを使用しています。モバイルビューで異なるレイアウトにしたい場合は、メディアクエリを使用できます。

.banner {
  padding: 4rem;
}
/** In mobile view, reduce the padding */
@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

詳細については、DocusaurusドキュメントのStyling and Layoutを参照してください。