スタイルのカスタマイズ

Last updated on 10/29/2024@mrbirddev

はじめに

Slidde.coは、各コンポーネント内で直接CSSを使用してスタイルをカスタマイズできるという独自のアプローチを提供しています。Webflowのような従来のウェブサイトビルダーとは異なり、Slidde.coは以下の点で際立っています:

  • 標準CSSの使用:
    • あらゆるウェブサイトスタイルを実現。
    • スタイルを他のウェブサイトビルダーにエクスポートでき、コードベースの開発に移行した場合でも再利用可能。
  • プリセット値:
    • Tailwindのようなライブラリに触発され、Slidde.coはスタイルのプリセット値を提供し、オプションをクリックで選択可能。
  • 明確な構造:
    • 複雑なスタイルでも、設定は明確でDOM構造を乱さない。

サンプルコンポーネント: 水平ナビゲーションバー

複雑なコンポーネントである水平ナビゲーションバーを取り上げ、5つのカスタマイズ領域を探ります:

  1. カスタムスタイル: ナビゲーションバー全体のCSS。
  2. コンテナカスタムスタイル: 左側のコンテナのスタイル、通常はロゴやタイトルを配置。
  3. ボタンカスタムスタイル: デスクトップボタンのスタイル。
  4. ボタンアクティブスタイル: アクティブなデスクトップボタンのスタイル。
  5. トグルボタンカスタムスタイル: モバイルハンバーガーメニューボタンのスタイル。

完全なナビゲーションバーの例はこちらで確認できます template

高度なCSS構文

Slidde.coは、より正確なスタイリングのために高度なCSS構文をサポートしています:

  • ドットセパレーター: プロパティと修飾子を区切るために.を使用。
  • キャメルケース: CSSプロパティ名にキャメルケースを使用。

例:

  • &:hover.color: ホバー時のフォントカラー。
  • &:hover.borderColor: ホバー時のボーダーカラー。
  • padding: すべての画面サイズに対するパディング。
  • md.padding: 中型以上の画面(デスクトップ)に対するパディング。

モバイルとデスクトップで異なるパディングを設定するには: padding: .5rem & md.padding:2rem

標準CSSセレクター:

  • & > img.height: 現在の要素内の第一レベルのimg要素の高さ。
  • &:first-child.color: 最初の子要素に対する::first-child擬似クラス。
  • &::after.content: 追加の要素を追加するための::after擬似クラス。

これらのガイドラインに従うことで、Slidde.coを使用してウェブコンポーネントを正確かつ簡単にデザインおよびカスタマイズすることができます。

Loading...