更新日:2025年6月16日

Scoped(局所的な場所)で使う (実験的)

PitaCSSと他のフレームワークと併用をする場合等に使ってください。

以下の画像のような例が適しています。

layout-local-section.drawio.png

逆に適していないもの

以下のようにサイト全体やページ全体にPitaCSSを使う場合は適していません。pita-css/styleご利用ください。

layout.drawio.png

使い方

まずはインポートします。

JavaScriptは必要に応じてインポートしてください。

@import "pita-css/style-scoped";

scopedをつける(例)

例として、記事の中身の部分だけにPitaCSSを適応させましょう。 .pita-cssというClassがScoped用です。

<!-- ヘッダー -->

<!-- サイドバー -->
<main class="pita-css">
<!-- 記事の中身 -->
</main>

<!-- フッター -->