\n \u003CTheHeader />\n \u003Cdiv className=\"container\">\n \u003CTheAside />\n \u003Cdiv className=\"content\">\n \u003Cmain className=\"pT40\">{children}\u003C/main>\n \u003C/div>\n \u003C/div>\n \u003C/body>\n \u003C/html>\n );\n} html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":17,"title":207,"titles":208,"content":209,"level":89},"相性が良いエコシステム",[],"PitaCSSは「ドキュメント型サイトに特化した」CSSフレームワークです。そのため、ドキュメンテーションやマニュアルサイトを作成する際によく使われる、「静的サイトジェネレータ」との相性が抜群です。",{"id":211,"title":16,"titles":212,"content":209,"level":89},"/docs/compatibility#相性",[],{"id":214,"title":215,"titles":216,"content":217,"level":100},"/docs/compatibility#良い","良い",[16],"VitePressNuxt Content\nNuxt Studioと組み合わせと、より強力になるでしょう。 Vue製のエコシステムとの親和性が高いです。\nそれ以外は壊滅的かも?",{"id":219,"title":220,"titles":221,"content":222,"level":100},"/docs/compatibility#普通","普通",[16],"バニラ環境",{"id":224,"title":225,"titles":226,"content":227,"level":100},"/docs/compatibility#悪い","悪い",[16],"WordPress",{"id":21,"title":20,"titles":229,"content":230,"level":89},[],"PitaCSSのターゲット層や合う合わない人、メリット、デメリットです。",{"id":232,"title":20,"titles":233,"content":230,"level":89},"/docs/premise#pitacssを使う前に",[],{"id":235,"title":236,"titles":237,"content":238,"level":100},"/docs/premise#pitacssが合う人","✅ PitaCSSが合う人",[20],"",{"id":240,"title":241,"titles":242,"content":243,"level":126},"/docs/premise#ドキュメント作成者","📚 ドキュメント作成者",[20,236],"技術文書・マニュアルを書く人Wikiを運営する人",{"id":245,"title":246,"titles":247,"content":248,"level":126},"/docs/premise#シンプル志向の開発者","🎯 シンプル志向の開発者",[20,236],"複雑なデザインシステムにうんざりしているHTMLを書くだけで見やすくシンプルなドキュメントサイトが欲しいカスタマイズは最小限で済ませたい",{"id":250,"title":251,"titles":252,"content":253,"level":126},"/docs/premise#素早くプロトタイプを作りたい人","🚀 素早くプロトタイプを作りたい人",[20,236],"\u003C!-- これだけで見やすいドキュメントページができる -->\n\u003Ch1>見出し\u003C/h1>\n\u003Cp>説明文\u003C/p>\n\u003Cul>\n \u003Cli>リスト\u003C/li>\n\u003C/ul>",{"id":255,"title":256,"titles":257,"content":258,"level":126},"/docs/premise#日本語コンテンツ重視","🌏 日本語コンテンツ重視",[20,236],"日本語の読みやすさを重視する縦書き・行間にこだわりがある",{"id":260,"title":261,"titles":262,"content":238,"level":100},"/docs/premise#pitacssが合わない人","❌ PitaCSSが合わない人",[20],{"id":264,"title":265,"titles":266,"content":267,"level":126},"/docs/premise#デザイン重視の開発者","🎨 デザイン重視の開発者",[20,261],"/* PitaCSSの限界例 */\n.custom-card {\n /* 独自のカードコンポーネントを作りたい! */\n /* → PitaCSSにはハイレベルClassがほぼない */\n}",{"id":269,"title":270,"titles":271,"content":272,"level":126},"/docs/premise#大規模アプリケーション開発","🏢 大規模アプリケーション開発",[20,261],"複雑なレイアウトが必要多数のUIコンポーネントが必要デザインシステムの統一が重要",{"id":274,"title":275,"titles":276,"content":238,"level":100},"/docs/premise#メリット","🎯 メリット",[20],{"id":278,"title":279,"titles":280,"content":281,"level":126},"/docs/premise#_1-学習コストはほとんどない","1. 学習コストはほとんどない",[20,275],"HTMLの知識だけで見やすいドキュメントサイトができる \u003Ch1>タイトル\u003C/h1>\n\u003Cp>本文\u003C/p>\n\u003Cdetails>\n \u003Csummary>詳細\u003C/summary>\n \u003Cp>内容\u003C/p>\n\u003C/details>",{"id":283,"title":284,"titles":285,"content":286,"level":126},"/docs/premise#_2-メンテナンス性","2. メンテナンス性",[20,275],"CSSフレームワークの更新に振り回されないHTMLの構造がシンプルvar.cssでテーマ変更が簡単",{"id":288,"title":289,"titles":290,"content":291,"level":126},"/docs/premise#_3-日本語最適化","3. 日本語最適化",[20,275],"/* 日本語に配慮された設定 */\nline-height: 2.2; /* 読みやすい行間 */\n--font-family: \"Noto Sans JP\", \"Yu Gothic Medium\" \"etc...\";",{"id":293,"title":294,"titles":295,"content":296,"level":126},"/docs/premise#_4-軽量高速","4. 軽量・高速",[20,275],"依存関係なし必要最小限のCSS/JSCDN不要",{"id":298,"title":299,"titles":300,"content":238,"level":100},"/docs/premise#️-デメリット","⚠️ デメリット",[20],{"id":302,"title":303,"titles":304,"content":305,"level":126},"/docs/premise#_1-デザインの制約","1. デザインの制約",[20,299],"/* できること */\nh1 { /* ブランドカラーのアクセント */ }\n.alert.success { /* 基本的なアラート */ }\n\n/* できないこと */\n.complex-dashboard { /* 複雑なダッシュボード */ }\n.animated-hero { /* 派手なヒーローセクション */ }",{"id":307,"title":308,"titles":309,"content":310,"level":126},"/docs/premise#_2-シンプルなドキュメント用なためアプリなどは作れない","2. シンプルなドキュメント用なため、アプリなどは作れない",[20,299],"モーダルなしドロップダウンなしタブなしカルーセルなし",{"id":312,"title":313,"titles":314,"content":315,"level":126},"/docs/premise#_3-カスタマイズの限界","3. カスタマイズの限界",[20,299],"/* 変更できるもの (var.css 変数) */\n:root {\n --brand-primary: #your-color; /* ブランドカラー */\n --text-base: 20px; /* フォントサイズ */\n}\n\n/* 変更しにくいもの */\nh1 {\n /* レイアウト構造は固定 */\n border-left: 4px solid var(--brand-secondary);\n}",{"id":317,"title":318,"titles":319,"content":320,"level":126},"/docs/premise#_4-エコシステムの小ささ自虐","4. エコシステムの小ささ(自虐)",[20,299],"コミュニティが小さいプラグインや拡張が少ないサンプル・テンプレートが限定的",{"id":322,"title":323,"titles":324,"content":325,"level":100},"/docs/premise#結論-pitacssを選ぶべき人","🎯 結論: PitaCSSを選ぶべき人",[20],"「見やすいドキュメントを素早く作りたいが、学習やデザインにそこまで時間をかけたくない人」 具体例: 技術文書を書くエンジニアシンプルなwikiを作りたいプロトタイプのドキュメンテーションを作る 逆に避けるべき人: 複雑なダッシュボードが必要独自のデザインシステムを構築したい html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"id":25,"title":24,"titles":327,"content":238,"level":89},[],{"id":329,"title":24,"titles":330,"content":331,"level":89},"/docs/construction#構造",[],"ページの一部のみ(Classレスの部分だけ使用など)する場合は、ScopedバージョンのPitaCSSがあります。 その場合、こちらをご覧ください。",{"id":333,"title":334,"titles":335,"content":336,"level":100},"/docs/construction#基本構造","基本構造",[24],"PitaCSSはドキュメンテーション特化型なので、ドキュメンテーション用の構造しか用意されていません。 以下の構造で構築します。 \u003C!-- ヘッダー -->\n \u003Cheader>\n \u003Cdiv class=\"logo-container hide-max1250\">\n \u003C!-- ロゴやテキストなど -->\n \u003C/div>\n \u003Cdiv class=\"logo-container-responsive hide-min1250\">\n \u003C!-- ロゴやテキストなど -->\n \u003C/div>\n \u003C/header>\n\n \u003C!-- メインコンテナ -->\n \u003Cdiv class=\"container\">\n \u003Cbutton class=\"nav-toggle\">☰\u003C/button>\n \u003C!-- オーバーレイ(モバイル用) -->\n \u003Cdiv class=\"nav-overlay\">\u003C/div>\n\n \u003C!-- サイドナビゲーション -->\n \u003Caside>\n \u003Cdiv class=\"aside-header\">\n \u003Ch2>ナビゲーション\u003C/h2>\n \u003C/div>\n \u003Cul>\n \u003Cli>\u003Ca href=\"#section1\">セクション1\u003C/a>\u003C/li>\n \u003Cli>\u003Ca href=\"#section2\">セクション2\u003C/a>\u003C/li>\n \u003C/ul>\n \u003C/aside>\n\n \u003C!-- メインコンテンツエリア -->\n \u003Cdiv class=\"content\">\n \u003Cmain class=\"pT40\">\n \u003C!-- ドキュメントの内容 -->\n \u003Ch1>ページタイトル\u003C/h1>\n \u003Cp>ページの内容をここに記述します。\u003C/p>\n \u003C/main>\n \u003C/div>\n \u003C/div>\n\n \u003Cfooter>\n \u003Cdiv class=\"content-center\">\n \u003Cp>ライセンス: MIT License\u003C/p>\n \u003C/div>\n \u003Csmall>コピーライト表記\u003C/small>\n \u003C/footer>",{"id":338,"title":339,"titles":340,"content":341,"level":100},"/docs/construction#ヘッダーheader","ヘッダー(header)",[24],"logo-container-responsive Classでモバイル用にロゴが最適化されます。 \u003Cheader>\n \u003Cdiv class=\"logo-container hide-max1250\">\n \u003C!-- ロゴやテキストなど -->\n \u003C/div>\n \u003Cdiv class=\"logo-container-responsive hide-min1250\">\n \u003C!-- ロゴやテキストなど -->\n \u003C/div>\n \u003C/header>",{"id":343,"title":344,"titles":345,"content":346,"level":100},"/docs/construction#フッターfooter","フッター(footer)",[24],"small 要素はサイトの下部などのコピーライト表記になどに使います。 footer要素のsmallを除く中の要素は、content-center クラスが付いたdivでラップすることをおすすめします。 \u003Cfooter>\n \u003Cdiv class=\"content-center\">\n \u003Cp>ライセンス: MIT License\u003C/p>\n \u003C/div>\n \u003Csmall>コピーライト表記\u003C/small>\n\u003C/footer>",{"id":348,"title":349,"titles":350,"content":238,"level":100},"/docs/construction#ナビゲーションnav","ナビゲーション(nav)",[24],{"id":352,"title":353,"titles":354,"content":355,"level":126},"/docs/construction#ドロップダウンメニュー","ドロップダウンメニュー",[24,349],"以下のような、aside直下のネストされたリストが「ドロップダウンメニュー」になります。 \u003Caside>\n \u003Cdiv class=\"aside-header\">\n \u003C!-- ヘッダー要素 -->\n \u003C/div>\n\n \u003Cul>\n \u003Cli>\n \u003C!-- ネストされたメニュー -->\n \u003Cul>\n \u003Cli>ドキュメント\u003C/li>\n \u003C/ul>\n \u003C/li>\n \u003C/ul>\n\u003C/aside> JavaScript、CSSともに設定は完全に不要です。",{"id":357,"title":358,"titles":359,"content":360,"level":126},"/docs/construction#ハンバーガーメニューtoggle-menu","ハンバーガーメニュー(Toggle menu)",[24,349],"JavaScriptでサイドバーのナビゲーションをレスポンシブ化します。そのためには以下の要素が必要です \u003Cdiv>\n \u003C!-- 必須 BEGIN -->\n \u003Cbutton class=\"nav-toggle\">☰\u003C/button>\n\n \u003Cdiv class=\"nav-overlay\">\u003C/div>\n\n \u003Caside>\n \u003C!-- ナビヘッダー -->\n\n \u003C!-- メニューリスト -->\n \u003C/aside>\n\u003C/div> html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":29,"title":28,"titles":362,"content":363,"level":89},[],"PitaCSSと他のフレームワークと併用をする場合等に使ってください。",{"id":365,"title":366,"titles":367,"content":368,"level":89},"/docs/scoped-local-section#scoped局所的な場所で使う-実験的","Scoped(局所的な場所)で使う (実験的)",[],"PitaCSSと他のフレームワークと併用をする場合等に使ってください。 以下の画像のような例が適しています。",{"id":370,"title":371,"titles":372,"content":373,"level":100},"/docs/scoped-local-section#逆に適していないもの","逆に適していないもの",[366],"以下のようにサイト全体やページ全体にPitaCSSを使う場合は適していません。pita-css/styleご利用ください。",{"id":375,"title":376,"titles":377,"content":378,"level":100},"/docs/scoped-local-section#使い方","使い方",[366],"まずはインポートします。 JavaScriptは必要に応じてインポートしてください。 @import \"pita-css/style-scoped\";",{"id":380,"title":381,"titles":382,"content":383,"level":126},"/docs/scoped-local-section#scopedをつける例","scopedをつける(例)",[366,376],"例として、記事の中身の部分だけにPitaCSSを適応させましょう。\n.pita-cssというClassがScoped用です。 \u003C!-- ヘッダー -->\n\n\u003C!-- サイドバー -->\n\u003Cmain class=\"pita-css\">\n\u003C!-- 記事の中身 -->\n\u003C/main>\n\n\u003C!-- フッター --> html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"id":33,"title":32,"titles":385,"content":386,"level":89},[],"PitaCSSのJavaScriptはバニラJSで記述されているため、フレームワーク、ライブラリへの依存がなく、なおかつ軽量です。",{"id":388,"title":32,"titles":389,"content":386,"level":89},"/docs/java-script#javascript",[],{"id":391,"title":392,"titles":393,"content":394,"level":100},"/docs/java-script#プログレスローダー","プログレスローダー",[32],"ページのローディングを監視して、整合性の取れたローディングプログレスバーをページ上部に表示します JavaScriptの設定は不要です CSSで以下のような設定をしてください。設定しないと初期状態では一部スタイルがついていおらず、不格好な表示になります。heightなど、値はカスタマイズ可能です。 #progress {\n height: 4px;\n z-index: 1000;\n width: 100%;\n}",{"id":396,"title":397,"titles":398,"content":399,"level":126},"/docs/java-script#無効化","無効化",[32,392],"インポート構文の前に無効化コードを書いてください。 window.progressLoader = { disabled: true } Vue onMounted(async () => {\n window.progressLoader = { disabled: true }\n\n await import('pita-css/js')\n});",{"id":401,"title":402,"titles":403,"content":404,"level":100},"/docs/java-script#ナビゲーション","ナビゲーション",[32],"ナビゲーション系のJavaScriptは無効にできません。",{"id":406,"title":353,"titles":407,"content":355,"level":126},"/docs/java-script#ドロップダウンメニュー",[32,402],{"id":409,"title":358,"titles":410,"content":411,"level":126},"/docs/java-script#ハンバーガーメニューtoggle-menu",[32,402],"JavaScriptでサイドバーのナビゲーションをレスポンシブ化します。そのためには以下の要素が必要です \u003Cdiv>\n \u003C!-- 必須 BEGIN -->\n \u003Cbutton class=\"nav-toggle\">☰\u003C/button>\n\n \u003Cdiv class=\"nav-overlay\">\u003C/div>\n\n \u003C!-- END -->\n\n \u003Caside>\n \u003C!-- ナビヘッダー -->\n\n \u003C!-- メニューリスト -->\n \u003C/aside>\n\u003C/div> ハンバーガーメニューが表示されている端末だと、ページを開いたら自動でメニューをクローズしてくれる機能があります。(Auto Close) SPA(CSR)にも対応しております",{"id":413,"title":414,"titles":415,"content":416,"level":100},"/docs/java-script#テーマ切り替えダークテーマ","テーマ切り替え(ダークテーマ)",[32],"JavaScript、CSSともに設定は完全に不要です。 ダークテーマとライトテーマを切り替えられます。\n標準はシステムのテーマです。 ローカルストレージに前回どのテーマを選択したか保存されます。次回アクセス時はその保存されたテーマが適応されます。",{"id":418,"title":376,"titles":419,"content":420,"level":126},"/docs/java-script#使い方",[32,414],"ボタンで切り替える場合。(自動でトグルになります) \u003Cbutton data-theme-toggle >🔄\u003C/button> セレクトボックスの場合、data-theme-selectをselect要素につけ、\noption要素のvalue属性に下のコードのように入力してください。 \u003Cselect data-theme-select >\n \u003Coption value=\"auto\">💻 システム設定\u003C/option>\n \u003Coption value=\"light\">☀️ ライト\u003C/option>\n \u003Coption value=\"dark\">🌙 ダーク\u003C/option>\n\u003C/select>",{"id":422,"title":397,"titles":423,"content":424,"level":126},"/docs/java-script#無効化-1",[32,414],"インポート構文の前に無効化コードを書いてください。 window.pitaTheme = { disabled: true }; Vue onMounted(async () => {\n window.pitaTheme = { disabled: true };\n\n await import('pita-css/js')\n});",{"id":426,"title":427,"titles":428,"content":429,"level":100},"/docs/java-script#タブコンポーネント-tabs","タブコンポーネント (Tabs)",[32],"JavaScript、CSSともに設定は完全に不要です。 activeクラスが付いてる場合、そのタブがアクティブになります。\nこのactiveクラスはtabs-nav内のボタンを押下することで自動で制御されます。 例 test1test2",{"id":431,"title":432,"titles":433,"content":434,"level":126},"/docs/java-script#コード","コード",[32,427],"\u003Cdiv class=\"tabs\">\n \u003Cdiv class=\"tabs-nav\">\n \u003Cbutton class=\"tab-button active\" aria-selected=\"true\">タブ1\u003C/button>\n \u003Cbutton class=\"tab-button\" aria-selected=\"false\">タブ2\u003C/button>\n \u003Cbutton class=\"tab-button\" aria-selected=\"false\">タブ3\u003C/button>\n \u003C/div>\n \u003Cdiv class=\"tabs-content\">\n \u003Cdiv class=\"tab-panel active\" aria-hidden=\"false\">\n \u003Cp>ここにタブ1の内容が入ります。\u003C/p>\n \u003C/div>\n \u003Cdiv class=\"tab-panel\" aria-hidden=\"true\">\n \u003Cp>ここにタブ2の内容が入ります。\u003C/p>\n \u003C/div>\n \u003Cdiv class=\"tab-panel\" aria-hidden=\"true\">\n \u003Cp>ここにタブ3の内容が入ります。\u003C/p>\n \u003C/div>\n \u003C/div>\n\u003C/div>",{"id":436,"title":437,"titles":438,"content":439,"level":126},"/docs/java-script#vueコンポーネント化","Vueコンポーネント化",[32,427],"\u003Ctemplate>\n \u003Cdiv class=\"tabs\">\n \u003Cdiv class=\"tabs-nav\">\n \u003Cbutton v-for=\"(tab, index) in tabs\" :key=\"index\" class=\"tab-button\"\n :class=\"{ active: activeTab === index }\" :aria-selected=\"activeTab === index\"\n @click=\"setActiveTab(index)\">\n {{ tab.title }}\n \u003C/button>\n \u003C/div>\n \u003Cdiv class=\"tabs-content\">\n \u003Cdiv v-for=\"(tab, index) in tabs\" :key=\"index\" class=\"tab-panel\" :class=\"{ active: activeTab === index }\"\n :aria-hidden=\"activeTab !== index\">\n \u003Cslot :name=\"`tab-${index}`\" :tab=\"tab\">\n \u003Ch3>{{ tab.title }}\u003C/h3>\n \u003Cp>{{ tab.content }}\u003C/p>\n \u003C/slot>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst props = defineProps({\n tabs: {\n type: Array,\n default: () => [\n { title: 'タブ1', content: 'ここにタブ1の内容が入ります。' }\n ]\n },\n defaultTab: {\n type: Number,\n default: 0\n }\n})\n\nconst activeTab = ref(props.defaultTab)\n\nconst setActiveTab = (index) => {\n activeTab.value = index\n}\n\u003C/script>",{"id":441,"title":442,"titles":443,"content":444,"level":126},"/docs/java-script#vueコンポーネント使用時","Vueコンポーネント(使用時)",[32,427],"\u003Ctemplate>\n \u003Cdiv>\n \u003CTabs :tabs=\"tabsData\" :default-tab=\"0\">\n \u003Ctemplate #tab-0>\n \u003Cpre>\u003Ccode>\ntest0\n \u003C/code>\u003C/pre>\n \u003C/template>\n \n \u003Ctemplate #tab-1>\n \u003Cpre>\u003Ccode>\n test2\n \u003C/code>\u003C/pre>\n \u003C/template>\n \u003C/Tabs>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst tabsData = [\n { title: 'test0' },\n { title: 'test1' },\n]\n\u003C/script>",{"id":446,"title":397,"titles":447,"content":448,"level":126},"/docs/java-script#無効化-2",[32,427],"インポート構文の前に無効化コードを書いてください。 window.pitaTabs = { disabled: true }; html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":37,"title":450,"titles":451,"content":238,"level":89},"PitaCSS Classレス(クラスレス)",[],{"id":453,"title":450,"titles":454,"content":238,"level":89},"/docs/class-less#pitacss-classレスクラスレス",[],{"id":456,"title":92,"titles":457,"content":458,"level":100},"/docs/class-less#概要",[450],"PitaCSSのClasslessスタイルは、HTMLタグに直接適用されるスタイルです。クラス名を一切書かずに、HTMLタグだけで見やすいドキュメントが完成します。",{"id":460,"title":461,"titles":462,"content":238,"level":100},"/docs/class-less#基本構造レイアウト","📄 基本構造・レイアウト",[450],{"id":464,"title":465,"titles":466,"content":467,"level":126},"/docs/class-less#htmlbodybasecss","HTML・Body(base.css)",[450,461],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n\u003C/head>\n\u003Cbody>\n \u003C!-- body内のコンテンツ -->\n\u003C/body>\n\u003C/html> 適用されるスタイル: リセットCSS全体のスタイル改行: word-break: break-wordスムーススクロール: scroll-behavior: smooth-webkit-プレフィックスでのスクロールバーカスタマイズ(ブランドカラーが適応されます)",{"id":469,"title":470,"titles":471,"content":472,"level":126},"/docs/class-less#メインレイアウトmaincss","メインレイアウト(main.css)",[450,461],"\u003Cdiv class=\"container\">\n \u003Caside>\n \u003C!-- サイドナビゲーション -->\n \u003C/aside>\n \n \u003Cdiv class=\"content\">\n \u003Cmain>\n \u003C!-- メインコンテンツ -->\n \u003C/main>\n \u003C/div>\n\u003C/div> レスポンシブ対応: 1250px以上: サイドバー + メインコンテンツ1250px以下: ハンバーガーメニュー + メインコンテンツ",{"id":474,"title":475,"titles":476,"content":238,"level":100},"/docs/class-less#テキスト見出し","📝 テキスト・見出し",[450],{"id":478,"title":479,"titles":480,"content":481,"level":126},"/docs/class-less#見出しheadings","見出し(Headings)",[450,475],"\u003Ch1>メインタイトル\u003C/h1>\n\u003Ch2>セクションタイトル\u003C/h2>\n\u003Ch3>サブセクション\u003C/h3>\n\u003Ch4>詳細見出し\u003C/h4>\n\u003Ch5>補足見出し\u003C/h5>\n\u003Ch6>最小見出し\u003C/h6> スタイル特徴: h1: 背景色 + 左ボーダー(アクセント)h2: 下ボーダー線h3-h6: シンプルなボールド",{"id":483,"title":484,"titles":485,"content":486,"level":126},"/docs/class-less#段落","段落",[450,475],"\u003Cp>段落テキストです。日本語の読みやすさを重視した行間設定になっています。\u003C/p> 特徴: 行間: line-height: 2.2(日本語最適化)",{"id":488,"title":489,"titles":490,"content":491,"level":100},"/docs/class-less#テキストsmall","テキスト(small)",[450],"\u003Csmall>補足情報や注釈に使用\u003C/small> 特徴: 最小サイズ(13px固定)",{"id":493,"title":494,"titles":495,"content":238,"level":100},"/docs/class-less#リストlists","📋 リスト(Lists)",[450],{"id":497,"title":498,"titles":499,"content":500,"level":126},"/docs/class-less#基本リスト","基本リスト",[450,494],"\u003C!-- 箇条書きリスト -->\n\u003Cul>\n \u003Cli>リストアイテム1\u003C/li>\n \u003Cli>リストアイテム2\n \u003Cul>\n \u003Cli>ネストしたアイテム\u003C/li>\n \u003Cli>ネストしたアイテム2\u003C/li>\n \u003C/ul>\n \u003C/li>\n \u003Cli>リストアイテム3\u003C/li>\n\u003C/ul>\n\n\u003C!-- 番号付きリスト -->\n\u003Col>\n \u003Cli>順序付きアイテム1\u003C/li>\n \u003Cli>順序付きアイテム2\u003C/li>\n \u003Cli>順序付きアイテム3\u003C/li>\n\u003C/ol> 特徴: ネスト対応: 自動的に階層表示",{"id":502,"title":503,"titles":504,"content":238,"level":100},"/docs/class-less#️-メディア要素","🖼️ メディア要素",[450],{"id":506,"title":507,"titles":508,"content":509,"level":126},"/docs/class-less#画像images","画像(Images)",[450,503],"\u003Cimg src=\"image.jpg\" alt=\"説明テキスト\"> 自動適用される特徴: レスポンシブオブジェクトフィット: object-fit: contain",{"id":511,"title":512,"titles":513,"content":514,"level":126},"/docs/class-less#水平線horizontal-rule","水平線(Horizontal Rule)",[450,503],"\u003Chr> スタイル: ブランドカラーの細線",{"id":516,"title":517,"titles":518,"content":238,"level":100},"/docs/class-less#テーブルtables","📊 テーブル(Tables)",[450],{"id":520,"title":521,"titles":522,"content":523,"level":126},"/docs/class-less#基本テーブル","基本テーブル",[450,517],"\u003Ctable>\n \u003Cthead>\n \u003Ctr>\n \u003Cth>ヘッダー1\u003C/th>\n \u003Cth>ヘッダー2\u003C/th>\n \u003Cth>ヘッダー3\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr>\n \u003Ctd>データ1\u003C/td>\n \u003Ctd>データ2\u003C/td>\n \u003Ctd>データ3\u003C/td>\n \u003C/tr>\n \u003Ctr>\n \u003Ctd>データ4\u003C/td>\n \u003Ctd>データ5\u003C/td>\n \u003Ctd>データ6\u003C/td>\n \u003C/tr>\n \u003C/tbody>\n\u003C/table>\n\n\u003C!-- 補足情報 -->\n\u003Ctable>\n \u003Ctr>\n \u003Ctd>項目\u003C/td>\n \u003Ctd>値\n \u003Csmall>補足説明\u003C/small>\n \u003C/td>\n \u003C/tr>\n\u003C/table> 自動適用される機能: ヘッダー強調: 背景色で区別縞模様: 偶数行に背景色レスポンシブ: 768px以下で横スクロールsmall要素をtable要素の中に入れると、テーブルに適切なスタイルになります レスポンシブにするために、テーブル要素自体をコンテナで囲う必要はありません。テーブル要素にthead,tbody 要素があれば自動的にレスポンシブになります。",{"id":525,"title":526,"titles":527,"content":238,"level":100},"/docs/class-less#引用詳細","💬 引用・詳細",[450],{"id":529,"title":530,"titles":531,"content":532,"level":126},"/docs/class-less#引用blockquote","引用(Blockquote)",[450,526],"\u003Cblockquote>\n \u003Cp>引用文です。重要な文章や他者の言葉を引用する際に使用します。\u003C/p>\n \u003Cp>複数段落の引用も可能です。\u003C/p>\n\u003C/blockquote> スタイル: 背景色 + 左ボーダーアクセント(ブランドカラー)",{"id":534,"title":535,"titles":536,"content":537,"level":126},"/docs/class-less#詳細折りたたみdetails","詳細・折りたたみ(Details)",[450,526],"\u003Cdetails>\n \u003Csummary>クリックして詳細を表示\u003C/summary>\n \u003Cp>ここに詳細内容が表示されます。\u003C/p>\n \u003Cp>複数の段落も含められます。\u003C/p>\n\u003C/details>\n\n\u003Cdetails open>\n \u003Csummary>最初から開いている詳細\u003C/summary>\n \u003Cp>open属性で初期状態で開いた状態にできます。\u003C/p>\n\u003C/details> インタラクティブ機能: 矢印アイコン: 三角形アイコンがアニメーションしますアクセシブル: キーボード操作対応",{"id":539,"title":540,"titles":541,"content":238,"level":100},"/docs/class-less#コード技術要素","💻 コード・技術要素",[450],{"id":543,"title":544,"titles":545,"content":546,"level":126},"/docs/class-less#インラインコード","インラインコード",[450,540],"\u003Cp>\u003Ccode>const variable = \"value\";\u003C/code> のようにコードを表示できます。\u003C/p>",{"id":548,"title":549,"titles":550,"content":551,"level":126},"/docs/class-less#コードブロック","コードブロック",[450,540],"\u003Cpre>\u003Ccode>function example() {\n console.log(\"Hello, World!\");\n return true;\n}\u003C/code>\u003C/pre> レスポンシブにするために、コードブロック要素自体をコンテナで囲う必要はありません。コードブロック要素に\u003Ccode> 要素があれば自動的にレスポンシブになります。",{"id":553,"title":554,"titles":555,"content":556,"level":126},"/docs/class-less#キーボード入力","キーボード入力",[450,540],"\u003Cp>\u003Ckbd>Ctrl\u003C/kbd> + \u003Ckbd>C\u003C/kbd> でコピーできます。\u003C/p>\n\u003Cp>\u003Ckbd>⌘\u003C/kbd> + \u003Ckbd>V\u003C/kbd> で貼り付けできます。\u003C/p> スタイル特徴: コード: 背景色で区別、固定幅フォントkbd: キーボードキー風の立体的デザイン",{"id":558,"title":559,"titles":560,"content":238,"level":100},"/docs/class-less#フォーム要素","📝 フォーム要素",[450],{"id":562,"title":563,"titles":564,"content":565,"level":126},"/docs/class-less#基本フォーム","基本フォーム",[450,559],"\u003Cform>\n \u003Clabel for=\"name\">お名前\u003C/label>\n \u003Cinput type=\"text\" id=\"name\" placeholder=\"山田太郎\">\n \n \u003Clabel for=\"email\">メールアドレス\u003C/label>\n \u003Cinput type=\"email\" id=\"email\" placeholder=\"example@domain.com\">\n \n \u003Clabel for=\"message\">メッセージ\u003C/label>\n \u003Ctextarea id=\"message\" rows=\"4\" placeholder=\"お問い合わせ内容\">\u003C/textarea>\n \n \u003Clabel for=\"category\">カテゴリ\u003C/label>\n \u003Cselect id=\"category\">\n \u003Coption value=\"\">選択してください\u003C/option>\n \u003Coption value=\"general\">一般\u003C/option>\n \u003Coption value=\"support\">サポート\u003C/option>\n \u003C/select>\n \n \u003Cbutton type=\"submit\">送信\u003C/button>\n \u003Cinput type=\"submit\" value=\"送信(input版)\">\n\u003C/form> 自動適用される機能: フォーカス状態: ブランドカラーで強調バリデーション: エラー時は赤色表示レスポンシブ: 幅100%で自動調整",{"id":567,"title":568,"titles":569,"content":238,"level":100},"/docs/class-less#プログレスバー","📊 プログレスバー",[450],{"id":571,"title":572,"titles":573,"content":574,"level":126},"/docs/class-less#基本プログレス","基本プログレス",[450,568],"\u003C!-- 値指定プログレス -->\n\u003Cprogress value=\"70\" max=\"100\">\u003C/progress>\n\n\u003C!-- ストライプアニメーション -->\n\u003Cprogress value=\"50\" max=\"100\" class=\"stripe\">\u003C/progress>\n\n\u003C!-- 不確定プログレス(値なし) -->\n\u003Cprogress>\u003C/progress> 自動アニメーション: ストライプ: 斜線パターンが流れる不確定: 左右に移動するアニメーション",{"id":576,"title":577,"titles":578,"content":238,"level":100},"/docs/class-less#ボタン","🔘 ボタン",[450],{"id":580,"title":581,"titles":582,"content":583,"level":126},"/docs/class-less#基本ボタン","基本ボタン",[450,577],"\u003Cbutton>標準ボタン\u003C/button>\n\u003Cbutton disabled>無効ボタン\u003C/button> 自動適用される効果: ホバー効果: 上に浮き上がる無効状態: 半透明で操作不可円角: 完全な円角デザイン",{"id":585,"title":586,"titles":587,"content":238,"level":100},"/docs/class-less#リンク","🔗 リンク",[450],{"id":589,"title":590,"titles":591,"content":592,"level":126},"/docs/class-less#基本リンク","基本リンク",[450,586],"\u003Cp>こちらは\u003Ca href=\"https://example.com\">外部リンク\u003C/a>です。\u003C/p>\n\u003Cp>\u003Ca href=\"#section1\">ページ内リンク\u003C/a>でセクションに移動できます。\u003C/p>\n\u003Cp>\u003Ca href=\"mailto:contact@example.com\">メールリンク\u003C/a>もサポートしています。\u003C/p> 自動適用される状態: 通常: 水色訪問済み: 紫色ホバー: 下線表示アクティブ: グレー色",{"id":594,"title":595,"titles":596,"content":597,"level":100},"/docs/class-less#セクション","📄 セクション",[450],"\u003Csection>\n \u003Ch2>セクションタイトル\u003C/h2>\n \u003Cp>セクションの内容です。\u003C/p>\n\u003C/section> マージンが上下につきます。それだけです。",{"id":599,"title":600,"titles":601,"content":602,"level":100},"/docs/class-less#ヘッダー","ヘッダー",[450],"\u003Cheader>\n \u003Cdiv class=\"logo-container hide-max1250\">\n \u003C!-- ロゴやテキストなど -->\n \u003C/div>\n \u003Cdiv class=\"logo-container-responsive hide-min1250\">\n \u003C!-- ロゴやテキストなど -->\n \u003C/div>\n \u003C/header> ヘッダーのスタイル: 背景色: 白シャドー付きロゴコンテナ付き\nlogo-container-responsive は画像の大きさが小さくなります",{"id":604,"title":605,"titles":606,"content":607,"level":100},"/docs/class-less#フッター","フッター",[450],"\u003Cfooter>\n \u003Csmall>©2025 PitaMai Technorogy\u003C/small>\n\u003C/footer> フッターのスタイル: 背景色: 白上ボーダー: ブランドカラーsmall要素: 区切り線付きで中央配置",{"id":609,"title":610,"titles":611,"content":612,"level":89},"/docs/class-less#pitacss-利用可能なcss変数リファレンス","PitaCSS 利用可能なCSS変数リファレンス",[],"PitaCSSでは、テーマやデザインを柔軟にカスタマイズできるよう、多数のCSSカスタムプロパティ(変数)が用意されています。 ここでは、var.css で定義されている主な変数とその用途をまとめます。",{"id":614,"title":615,"titles":616,"content":617,"level":100},"/docs/class-less#pitacss-利用可能なcss変数","PitaCSS 利用可能なCSS変数",[610],"変数名用途デフォルト値--brand-primary-baseメインブランドカラー(ベース)#8bc170--brand-primaryメインブランドカラー(透過調整)color-mix(in srgb, var(--brand-primary-base) 80%, transparent)--brand-secondary-baseサブブランドカラー(ベース)#4d663e--brand-secondaryサブブランドカラー(透過調整)color-mix(in srgb, var(--brand-secondary-base) 80%, transparent)",{"id":619,"title":620,"titles":621,"content":622,"level":126},"/docs/class-less#グレースケール","グレースケール",[610,615],"変数名用途ライトモードダークモード--gray-primaryメイン背景色#ffffff#0f172a--gray-secondaryサブ背景色#f8f9fa#1e293b--gray-tertiary装飾用背景色#eceff1#334155",{"id":624,"title":625,"titles":626,"content":627,"level":126},"/docs/class-less#テキストカラー","テキストカラー",[610,615],"変数名用途ライトモードダークモード--text-primaryメインテキスト#333333#f1f5f9--text-secondaryサブテキスト#666666#cbd5e1--text-muted補助テキスト#999999#94a3b8--text-primary-inverse逆配色用メインテキスト#f1f5f9#333333--text-secondary-inverse逆配色用サブテキスト#cbd5e1#666666--text-muted-inverse逆配色用補助テキスト#94a3b8#999999--white明示的な白#ffffff#ffffff--dark明示的な黒#222#222",{"id":629,"title":630,"titles":631,"content":632,"level":126},"/docs/class-less#ボーダー","ボーダー",[610,615],"変数名用途ライトモードダークモード--border-primaryメインボーダー#e5e7eb#475569--border-secondaryサブボーダー#f3f4f6#334155",{"id":634,"title":635,"titles":636,"content":637,"level":126},"/docs/class-less#ステータスカラー","ステータスカラー",[610,615],"変数名用途ライトモードダークモード--status-info情報#3b82f6#60a5fa--status-success成功#10b981#34d399--status-warning警告#f59e0b#fbbf24--status-errorエラー#ef4444#f87171--status-info-light情報(薄)#dbeafe#1e3a8a20--status-success-light成功(薄)#d1fae5#14532d20--status-warning-light警告(薄)#fef3c7#92400e20--status-error-lightエラー(薄)#fee2e2#7f1d1d20",{"id":639,"title":640,"titles":641,"content":642,"level":126},"/docs/class-less#リンクカラー","リンクカラー",[610,615],"変数名用途ライトモードダークモード--link-primary通常リンク#1570d4#60a5fa--link-hoverホバー時#1e40af#93c5fd--link-activeアクティブ時#7d7d7d96---link-visited訪問済み#a15ccc#c084fc",{"id":644,"title":645,"titles":646,"content":647,"level":126},"/docs/class-less#シャドウ","シャドウ",[610,615],"変数名用途値--shadow-sm小さな影0px 4px 5px -3px rgba(0, 0, 0, 0.3), -1px -3px 5px -3px rgba(0, 0, 0, 0.25)--shadow-md中くらいの影0px 4px 8px rgba(0, 0, 0, 0.15)--shadow-lg大きな影0px 2px 10px -3px rgba(0, 0, 0, 0.3)",{"id":649,"title":650,"titles":651,"content":652,"level":100},"/docs/class-less#タイポグラフィ","📝 タイポグラフィ",[610],"変数名用途値--font-familyフォントファミリー\"Noto Sans JP\", \"Yu Gothic Medium\", \"YuGothic\", \"ヒラギノ角ゴシック\", \"system-ui\"--text-xs極小テキスト13px--text-sm小テキスト15px--text-base標準テキストclamp(16px, 2.08vw, 18px)--text-lg大きめテキストclamp(20px, 2.604vw, 25px)--text-xl特大テキストclamp(23px, 2.99vw, 30px)--text-2xl最大テキストclamp(30px, 3.89vw, 40px)",{"id":654,"title":655,"titles":656,"content":657,"level":100},"/docs/class-less#備考","📝 備考",[610],"変数は全て :root でグルーバルに定義されているため、どのCSSからでも参照可能です。テーマ切替は data-theme 属性またはシステム設定で自動反映されます。color-mix 関数を使用し、濃いめなブランドカラーを設定しても柔らかい色になります。日本語文書に最適なフォント・行間設計になっています。 html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":41,"title":659,"titles":660,"content":238,"level":89},"PitaCSS 低水準Class(ユーティリティクラス)",[],{"id":662,"title":659,"titles":663,"content":238,"level":89},"/docs/low-level#pitacss-低水準classユーティリティクラス",[],{"id":665,"title":92,"titles":666,"content":667,"level":100},"/docs/low-level#概要",[659],"PitaCSSの低水準Classは、HTMLタグのClasslessスタイルに加えて細かい調整を行うためのユーティリティクラスです。直感的な命名規則で、必要な箇所にピンポイントで適用できます。",{"id":669,"title":670,"titles":671,"content":672,"level":100},"/docs/low-level#余白の命名規則の特徴","🎯 余白の命名規則の特徴",[659],"短縮形: margin-top → mT (被らないようにtopのTなどが大文字になっています)数値指定: 10px, 20px, 40px, 60px の4段階方向指定: 全方向(m10等), T(Top), B(Bottom), L(Left), R(Right), X(水平), Y(垂直)重要度: すべて !important 付きで確実に適用",{"id":674,"title":675,"titles":676,"content":238,"level":100},"/docs/low-level#マージン","📏 マージン",[659],{"id":678,"title":679,"titles":680,"content":681,"level":126},"/docs/low-level#全方向マージン","全方向マージン",[659,675],"\u003Cdiv class=\"m10\">全方向10px\u003C/div>\n\u003Cdiv class=\"m20\">全方向20px\u003C/div>\n\u003Cdiv class=\"m40\">全方向40px\u003C/div>\n\u003Cdiv class=\"m60\">全方向60px\u003C/div>",{"id":683,"title":684,"titles":685,"content":686,"level":126},"/docs/low-level#方向別マージン","方向別マージン",[659,675],"\u003C!-- 上方向 -->\n\u003Cdiv class=\"mT10\">上10px\u003C/div>\n\u003Cdiv class=\"mT20\">上20px\u003C/div>\n\u003Cdiv class=\"mT40\">上40px\u003C/div>\n\u003Cdiv class=\"mT60\">上60px\u003C/div>\n\n\u003C!-- 右方向 -->\n\u003Cdiv class=\"mR10\">右10px\u003C/div>\n\u003Cdiv class=\"mR20\">右20px\u003C/div>\n\u003Cdiv class=\"mR40\">右40px\u003C/div>\n\u003Cdiv class=\"mR60\">右60px\u003C/div>\n\n\u003C!-- 下方向 -->\n\u003Cdiv class=\"mB10\">下10px\u003C/div>\n\u003Cdiv class=\"mB20\">下20px\u003C/div>\n\u003Cdiv class=\"mB40\">下40px\u003C/div>\n\u003Cdiv class=\"mB60\">下60px\u003C/div>\n\n\u003C!-- 左方向 -->\n\u003Cdiv class=\"mL10\">左10px\u003C/div>\n\u003Cdiv class=\"mL20\">左20px\u003C/div>\n\u003Cdiv class=\"mL40\">左40px\u003C/div>\n\u003Cdiv class=\"mL60\">左60px\u003C/div>",{"id":688,"title":689,"titles":690,"content":691,"level":126},"/docs/low-level#軸別マージン","軸別マージン",[659,675],"\u003C!-- 水平方向(左右) -->\n\u003Cdiv class=\"mX10\">左右10px\u003C/div>\n\u003Cdiv class=\"mX20\">左右20px\u003C/div>\n\u003Cdiv class=\"mX40\">左右40px\u003C/div>\n\u003Cdiv class=\"mX60\">左右60px\u003C/div>\n\n\u003C!-- 垂直方向(上下) -->\n\u003Cdiv class=\"mY10\">上下10px\u003C/div>\n\u003Cdiv class=\"mY20\">上下20px\u003C/div>\n\u003Cdiv class=\"mY40\">上下40px\u003C/div>\n\u003Cdiv class=\"mY60\">上下60px\u003C/div>",{"id":693,"title":694,"titles":695,"content":238,"level":100},"/docs/low-level#パディング","📦 パディング",[659],{"id":697,"title":698,"titles":699,"content":700,"level":126},"/docs/low-level#全方向パディング","全方向パディング",[659,694],"\u003Cdiv class=\"p10\">全方向10px\u003C/div>\n\u003Cdiv class=\"p20\">全方向20px\u003C/div>\n\u003Cdiv class=\"p40\">全方向40px\u003C/div>\n\u003Cdiv class=\"p60\">全方向60px\u003C/div>",{"id":702,"title":703,"titles":704,"content":705,"level":126},"/docs/low-level#方向別パディング","方向別パディング",[659,694],"\u003C!-- 上方向 -->\n\u003Cdiv class=\"pT10\">上10px\u003C/div>\n\u003Cdiv class=\"pT20\">上20px\u003C/div>\n\u003Cdiv class=\"pT40\">上40px\u003C/div>\n\u003Cdiv class=\"pT60\">上60px\u003C/div>\n\n\u003C!-- 右方向 -->\n\u003Cdiv class=\"pR10\">右10px\u003C/div>\n\u003Cdiv class=\"pR20\">右20px\u003C/div>\n\u003Cdiv class=\"pR40\">右40px\u003C/div>\n\u003Cdiv class=\"pR60\">右60px\u003C/div>\n\n\u003C!-- 下方向 -->\n\u003Cdiv class=\"pB10\">下10px\u003C/div>\n\u003Cdiv class=\"pB20\">下20px\u003C/div>\n\u003Cdiv class=\"pB40\">下40px\u003C/div>\n\u003Cdiv class=\"pB60\">下60px\u003C/div>\n\n\u003C!-- 左方向 -->\n\u003Cdiv class=\"pL10\">左10px\u003C/div>\n\u003Cdiv class=\"pL20\">左20px\u003C/div>\n\u003Cdiv class=\"pL40\">左40px\u003C/div>\n\u003Cdiv class=\"pL60\">左60px\u003C/div>",{"id":707,"title":708,"titles":709,"content":710,"level":126},"/docs/low-level#軸別パディング","軸別パディング",[659,694],"\u003C!-- 水平方向(左右) -->\n\u003Cdiv class=\"pX10\">左右10px\u003C/div>\n\u003Cdiv class=\"pX20\">左右20px\u003C/div>\n\u003Cdiv class=\"pX40\">左右40px\u003C/div>\n\u003Cdiv class=\"pX60\">左右60px\u003C/div>\n\n\u003C!-- 垂直方向(上下) -->\n\u003Cdiv class=\"pY10\">上下10px\u003C/div>\n\u003Cdiv class=\"pY20\">上下20px\u003C/div>\n\u003Cdiv class=\"pY40\">上下40px\u003C/div>\n\u003Cdiv class=\"pY60\">上下60px\u003C/div>",{"id":712,"title":713,"titles":714,"content":238,"level":100},"/docs/low-level#幅レスポンシブ","📐 幅・レスポンシブ",[659],{"id":716,"title":717,"titles":718,"content":719,"level":126},"/docs/low-level#基本の幅","基本の幅",[659,713],"\u003Cdiv class=\"w100\">幅100%\u003C/div>\n\u003Cdiv class=\"w50\">幅50%\u003C/div>\n\u003Cdiv class=\"fit-content\">コンテンツに合わせた幅\u003C/div>",{"id":721,"title":722,"titles":723,"content":724,"level":126},"/docs/low-level#最大幅中央揃え","最大幅(中央揃え)",[659,713],"\u003Cdiv class=\"w-max768\">最大幅768px(中央揃え)\u003C/div>\n\u003Cdiv class=\"w-max1250\">最大幅1250px(中央揃え)\u003C/div>",{"id":726,"title":727,"titles":728,"content":729,"level":126},"/docs/low-level#レスポンシブ表示切替","レスポンシブ表示切替",[659,713],"\u003C!-- 768px以下で非表示 -->\n\u003Cdiv class=\"hide-max768\">スマホで非表示\u003C/div>\n\n\u003C!-- 1250px以下で非表示 -->\n\u003Cdiv class=\"hide-max1250\">タブレット以下で非表示\u003C/div>\n\n\u003C!-- 768px以上で非表示 -->\n\u003Cdiv class=\"hide-min768\">PC・タブレットで非表示\u003C/div>\n\n\u003C!-- 1250px以上で非表示 -->\n\u003Cdiv class=\"hide-min1250\">大画面PCで非表示\u003C/div>",{"id":731,"title":732,"titles":733,"content":734,"level":100},"/docs/low-level#フォントサイズ","🎨 フォントサイズ",[659],"\u003Cspan class=\"text-xs\">最小(13px)\u003C/span>\n\u003Cspan class=\"text-sm\">小(15px)\u003C/span>\n\u003Cspan class=\"text-base\">標準(clamp: 16-18px)\u003C/span>\n\u003Cspan class=\"text-lg\">大(clamp: 20-25px)\u003C/span>\n\u003Cspan class=\"text-xl\">特大(clamp: 23-30px)\u003C/span>\n\u003Cspan class=\"text-2xl\">最大(clamp: 30-40px)\u003C/span>",{"id":736,"title":737,"titles":738,"content":238,"level":100},"/docs/low-level#配置整列","📍 配置・整列",[659],{"id":740,"title":741,"titles":742,"content":743,"level":126},"/docs/low-level#コンテンツ配置-こちらを推奨","コンテンツ配置 (こちらを推奨)",[659,737],"\u003Cdiv class=\"content-left\">左寄せ\u003C/div>\n\u003Cdiv class=\"content-center\">中央寄せ\u003C/div>\n\u003Cdiv class=\"content-right\">右寄せ\u003C/div>",{"id":745,"title":746,"titles":747,"content":748,"level":126},"/docs/low-level#テキスト配置","テキスト配置",[659,737],"\u003Cdiv class=\"text-left\">テキスト左寄せ\u003C/div>\n\u003Cdiv class=\"text-center\">テキスト中央寄せ\u003C/div>\n\u003Cdiv class=\"text-right\">テキスト右寄せ\u003C/div>",{"id":750,"title":586,"titles":751,"content":752,"level":100},"/docs/low-level#リンク",[659],"\u003C!-- 親要素の色を継承するリンク -->\n\u003Ca href=\"#\" class=\"inherit-link\">色を継承するリンク\u003C/a>",{"id":754,"title":755,"titles":756,"content":757,"level":100},"/docs/low-level#使用例","💡 使用例",[659],"\u003Ch1 class=\"mB20\">マージンボトム20px\u003C/h1> これらの低水準Classを段階的に使うことで、効率よくPitaCSSを使用できます。 html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":45,"title":759,"titles":760,"content":238,"level":89},"PitaCSS ハイレベルClass",[],{"id":762,"title":759,"titles":763,"content":238,"level":89},"/docs/high-level#pitacss-ハイレベルclass",[],{"id":765,"title":92,"titles":766,"content":767,"level":100},"/docs/high-level#概要",[759],"ハイレベルClassは、複雑なレイアウトやUIコンポーネントを簡単に実装するための高機能なクラスです。低水準Classやクラスレスの上位に位置し、より具体的なデザインパターンを提供します。",{"id":769,"title":770,"titles":771,"content":772,"level":100},"/docs/high-level#メディアテキストmedia-text","📰 メディアテキスト(.media-text)",[759],"テキストと画像を横並びで配置するレイアウトコンポーネントです。レスポンシブ対応で、小画面では縦並びに自動変更されます。",{"id":774,"title":775,"titles":776,"content":777,"level":126},"/docs/high-level#基本的な使い方","基本的な使い方",[759,770],"\u003Cdiv class=\"media-text\">\n \u003Cdiv>\n \u003Ch3>タイトル\u003C/h3>\n \u003Cp>ここにテキストコンテンツを記述します。画像と横並びで表示され、レスポンシブに対応しています。\u003C/p>\n \u003Cbutton>詳細を見る\u003C/button>\n \u003C/div>\n \u003Cimg src=\"image.jpg\" alt=\"説明画像\">\n\u003C/div>",{"id":779,"title":780,"titles":781,"content":782,"level":126},"/docs/high-level#レイアウト仕様","レイアウト仕様",[759,770],"デスクトップ(1250px以上):\nグリッドレイアウト: 1fr 50%(テキスト:画像 = 2:1)横並び表示タブレット・スマホ(1250px以下):\n縦並び表示画像が上、テキストが下",{"id":784,"title":785,"titles":786,"content":787,"level":126},"/docs/high-level#画像の自動調整","画像の自動調整",[759,770],"/* 画像は自動で以下のスタイルが適用される */\nimg {\n max-width: 100%;\n margin: auto;\n max-height: 300px;\n object-fit: contain;\n}",{"id":789,"title":790,"titles":791,"content":792,"level":100},"/docs/high-level#ローダーloader","🔄 ローダー(.loader)",[759],"読み込み中を示すスピナーアニメーションです。",{"id":794,"title":775,"titles":795,"content":796,"level":126},"/docs/high-level#基本的な使い方-1",[759,790],"\u003Cdiv class=\"loader\">\u003C/div>",{"id":798,"title":799,"titles":800,"content":801,"level":126},"/docs/high-level#仕様","仕様",[759,790],"サイズ: 48px × 48pxアニメーション: 360度回転(0.7秒間隔)色: #1976d2(CSS変数で変更可能にします(現在は変更不可))",{"id":803,"title":804,"titles":805,"content":806,"level":100},"/docs/high-level#サーチボックスsearch-box","🔍 サーチボックス(.search-box)",[759],"検索フォームのレイアウトコンポーネントです。入力フィールドとボタンが一体化したデザインです。",{"id":808,"title":775,"titles":809,"content":810,"level":126},"/docs/high-level#基本的な使い方-2",[759,804],"\u003Cform class=\"search-box\">\n \u003Cinput type=\"search\" placeholder=\"検索キーワード\">\n \u003Cbutton type=\"submit\">検索\u003C/button>\n\u003C/form>",{"id":812,"title":813,"titles":814,"content":238,"level":126},"/docs/high-level#レスポンシブ動作","レスポンシブ動作",[759,804],{"id":816,"title":817,"titles":818,"content":819,"level":820},"/docs/high-level#デスクトップ1250px以上","デスクトップ(1250px以上)",[759,804,813],"横並び表示: 入力フィールドとボタンが一列角丸連結: 入力フィールド左角丸、ボタン右角丸フレックスレイアウト: 入力フィールドが伸縮",4,{"id":822,"title":823,"titles":824,"content":825,"level":820},"/docs/high-level#モバイル1250px以下","モバイル(1250px以下)",[759,804,813],"縦並び表示: 入力フィールドが上、ボタンが下独立した角丸: それぞれが完全な角丸ギャップ: 10px の間隔",{"id":827,"title":828,"titles":829,"content":830,"level":100},"/docs/high-level#設計","💡 設計",[759],"ドキュメントサイトでよく使われるパターンレスポンシブ: モバイル対応が自動カスタマイズ性: 低水準Classと組み合わせ可能 ハイレベルClassは、PitaCSSの「段階的採用」思想の最上位に位置し、複雑なUIを簡単に実装できます html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"id":49,"title":832,"titles":833,"content":834,"level":89},"リリース一覧",[],"https://github.com/otusoa/PitaCSS/releases",{"id":836,"title":832,"titles":837,"content":838,"level":89},"/release#リリース一覧",[],"https://github.com/otusoa/PitaCSS/releases より詳しくご覧になりたい場合、GitHubのリリースをご覧ください。 「v0.3.13α版」以前のリリースはこのサイトでは省略しています。より詳しくご覧になりたい場合、GitHubのリリースをご覧ください。",{"id":55,"title":54,"titles":840,"content":238,"level":89},[],{"id":842,"title":54,"titles":843,"content":238,"level":89},"/release/v0.5.0#v050-α版",[],{"id":845,"title":92,"titles":846,"content":847,"level":100},"/release/v0.5.0#概要",[54],"tailwind CSS等の他のフレームワークと併用しやすくしました。",{"id":849,"title":850,"titles":851,"content":852,"level":100},"/release/v0.5.0#追加added","追加(added)",[54],"BaseのCSSとClassレス、低水準クラス、ハイレベルClassを分けました。",{"id":854,"title":855,"titles":856,"content":857,"level":100},"/release/v0.5.0#修正fixed","修正(Fixed)",[54],"なし",{"id":859,"title":860,"titles":861,"content":857,"level":100},"/release/v0.5.0#削除","削除",[54],{"id":863,"title":864,"titles":865,"content":866,"level":100},"/release/v0.5.0#重大な変更","重大な変更",[54],"import手順の変更",{"id":868,"title":869,"titles":870,"content":871,"level":100},"/release/v0.5.0#変更した後","変更した後",[54],"@import \"pita-css/style-base\";\n@import \"pita-css/style\";\n@import \"pita-css/style-base\";\n@import \"pita-css/style-scoped\";\n@import \"pita-css/style\"; html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":59,"title":58,"titles":873,"content":238,"level":89},[],{"id":875,"title":58,"titles":876,"content":238,"level":89},"/release/v0.4.1#v041-α版",[],{"id":878,"title":92,"titles":879,"content":880,"level":100},"/release/v0.4.1#概要",[58],"tabsハイレベルClassを追加し、ファイルを軽量化",{"id":882,"title":850,"titles":883,"content":884,"level":100},"/release/v0.4.1#追加added",[58],"tabsハイレベルClassを追加",{"id":886,"title":855,"titles":887,"content":888,"level":100},"/release/v0.4.1#修正fixed",[58],"コメントアウトがminify化しても反映されるようにしました。",{"id":890,"title":860,"titles":891,"content":857,"level":100},"/release/v0.4.1#削除",[58],{"id":893,"title":864,"titles":894,"content":857,"level":100},"/release/v0.4.1#重大な変更",[58],{"id":896,"title":897,"titles":898,"content":899,"level":100},"/release/v0.4.1#例","例",[58],"npm install pita-css\npnpm add pita-css html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":63,"title":62,"titles":901,"content":238,"level":89},[],{"id":903,"title":62,"titles":904,"content":238,"level":89},"/release/v0.3.21#v0321-α版",[],{"id":906,"title":92,"titles":907,"content":908,"level":100},"/release/v0.3.21#概要",[62],"Scoped CSSスタイルを追加",{"id":910,"title":850,"titles":911,"content":912,"level":100},"/release/v0.3.21#追加added",[62],"コピーライトのコメントアウトを追加Scoped CSSスタイルを追加",{"id":914,"title":855,"titles":915,"content":857,"level":100},"/release/v0.3.21#修正fixed",[62],{"id":917,"title":860,"titles":918,"content":857,"level":100},"/release/v0.3.21#削除",[62],{"id":920,"title":864,"titles":921,"content":857,"level":100},"/release/v0.3.21#重大な変更",[62],{"id":923,"title":897,"titles":924,"content":925,"level":100},"/release/v0.3.21#例",[62],"読み込みの例です。\n局所的な場所にPitaCSSを適応したい時に使用してください。 @import \"pita-css/style-scoped\"; html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":67,"title":66,"titles":927,"content":238,"level":89},[],{"id":929,"title":66,"titles":930,"content":238,"level":89},"/release/v0.3.20#v0320-α版",[],{"id":932,"title":92,"titles":933,"content":934,"level":100},"/release/v0.3.20#概要",[66],"モバイルのとき、code等の要素がtd,thからオーバーフローする問題を解決",{"id":936,"title":850,"titles":937,"content":857,"level":100},"/release/v0.3.20#追加added",[66],{"id":939,"title":855,"titles":940,"content":934,"level":100},"/release/v0.3.20#修正fixed",[66],{"id":942,"title":860,"titles":943,"content":857,"level":100},"/release/v0.3.20#削除",[66],{"id":945,"title":864,"titles":946,"content":857,"level":100},"/release/v0.3.20#重大な変更",[66],{"id":71,"title":70,"titles":948,"content":238,"level":89},[],{"id":950,"title":70,"titles":951,"content":238,"level":89},"/release/v0.3.18#v0318-α版",[],{"id":953,"title":92,"titles":954,"content":955,"level":100},"/release/v0.3.18#概要",[70],"サイドバーがスクロールできないバグ修正",{"id":957,"title":850,"titles":958,"content":857,"level":100},"/release/v0.3.18#追加added",[70],{"id":960,"title":855,"titles":961,"content":955,"level":100},"/release/v0.3.18#修正fixed",[70],{"id":963,"title":860,"titles":964,"content":857,"level":100},"/release/v0.3.18#削除",[70],{"id":966,"title":864,"titles":967,"content":857,"level":100},"/release/v0.3.18#重大な変更",[70],{"id":75,"title":74,"titles":969,"content":238,"level":89},[],{"id":971,"title":74,"titles":972,"content":238,"level":89},"/release/v0.3.17#v0317-α版",[],{"id":974,"title":92,"titles":975,"content":976,"level":100},"/release/v0.3.17#概要",[74],"ダークモード時、逆の動きをするテキスト色の変数を追加",{"id":978,"title":850,"titles":979,"content":976,"level":100},"/release/v0.3.17#追加added",[74],{"id":981,"title":855,"titles":982,"content":857,"level":100},"/release/v0.3.17#修正fixed",[74],{"id":984,"title":860,"titles":985,"content":857,"level":100},"/release/v0.3.17#削除",[74],{"id":987,"title":864,"titles":988,"content":857,"level":100},"/release/v0.3.17#重大な変更",[74],{"id":79,"title":78,"titles":990,"content":238,"level":89},[],{"id":992,"title":78,"titles":993,"content":238,"level":89},"/release/v0.3.14#v0314-α版",[],{"id":995,"title":92,"titles":996,"content":997,"level":100},"/release/v0.3.14#概要",[78],"コードのコメントの改善コードのシンタックスハイライト(shiki)が正常に動作するように変更",{"id":999,"title":850,"titles":1000,"content":857,"level":100},"/release/v0.3.14#追加added",[78],{"id":1002,"title":855,"titles":1003,"content":997,"level":100},"/release/v0.3.14#修正fixed",[78],{"id":1005,"title":860,"titles":1006,"content":857,"level":100},"/release/v0.3.14#削除",[78],{"id":1008,"title":864,"titles":1009,"content":857,"level":100},"/release/v0.3.14#重大な変更",[78],{"id":83,"title":82,"titles":1011,"content":238,"level":89},[],{"id":1013,"title":82,"titles":1014,"content":238,"level":89},"/release/v0.3.13#v0313-α版",[],{"id":1016,"title":92,"titles":1017,"content":1018,"level":100},"/release/v0.3.13#概要",[82],"CSSのディレクトリ構図(ファイル構造)を誰にでもわかりやすくしました。\nメディアクエリを1250pxに統一\nコンポーネントの追加",{"id":1020,"title":850,"titles":1021,"content":1022,"level":100},"/release/v0.3.13#追加added",[82],"headerコンポーネントの追加(Classレス, 低水準クラス)",{"id":1024,"title":855,"titles":1025,"content":1026,"level":100},"/release/v0.3.13#修正fixed",[82],"メディアクエリを1250pxに統一",{"id":1028,"title":860,"titles":1029,"content":1030,"level":100},"/release/v0.3.13#削除",[82],"一部ファイルを分離、または合体",{"id":1032,"title":864,"titles":1033,"content":1034,"level":100},"/release/v0.3.13#重大な変更",[82],"cssのディレクトリ構造、ファイルの変更 理由: 誰が見てもわかりやすくするため。",["Reactive",1036],{"$snuxt-seo-utils:routeRules":1037,"$ssite-config":1038},{"head":-1,"seoMeta":-1},{"_priority":1039,"env":1042,"name":1043,"url":1044},{"name":1040,"env":1041,"url":1040},-3,-15,"production","PitaCSSマニュアル","https://css.pitahex.com",["Set"],["ShallowReactive",1047],{"navigation":-1,"search-data":-1},true,"/search"]