PitaCSS ハイレベルClass

概要

ハイレベルClassは、複雑なレイアウトやUIコンポーネントを簡単に実装するための高機能なクラスです。低水準Classやクラスレスの上位に位置し、より具体的なデザインパターンを提供します。

📰 メディアテキスト（.media-text）

テキストと画像を横並びで配置するレイアウトコンポーネントです。レスポンシブ対応で、小画面では縦並びに自動変更されます。

基本的な使い方

<div class="media-text">
  <div>
    <h3>タイトル</h3>
    <p>ここにテキストコンテンツを記述します。画像と横並びで表示され、レスポンシブに対応しています。</p>
    <button>詳細を見る</button>
  </div>
  <img src="image.jpg" alt="説明画像">
</div>

レイアウト仕様

デスクトップ（1250px以上）:
- グリッドレイアウト: 1fr 50%（テキスト:画像 = 2:1）
- 横並び表示
タブレット・スマホ（1250px以下）:
- 縦並び表示
- 画像が上、テキストが下

画像の自動調整

/* 画像は自動で以下のスタイルが適用される */
img {
  max-width: 100%;
  margin: auto;
  max-height: 300px;
  object-fit: contain;
}

🔄 ローダー（.loader）

読み込み中を示すスピナーアニメーションです。

基本的な使い方

<div class="loader"></div>

仕様

サイズ: 48px × 48px
アニメーション: 360度回転（0.7秒間隔）
色: #1976d2（CSS変数で変更可能にします(現在は変更不可)）

🔍 サーチボックス（.search-box）

検索フォームのレイアウトコンポーネントです。入力フィールドとボタンが一体化したデザインです。

基本的な使い方

<form class="search-box">
  <input type="search" placeholder="検索キーワード">
  <button type="submit">検索</button>
</form>

レスポンシブ動作

デスクトップ（1250px以上）

横並び表示: 入力フィールドとボタンが一列
角丸連結: 入力フィールド左角丸、ボタン右角丸
フレックスレイアウト: 入力フィールドが伸縮

モバイル（1250px以下）

縦並び表示: 入力フィールドが上、ボタンが下
独立した角丸: それぞれが完全な角丸
ギャップ: 10px の間隔

💡 設計

ドキュメントサイトでよく使われるパターン
レスポンシブ: モバイル対応が自動
カスタマイズ性: 低水準Classと組み合わせ可能

ハイレベルClassは、PitaCSSの「段階的採用」思想の最上位に位置し、複雑なUIを簡単に実装できます

目次

PitaCSS ハイレベルClass