カテゴリー

このセッションでは、次のことがわかります。

1. カテゴリーの形成と実装方法
2. カテゴリを調整する方法
3. categoryを削除する方法
4. categoryを複製する方法
5. 組み合わせカテゴリーの作成方法
6. グローバルcategoryを確立する方法

カテゴリーの作成と適用方法

要素のスタイル設定を開始するとすぐに、category が自動的に生成され、選択した要素に実装されます。この要素に対して行われたすべてのスタイル変更は、この category に保持されます。

categoryを開始するには:

1. キャンバス上の要素を選択する
2. 入力してください 指定フィールド categoryを定義する

これで、category が作成されました。

スタイルを統合する前に、category名を 指定フィールド.

到達するには3つの方法があります 指定フィールド:

1. スタイルパネルの指定子フィールドにアクセスする
2. 使用する 指示 + 入力 (Macの場合) または コントロール + 入力 (Windowsの場合) キーボードショートカット
3. 要素を右クリックし、コンテキストメニューでcategoryの挿入を選択します。

‍

同じ category を必要な数の要素に実装するには、次のようにします。 

1. キャンバス上の要素を選択する
2. categoryの名前を 指定フィールド
3. 打つ 入力

categoryの名前を入力し始めると、 指定子categoryの名前が現れることがわかります。 指定子 ドロップダウンリストからcategoryを選択するか、キーボードの矢印キーで移動して 入力.

カテゴリを変更する方法

category が確立され、さまざまな要素に実装された後、その category を変更できます。

category を変更するには:

1. categoryの要素を選択します 
2. スタイルを調整する

スタイルの変更は、サイト全体で category が使用されているすべての箇所に影響します。

category には要素タイプに基づいて一意の名前が与えられますが、名前を変更することもできます。

category の名前を変更するには 4 つの方法があります。

1. categoryの名前をダブルタップします 指定子、名前を変更して、 入力
2. プレス コマンド + Shift + Enter、 categoryの名前を変更し、 入力
3. 要素を右クリックし、 categoryの名前を変更、クラス名を変更し、 入力
4. categoryの名前の上にマウスを置きます 指定子表示されるドロップダウンをクリックし、 categoryの名前を変更categoryの名前を変更し、 入力

新しい名前は デザインマネージャー そしてその 指定子 の中に スタイルパネル.

categoryの名前を変更することもできます。 デザインマネージャー.

CSS 命名に関するベストプラクティス:

1. カテゴリ名は大文字と小文字を区別しません（「alert」は「ALERT」と同じです）。
2. カテゴリ名は文字で始まる必要があります
3. カテゴリ名は英数字形式（azと0-9）とハイフンを使用し、特殊文字は使用しないでください。

プロのヒント: カテゴリに名前を付ける場合は、論理的なグループ化区切りとしてハイフン (タブ メニュー) を適用し、スタイルではなく操作に基づいてカテゴリに固有の名前を付けることをお勧めします。良い例: フォーム ボタン。悪い例: 青いボタン。

category の名前に含まれる固有の文字

固有文字とは、アルファベットや数字とは異なる文字のことです。句読点やその他の記号は、固有文字のインスタンスとして機能します。

categoryの名前にはほとんどのユニークな文字を含めることができます（例： あなたのcategory名 +) の場合、Webflow によって一意の文字が自動的にハイフンに変更されるため、推奨されません。 

例えば、categoryという名前は あなたのcategory名 + categoryラベルと全く同じように扱われる あなたのcategory名前$ なぜなら、 + そして $ 一意の文字はハイフンに変換されます: (例: あなたのcategory名 –). 

上記のシナリオでは、固有の文字を使用する 2 つの個別のカテゴリに対するスタイルの変更は、後で両方に適用されます。

categoryを消去する方法

すでに category を持つ要素に別の category を適用したい場合は、次の 2 つの方法で既存の category を削除できます。

1. 入力してください 指定フィールド を押して 消去 キーボードで
2. categoryにマウスを移動し、下向き矢印をタップして選択します categoryを削除

クラスを複製する方法

元のクラスを変更せずにクラスを複製して調整するオプションがあります。 

既存のクラスのコピーを作成するには:

1. クラスの上にマウスポインターを置きます
2. 下向き矢印を選択
3. 選ぶ 重複クラス
4. クラスに新しい名前を付けて 入力

重要： 複製されたクラスは、元のクラスから独立した新しいクラスを構成します。変更は複製されたクラスには引き継がれません。

コンボクラスを確立するテクニック

要素にクラスを適用してスタイルを追加した後、同じクラスの他の要素に影響を与えずに、このクラスの特定のインスタンスに小さなスタイル調整を実装したい場合があります。新しいクラスを作成して同じスタイルを複製する代わりに、Webflow は、いわゆるコンボ クラスの作成を容易にし、スタイルのオーバーライドを導入して独自のバリエーションを作成できるようにします。

要素にコンボクラスを追加するには、新しいクラス名を入力します。 セレクターフィールド 基本クラスのすぐ隣にあります。 

アクセスできます セレクタ 3つの異なる方法で:

1. 選択する セレクターフィールド既存のクラスの隣にあります
2. 押す 指示 + 入力 (Macの場合) または コントロール + 入力 (Windowsの場合)
3. 要素を右クリックして クラスを追加 コンテキストメニューで

