PitaCSS(α)
PitaCSS(α)

目次

更新日：2025年6月20日

インストール

前提環境

  • Node.js 22.x
  • npm 10.x
  • pnpm 9.x
npm install pita-css

CDN

linkタグをhead要素に設置することを推奨します。

HTML LSの仕様上bodyタグ内に設置はできます。

しかし、イレギュラーなことをしていることを自覚してください(怒)。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pita-css@latest/dist/PitaCSS.base.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pita-css@latest/dist/PitaCSS.css">

</body>タグの直前に配置することを推奨します。

<script src="https://cdn.jsdelivr.net/npm/pita-css@latest/dist/PitaCSS.js"></script>

CSSファイル

他のCSSフレームワークでも使いやすくするため、pita-css/style-baseとpita-css/styleに分かれています。

style-baseでは、PitaCSS固有の共通CSSが読み込まれます。 styleではPitaCSSの「Classレス」「変数」「低水準Class(ユーティリティクラス)」「ハイレベルClass」が読み込まれます。

@import "pita-css/style";

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

※import "pita-css/style"のようにJavaScript側でCSSを読み込むのは推奨しません。

  • レンダリングが遅れる可能性が高い
  • ビルドツールへの強い依存

JavaScript(インポート)

JavaScript

//読み込まれるもの PitaCSS.jsのみ
import "pita-css/js";
// もしくは
import "pita-css";
//読み込まれるもの PitaCSS.jsのみ

Vue

Vue(Nuxt)

onMounted(async () => {
await import('pita-css/js')
});

クライアント側でのみ実行させなければいけないため、onMountedでラップします。

Next.js (実験的)

実験的です

まず、コンポーネントを作ります。

'use client';

// file components/pitaCss.tsx

import { useEffect } from 'react';

export default function PitaCSSInit() {
  useEffect(() => {
    // PitaCSSのJavaScriptコンポーネントを動的インポート
    import('pita-css/js');
  }, []);

  return null;
}

これをlayout.tsxで読み込んでください。

例

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import TheHeader from "./components/TheHeader";
import TheAside from "./components/TheAside";
import PitaCssInit from "./components/pitaCss.tsx";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <PitaCSSInit />
        <TheHeader />
        <div className="container">
          <TheAside />
          <div className="content">
            <main className="pT40">{children}</main>
          </div>
        </div>
      </body>
    </html>
  );
}