MENU
  1. ホーム
  2. Gallery
  3. 料金

料金

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

状態管理の最適化：状態を表すクラス（is-inactive）の設計と不透明度による識別表示

ポイント: 非対応の機能リストに対して「最初から薄い色のパーツ」を別個に作るのではなく、共通のパーツに対して .is-inactive という状態クラス（マルチクラス）を付与し、CSS側で opacity を用いて一元的にトグル制御しています。

<li class="plan-item is-inactive">検索・置換機能</li>

.plan-item.is-inactive {
  opacity: 0.4;
}

解説: 上位プランへの移行に伴って「今まで使えなかった機能が解放される」というUI表現でHTML要素自体を別々のクラスで完全に作り分けてしまうと、将来のプラン改定や機能追加の際に修正箇所が多岐にわたり、コードの肥大化やバグを招きます。
そこで、ベースとなるスタイルは .plan-item で完全に共通化し、利用不可の状態のみを表す .is-inactive クラスを掛け合わせる「マルチクラス設計」を採用しています。不透明度を opacity: 0.4; に落とすだけで、テキストだけでなく ::before で生成した左側の正円アイコンも含め、要素全体を一括で「無効化状態」へと視覚的に沈めることができます。

アイコンの縮小バグ防止：flex-shrink: 0による箇条書きリストの形状維持

ポイント: 箇条書きのドット（正円）を ::before 疑似要素と flexbox を用いて実装。テキストが長文になり複数行に折り返した際でも、ドットが押し潰されて楕円形に変形する表示バグを flex-shrink: 0; で完全に防止しています。

.plan-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-item::before {
  content: "";
  display: inline-block;
  background-color: var(--color-nord3);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0; /* ✨ テキストの長さに影響されず、6pxの正円を死守する */
}

解説: display: flex; の特性として、子要素のテキスト量が非常に多くなると、ブラウザは全体の幅に収めようとして、隣にある疑似要素（ドット）の幅を自動的にギュッと縮小させてしまう仕様（デフォルト値 flex-shrink: 1）があります。これにより、ドットが縦長の楕円形に潰れてしまうバグが多発します。
このリスク（表示崩れ）を未然に防ぐために、疑似要素側に flex-shrink: 0; を明示的に指定しています。「どれだけ周りの要素が広がろうとも、自分自身は絶対に縮まない」という絶対的な防壁を立てることで、どのようなテキストが入力されてもカンプ（Figma）通りの 6px の正円を維持します。

拡張性の高いカラム設計：repeat()関数と1frによる均等な3カラムグリッドレイアウト

ポイント: 料金表の3つのカードを横並びにする際、display: grid と repeat(3, 1fr) を用いることで、全体の画面幅（コンテナ内）に応じて各カードの横幅が完全に均等かつ自動的に伸縮する柔軟なレイアウトを構築しています。

.plan-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

<section class="plan">
  <h2 class="plan-title plan-title-pro">プロプラン</h2>
  <!-- 内部コンテンツ -->
</section>

解説: 3つのプラン（プロ・ビジネス・エンタープライズ）を並べるにあたり、各カードに width: 300px などの固定幅を割り当てるのではなく、可変幅ユニットである 1fr（Fraction：利用可能な空間の比率分配）を採用しています。さらに、repeat(3, 1fr) と記述することで、記述量を最小限に抑えつつ「利用可能なスペースを3等分してカードに等しく分け与える」という指示をブラウザに伝えています。
これにより、ディスプレイのサイズが変わってもカード間の余白（gap: 50px）は厳格に保たれたまま、カード自体の横幅が滑らかに追従します。また、HTML構造としても各プランを <section> タグという独立した意味を持つセクションとしてマークアップしており、見た目だけでなく、検索エンジンやスクリーンリーダーに対しても「ここに3つの異なるプラン情報が存在する」という情報階層を正しく伝えるアクセシビリティに配慮した設計です。

Gallery
目次