最初の基本クラスの後続のクラスはすべてコンボ クラスとして認識されます。コンボ クラスは選択した要素にのみ追加されるため、この要素に適用されたスタイルの変更は、基本クラスの他の出現には影響しません。

コンボクラスを適用するテクニック

別の要素に同じ基本クラスとコンボ クラスを持たせたい場合は、これらのクラスを連続して適用できます。つまり、最初に基本クラスを適用し、次にコンボ クラスを適用します。

キーボードショートカット： セレクター フィールドにクラス名を入力するときに、カンマを入力すると、そのクラスが含まれるようになり、セレクター フィールドに再度フォーカスを合わせなくても、後続のコンボ クラスをすばやく入力できるようになります。

スタイルを上書きするアプローチ

コンボ クラスを生成すると、新しいスタイルを導入したり、基本クラスから継承したスタイルをオーバーライドしたりできます。変更はコンボ クラスにのみ影響します。

スタイル パネル内では、継承されたスタイルはオレンジ色で表示され、上書きされたスタイルまたは新しいスタイルは青色で強調表示されます。

基本クラスを変更するアプローチ

コンボ クラスを使用して要素をスタイル設定する場合、コンボ クラスはより具体的な選択として機能するため、すべてのスタイル調整はコンボ クラスにのみ影響します。プライマリの基本クラスをスタイル設定する場合は、セレクターの上にある継承メニューからアクセスできます。

1. 上の継承セレクターインジケータをクリックします。 セレクターフィールド
2. 基本クラスを選択する
3. スタイルの変更を実装する
4. 打つ 戻る の上 セレクタ コンボクラスのスタイルに戻す

基本クラスに加えられたすべての変更は、コンボ クラスで選択された要素を含む、その基本クラスが適用されているすべての要素に反映されます。

打つ 戻る セレクターの上にあるコンボクラスのスタイル設定に戻るには

すでにコンボ クラスで同じプロパティにスタイルを設定している場合、基本クラスへの特定のスタイル変更はコンボ クラスでは表示されないことがあります。これは、値がコンボ クラスによって上書きされるためです。これらのスタイルは赤い取り消し線で示されます。

クラスを複製するのではなく結合すると、より組織的なアプローチが提供されます。クラスのコア属性を継承するコンボ クラスは、ベースのスタイルを維持しながらバリエーションとして機能します。ただし、階層化された継承の管理が複雑になるため、複数のコンボ クラスを作成することは控えることをお勧めします。

より深い変更を目指す場合、元のクラスを複製するのがより効率的な方法です。これにより、元のスタイルのすべての特性を備えた明確な新しいクラスが作成され、調整が容易になります。

ユニバーサルクラスの作成

グローバル クラスは、Web サイト全体のさまざまな要素に適用できる多目的なスタイルを提供します。これらのクラスは、幅広いスタイルに対応し、基本クラスに割り当てられます。ただし、グローバル クラスでスタイル設定された要素は、基本クラスの要素とは別のままです。たとえば、普遍的に適用されるドロップ シャドウ スタイルを設計すると、統一性を実現するための戦略的なアプローチになります。

グローバル クラス要素を効果的に実装するには、すべてのグローバル クラス要素を格納するための専用ページ (スタイル ガイド ページなど) を作成することを検討してください。ここでは、次の操作を実行できます。

1. セクションブロックを挿入する
2. 一意のクラス名を割り当てます（例：Supreme glow）
3. セクションブロックをカスタマイズする 必要なプロパティ（例：サイト全体での使用のための繰り返しドロップシャドウ属性）

これで、他のスタイルと組み合わせて適用できるグローバル クラスが正常に確立されました。

覚えて: グローバル クラスの名前は、対応するクラスへのグローバルな適用を決定します。

グローバル クラスを他のクラスの上に重ねることで、そのスタイル プロパティをさまざまなクラス構造にシームレスに統合できます。

最適な参照:

• クラスの基本 – Webflow でモジュラー設計を採用
• 強化された Webflow プロジェクトに役立つ「アシスタント」クラス

• について
• 最新の投稿

ユアン・マック

Webflow エキスパート で Tenten

Webflow の専門家であり、4 年以上の経験を持つフロントエンド開発者です。私は、優れた Webflow エクスペリエンスを作成するために、汎用的なスキルセット (HTML、CSS、JS、Figma、Adobe) を活用しています。70 以上のプロジェクトを通じて、カスタム コードとビジュアル開発をシームレスに融合する能力を磨きました。組織的で、期限を守り、成長に情熱を注ぐ私は、ダイナミックな環境で優れた能力を発揮します。限界を押し広げて、素晴らしいものを作りましょう。

Ewan Mak による最新の投稿 (すべてを見る)

• ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
• センタリングボックスの概要 - 2024年4月15日
• 将来の参照用にサイトを保存する - 2024年4月15日

関連記事

• 迅速な複製

  Webflow デザイナーで要素をすばやく複製し、正確に配置します。

• スタイルを見つけて排除する

  デザイナーのスタイリング スーパーバイザーは、デザイナー内のすべてのデザインの包括的なビューを提供します。

• フレックスボックスを使用して要素を整列させる

  フレックスボックスを使用して、要素を親要素の中央に完全に配置します。