の最も強力な機能のXNUMXつ Blocs プロジェクト内でカスタムクラスを使用する機能です。 グラフィックデザインのバックグラウンドを持っている場合は、カスタムクラスを、の任意のアイテムに割り当てることができるレイヤースタイルと考えてください。 Blocs 特定のルックアンドフィールを与えるために。 これらのクラスのルールは、デスクトップ、タブレット、モバイルで異なって表示されるように調整できます。つまり、アイテムが表示されているデバイスに合わせて、アイテムの細部を微調整することができます。 以下のビデオでは、カスタムクラスの基本と、それらをデザインで使用する方法について説明しています。
カスタムクラスの適用
内のアイテムにカスタムクラスを適用するには Blocs、最初にメインデザインキャンバス上のアイテムを選択します。 左クリック それ。 サイドバーのオプションで、ラベルの付いたフィールドを見つけます クラス このフィールド内をクリックしてアクティブにします。
アクティブ化したら、クラスに付ける名前またはプロジェクトにすでに存在するクラスの名前をキーボードで入力して、Returnキーを押します。 これにより、classesフィールドにカスタムクラスタグが作成されます。これは、このクラスがこのアイテムに割り当てられたことを意味します。 このプロセスを繰り返して、同じアイテムに複数のクラスを追加できます。
カスタムクラスの値へのアクセス
内のカスタムクラスの値にアクセスする方法はいくつかあります Blocs。 最も簡単な方法は 右クリック コンテキストメニューを表示するアイテム。 このメニューから、 カスタムクラス その後 左クリック ドロップダウンから表示するクラス。 これにより、選択したクラスがクラスエディタで開き、その値を表示および編集できます。
次の方法でカスタムクラスの値にアクセスすることもできます。 左クリック メインサイドバーインスペクターオプションにあるクラスフィールド内にあるクラスタグのXNUMXつ。
カスタムクラスの編集
Blocs クラスを視覚的に簡単に編集できる強力なクラスエディタが組み込まれています。
クラスエディタは次のように分割されます 9セクション さまざまなルールタイプと値の編集をより管理しやすく明確にするため。
1。 メトリック
このオプションのセットには、幅、高さなどの測定コントロールが含まれています。
2 ボックス
このオプションのセットには、マージン、パディング、境界線などのボックスコントロールが含まれています。
3。 タイポグラフィ
このオプションのセットには、フォントサイズ、文字間隔などのタイポグラフィコントロールが含まれています。
4。 背景
このオプションのセットには、背景画像、グラデーションなどの背景コントロールが含まれています。
5.ポジショニング
このオプションのセットには、float、display、clearなどのポジショニングコントロールが含まれています。
6.影
このオプションのセットには、テキストシャドウ、ボックスシャドウなどのシャドウコントロールが含まれています。
7 フィルター
このオプションのセットには、ぼかし、彩度、コントラストなどのCSSフィルターコントロールが含まれています。
8.SVG
このオプションのセットには、ストロークの色、ラインキャップなどのSVGコントロールが含まれています。
9.フレックス
このオプションのセットには、方向、整列などのフレックスコントロールが含まれています。
3つのセクションのそれぞれの中に、標準のCSSXNUMXルールに特定の値を適用できるようにするラベル付きのユーザーインターフェイス要素がいくつかあります。
特定のブレークポイントのクラスの編集
In Blocs 表示されているブレークポイントに基づいて、任意のクラスの値を調整することができます。 これは、ユーザーがWebサイトにアクセスしたときに使用しているデバイスに応じて、ユーザーに完全にユニークなエクスペリエンスを作成できるため、非常に便利です。
特定のブレークポイントでクラスの値を編集するには、を使用してそのブレークポイントに切り替えるだけです。 ブレークポイントビュー にあるオプション センター アプリのメインツールバーのボタンを押してから、そのカスタムクラスの値を編集します。
ブレークポイントビューコントロールがどのように機能するかについて詳しく知ることができます こちら.
また、レスポンシブクラスでの作業の基本をカバーする以下のビデオレッスンを視聴することをお勧めします。
クラスの状態
アイテムが表示されているデバイスに基づいてアイテムの視覚スタイルを設定できるだけでなく、 Blocs クラスエディタでは、現在の状態に基づいてアイテムのスタイルを設定することもできます。 内で利用可能なXNUMXつの状態があります Blocs.
ノーマル
アイテムのデフォルトの状態。
ホバー
この ：ホバー マウスカーソルがアイテムの上にあるときの状態が表示されます。
従軍中
この ：アクティブ セレクターは、アクティブなリンクを選択してスタイルを設定するために使用されます。
フォーカス
この ：フォーカス セレクターは、フォーカスのある要素を選択するために使用されます。
訪れた
この ：訪問 セレクターは、訪問したリンクを選択するために使用されます。
これらの状態を利用すると、ボタンの上にマウスを置いたときにボタンの色を変更したり、リンクをクリックしたときにリンクのテキストサイズを変更したりすることができます。 状態を使用すると、ユーザーが操作したときにWebページ上のアイテムの外観を動的に変更できます。これは、使いやすさに関するメッセージを伝える必要がある場合に非常に役立ちます。
状態変化
カスタムクラスの特定の状態の値を編集するには、単に 左クリック メインクラス名フィールドの左側にあるドロップダウンメニューボタンで、編集する状態を選択します。
カスタムクラスの削除
アイテムからカスタムクラスを削除するには、アイテムを選択し、サイドバーオプションから、カスタムクラスフィールドに移動して、 左クリック 小さな x の右側にある記号 クラスタグ 削除したい。 これにより、選択したアイテムからクラスが削除されます。
