スタイルのカスタマイズ
Last updated on 10/29/2024@mrbirddev
はじめに
Slidde.coは、各コンポーネント内で直接CSSを使用してスタイルをカスタマイズできるという独自のアプローチを提供しています。Webflowのような従来のウェブサイトビルダーとは異なり、Slidde.coは以下の点で際立っています:
- 標準CSSの使用:
- あらゆるウェブサイトスタイルを実現。
- スタイルを他のウェブサイトビルダーにエクスポートでき、コードベースの開発に移行した場合でも再利用可能。
- プリセット値:
- Tailwindのようなライブラリに触発され、Slidde.coはスタイルのプリセット値を提供し、オプションをクリックで選択可能。
- 明確な構造:
- 複雑なスタイルでも、設定は明確でDOM構造を乱さない。
サンプルコンポーネント: 水平ナビゲーションバー
複雑なコンポーネントである水平ナビゲーションバーを取り上げ、5つのカスタマイズ領域を探ります:
- カスタムスタイル: ナビゲーションバー全体のCSS。
- コンテナカスタムスタイル: 左側のコンテナのスタイル、通常はロゴやタイトルを配置。
- ボタンカスタムスタイル: デスクトップボタンのスタイル。
- ボタンアクティブスタイル: アクティブなデスクトップボタンのスタイル。
- トグルボタンカスタムスタイル: モバイルハンバーガーメニューボタンのスタイル。
完全なナビゲーションバーの例はこちらで確認できます 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を使用してウェブコンポーネントを正確かつ簡単にデザインおよびカスタマイズすることができます。