PitaCSS(α)
PitaCSS(α)

目次

更新日：2025年6月16日

構造

ページの一部のみ(Classレスの部分だけ使用など)する場合は、ScopedバージョンのPitaCSSがあります。 その場合、こちらをご覧ください。

基本構造

PitaCSSはドキュメンテーション特化型なので、ドキュメンテーション用の構造しか用意されていません。

以下の構造で構築します。

    <!-- ヘッダー -->
    <header>
        <div class="logo-container hide-max1250">
          <!-- ロゴやテキストなど -->
        </div>
        <div class="logo-container-responsive hide-min1250">
          <!-- ロゴやテキストなど -->
        </div>
    </header>

    <!-- メインコンテナ -->
    <div class="container">
        <button class="nav-toggle">☰</button>
        <!-- オーバーレイ（モバイル用） -->
        <div class="nav-overlay"></div>

        <!-- サイドナビゲーション -->
        <aside>
            <div class="aside-header">
                <h2>ナビゲーション</h2>
            </div>
            <ul>
                <li><a href="#section1">セクション1</a></li>
                <li><a href="#section2">セクション2</a></li>
            </ul>
        </aside>

        <!-- メインコンテンツエリア -->
        <div class="content">
            <main class="pT40">
                <!-- ドキュメントの内容 -->
                <h1>ページタイトル</h1>
                <p>ページの内容をここに記述します。</p>
            </main>
        </div>
    </div>

    <footer>
      <div class="content-center">
          <p>ライセンス: MIT License</p>
      </div>
      <small>コピーライト表記</small>
    </footer>

ヘッダー(header)

logo-container-responsive Classでモバイル用にロゴが最適化されます。

    <header>
        <div class="logo-container hide-max1250">
          <!-- ロゴやテキストなど -->
        </div>
        <div class="logo-container-responsive hide-min1250">
          <!-- ロゴやテキストなど -->
        </div>
    </header>

フッター(footer)

small 要素はサイトの下部などのコピーライト表記になどに使います。

footer要素のsmallを除く中の要素は、content-center クラスが付いたdivでラップすることをおすすめします。

<footer>
  <div class="content-center">
    <p>ライセンス: MIT License</p>
  </div>
  <small>コピーライト表記</small>
</footer>

ナビゲーション(nav)

ドロップダウンメニュー

以下のような、aside直下のネストされたリストが「ドロップダウンメニュー」になります。

<aside>
  <div class="aside-header">
  <!-- ヘッダー要素 -->
  </div>

  <ul>
    <li>
      <!-- ネストされたメニュー -->
      <ul>
        <li>ドキュメント</li>
      </ul>
    </li>
  </ul>
</aside>

s3.png

JavaScript、CSSともに設定は完全に不要です。

ハンバーガーメニュー(Toggle menu)

JavaScriptでサイドバーのナビゲーションをレスポンシブ化します。そのためには以下の要素が必要です

<div>
        <!-- 必須 BEGIN -->
        <button class="nav-toggle">☰</button>

        <div class="nav-overlay"></div>

        <aside>
            <!-- ナビヘッダー -->

            <!-- メニューリスト -->
        </aside>
</div>